jQuery DataTables Horizontal Scroll and Filtering Not Working Together

Question

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.

-1 for no code example, no research effort shown. Check DataTables forums and existing DataTables GitHub issues. If your case is not there, create a test case and publish it in the DataTables forums at datatables.net/forums/discussion/12899/… — xmojmr
– xmojmr, Commented May 28, 2014 at 16:13
you can put your test case (run-able example of your problem) on a public site like jsFiddle or jsBin or CodePen or live.DataTables.net or anywhere else.. supportive? — xmojmr
– xmojmr, Commented May 28, 2014 at 18:18
Fair enough. I rescind my previous comment and will look to generalize the issue. — Kode
– Kode, Commented May 28, 2014 at 18:22
Fair enough. My -1 vote was because you did not keep basic Stack Overflow rules (e.g. stackoverflow.com/help/mcve). The link to DataTables forums and test case is a MUST if you want Allan Jardine (the author) to help you. I needed his help myself just 2 days ago and I also had to provide a test case. If you improve your question I'll remove my downvote — xmojmr
– xmojmr, Commented May 28, 2014 at 18:35
I have found the answer by creating a separate area for filtering that is outside of the datatable. In the future, I will be better about the following the rules and providing test cases. Here is a link to what I am implementing: datatables.net/examples/api/regex.html Note that it resides outside of the datatable — Kode
– Kode, Commented May 29, 2014 at 15:41

Stephan Vierkant · Accepted Answer · 2017-10-06 19:59:05Z

2

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.

edited Oct 6, 2017 at 19:59

Stephan Vierkant

10.3k8 gold badges67 silver badges102 bronze badges

answered Mar 20, 2015 at 17:17

Joao Lucas

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

isabelle martz Over a year ago

Where do you put the first code? directly on the DataTable script?

Collectives™ on Stack Overflow

jQuery DataTables Horizontal Scroll and Filtering Not Working Together

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related