CODEWITHSUNDEEP
datatables
Kode
Kode

Reputation: 3215

jQuery DataTables Horizontal Scroll and Filtering Not Working Together

I am using Datatables and require both horizontal scrolling and filtering. It appears that they try to write to the same area and I can't get both to work. If I enable filtering, it will filter once then then filter disappears.

Any clues? It is within an intranet so I can't post code.

Upvotes: 2

Views: 3035

Answers (1)

Joao Lucas
Joao Lucas

Reputation: 36

I had the same problem. After many attempts I found two solutions to solve this. Here are the options:

1) If you want to put the column filters after the first header (title of column and ordering), the following code snippet worked:

table.columns().eq(0).each( function ( colIdx ) {
    $( 'input', otable.column( colIdx ).header() ).on( 'keyup change', function() {
        table
            .column( colIdx )
            .search( this.value )
            .draw();
    });
});

2) Else, type the following code snippet after create a table object:

table.columns().eq(0).each( function ( colIdx ) {
     $( 'input', 'th:nth-child('+(colIdx+1)+')' ).on( 'keyup change', function() {
          table
              .column( colIdx )
              .search( this.value )
              .draw();
     });
});

Regards. Joao Lucas.

Upvotes: 2

Related Questions