horizontal scroll and column filtering are not working together at same time.

musman

I have too many columns in data table, so I am using "scrollX": true property and I am also using column filtering, both are not working correctly at same time. when i scroll horizontally, footer columns don't scroll properly.

$(document).ready(function() { $('#example').DataTable( { "scrollY": 400, "scrollX": true, "lengthMenu": [[25, 50, -1], [25, 50, "All"]], initComplete: function () { var api = this.api(); this.api().columns([3, 5, 9,10,11]).every( function () { var column = api.column( i ); var select = $('') .appendTo( $(column.footer()).empty() ) .on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search( val ? '^'+val+'$' : '', true, false ) .draw(); } ); column.data().unique().sort().each( function ( d, j ) { select.append( ''+d+'' ); } ); } ); } } ); } );

colin

Hi @musman ,

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin