Filter columns next to columns title

laynier

I am using FixedHeader for searching and filtering by columns using this code:

$(document).ready(function() {
$('#example1 thead tr').clone(true).appendTo( '#example1 thead' );
$('#example1 thead tr:eq(1) th').each( function (i) {

    var title = $(this).text();
    if(title != 'Action'){
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

    $( 'input', this ).on( 'keyup change', function () {
        if ( table.column(i).search() !== this.value ) {
            table
                .column(i)
                .search( this.value )
                .draw();
        }
    } );
} else $(this).text('');
}
);

 var table = $('#example1').DataTable( {
     orderCellsTop: true,
    fixedHeader: true
 } );
});

This creates a row with text inputs to filter by column. However I need to insert inputs next to column titles, not under or above. That way I won't have blank cells in filter row when no search is needed.

kthorngren

The main reason for having a second header row with the search inputs is to isolate them from the sorting events that are applied to each column. The --option orderCellsTop is used to place the sorting click events in the top row when the inputs are in the second. If this isn't a concern for you then you can have just one row and place the search inputs in that row. Start by removing line 2 and change the selector in line 3 to remove :eq(1). On line 7 you might need to add the title in front of the input.

Kevin

laynier

Worked Perfect! Thanks!