Column search second header

kthorngren

I'm playing around with column searching in the thead. I've placed the search boxes in the second header row and sorting in the first row. I'm not proficient with selectors and have not figured out what to use to create the event handlers. I have my example here:
http://live.datatables.net/giharaka/1/edit

Right now it has table.column().header() which isn't working because I set the sorting to the top orderCellsTop: true and its pointing to that thead row. If anyone has any ideas of what to change please let me know.

Kevin

bindrid

This is what I came up with:

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


    $( '#example thead'  ).on( 'keyup', ".column_search",function () {
  
        table
            .column( $(this).parent().index() )
            .search( this.value )
            .draw();
    } );

} );

bindrid

you method was actually adding a single event handler in each iteration of the each causing the event handlers to fire on every column even when only one column changed.

kthorngren

Thanks @bindrid. Nice and simple answer. I was making it too complicated.

Kevin