scrollX problem

Norvel

Hello, I have a problem with this script:

$(document).ready(function() {
    // Setup - add a text input to each footer cell
  $('#example thead tr:eq(1) th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" class="column_search" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable({
      orderCellsTop: true,
      "scrollX": true
    });
 
// Apply the search
    $( '#example thead'  ).on( 'keyup', ".column_search",function () {
   console.log('ici');
        table
            .column( $(this).parent().index() )
            .search( this.value )
            .draw();
    } );

} );

I would like to do a search by column, but "" scrollX ": true" create a table on the thead which breaks everything, would you have a solution?
Thank you !

http://live.datatables.net/giharaka/59/edit

kthorngren

Thanks for the example. scrollX does its magic by moving the header into a different table it creates. You can see this if you inspect the header both with and without scrollX. Changing the selector to this seems to work:
$( 'table thead' ).on( 'keyup', ".column_search",function ()

Here is the updated example:
http://live.datatables.net/vodoyida/1/edit

Kevin

Norvel

It works ! Thank you !!