Individual Column Text Filtering doesn't work w/ xScroller

DataTablesNewGuy

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();
 });

});

/script>

Appreciate the help.

DataTablesNewGuy

Anyone out there able to help?

allan

$('#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

DataTablesNewGuy

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?

allan

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

Allan

DataTablesNewGuy

Spot on Allan!

Thanks for your time.