DataTables logo
≡

Individual Column Text Filtering doesn't work w/ xScroller

Individual Column Text Filtering doesn't work w/ xScroller

DataTablesNewGuyDataTablesNewGuy Posts: 9Questions: 4Answers: 0
edited October 2014 in Free community support

The search fields display inside of the table (bottom row) when the table is in the loading phase but disappear when the table completes loading and renders completely.

I am using the example found here: https://datatables.net/examples/api/multi_filter.html
It is my understanding that the individual column searching fields are to be displayed in place of the footer column headers.

If I remove xScroller, the individual column search fields display just fine in place of the footer.

   < script > $(document).ready(function () {
 $('#example').dataTable({
     "dom": 'T<"clear">lfrtip',

         "oTableTools": {
         "sSwfPath": "http://datatables.net/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
             "aButtons": [{
             "sExtends": "copy",
                 "sButtonText": "Copy",
                 "oSelectorOpts": {
                 filter: 'applied'
             }
         }, {
             "sExtends": "csv",
                 "sButtonText": "CSV",
                 "oSelectorOpts": {
                 filter: 'applied'
             }
         }, {
             "sExtends": "xls",
                 "sButtonText": "Excel",
                 "oSelectorOpts": {
                 filter: 'applied'
             }
         }, {
             "sExtends": "pdf",
                 "sButtonText": "PDF",
                 "oSelectorOpts": {
                 filter: 'applied'
             }
         }, {
             "sExtends": "print",
                 "sButtonText": "Print",
                 "oSelectorOpts": {
                 filter: 'applied'
             }
         }]


     },
         "fnRowCallback": function (nRow, aData, iDisplayIndex) {
         $('td', nRow).attr('nowrap', 'nowrap');
         return nRow;
     },
         "iDisplayLength": 25,
         "scrollX": true,
         "bAutoWidth": false,
         "bProcessing": false,
         "sAjaxSource": "../reports/hardware_report.txt",
         "sAjaxDataProp": "",
         "aoColumns": [{
         "mData": "Hostname"
     }, {
         "mData": "Serial number"
     }],

 });

 $('a.toggle-vis').on('click', function (e) {
     e.preventDefault();

     // Get the column API object
     var column = table.column($(this).attr('data-column'));

     // Toggle the visibility
     column.visible(!column.visible());
 });
 // Setup - add a text input to each footer cell
 $('#example tfoot th').each(function () {
     var title = $('#example tfoot th').eq($(this).index()).text();
     $(this).html('<input type="text" placeholder="Search ' + title + '" />');
 });

 // DataTable
 var table = $('#example').DataTable();

 // Apply the filter
 $("#example tfoot input").on('keyup change', function () {
     table.column($(this).parent().index() + ':visible')
         .search(this.value)
         .draw();
 });

});

Appreciate the help.

This question has an accepted answers - jump to answer

Answers

  • DataTablesNewGuyDataTablesNewGuy Posts: 9Questions: 4Answers: 0

    Anyone out there able to help?

  • allanallan Posts: 65,825Questions: 1Answers: 10,952 Site admin

    $('#example tfoot th')

    That's the problem. Basically what is happening is that DataTables splits the table into three when you enable scrolling - the header, body and footer. That selector is selecting a hidden footer - not the real, visible, table footer!

    To address this you can use the table().footer() method to get the footer. i.e. you might use:

    $('th', table.table().footer()).each( ... );

    where table is the DataTables API instance.

    Allan

  • DataTablesNewGuyDataTablesNewGuy Posts: 9Questions: 4Answers: 0
    edited October 2014

    Thanks for taking the time Allan.

    I have unsuccessfully tried the following:

             $('th', table.table().footer()).each(function () {

         //var title = $('#example tfoot th').eq($(this).index()).text();

         $(this).html('<input type="text" placeholder="Search ' + title + '" />');
     });

    Any ideas as to how I might alter the statement?

  • allanallan Posts: 65,825Questions: 1Answers: 10,952 Site admin
    Answer ✓

    Here is a modification of my input example showing how it might be done: http://live.datatables.net/sodujome/1/edit .

    Allan

  • DataTablesNewGuyDataTablesNewGuy Posts: 9Questions: 4Answers: 0

    Spot on Allan!

    Thanks for your time.

This discussion has been closed.