Filter columns next to columns title

Filter columns next to columns title

laynierlaynier Posts: 14Questions: 2Answers: 0

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 ) {
                .search( this.value )
    } );
} 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.

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 20,776Questions: 26Answers: 4,857
    Answer ✓

    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.


  • laynierlaynier Posts: 14Questions: 2Answers: 0
    edited July 2021

    Worked Perfect! Thanks! :)

Sign In or Register to comment.