How can I make the body of the datatable scroll, but retain column searching?

GaryBartlett

Link to test case: http://live.datatables.net/kibokupu/3/edit?html,css,js,output
Debugger code (debug.datatables.net): None
Error messages shown: None
Description of problem:
1. If you type a few letters into the search field above a column in the test case, the searching/filtering works perfectly.
2. If, however, you uncomment the 11th line in the test case (scrollY: "20vh",) the scrolling works fine but the filtering no longer works.

Any ideas on how to go about enabling table body scrolling on searchable columns?

Thanks very much.

I am loving DataTables, btw! (I've built a way more complex datatable than in the example - in my first crack at it - and have only this step to take).

Gary

kthorngren

You have FixedHeader enables in your example. You aren't loading the extension in the test case but the FixedHeader docs state this:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

See if this thread asking the same question about scrollX helps.

Kevin

GaryBartlett

Thanks, Kevin!

If you're a js beginner or just as rusty as I am, here are the steps I took:

1. Add a class to the input boxes on their creation (p-column-search, in my case).

$(this).html( '<input type="text" placeholder="Search '+title+'" class="p-column-search" />' );

replaces

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

1. Add the class you just added (p-column-search in my case) as the childSelector of the $(selector).on('keyup change', childSelector, function) event and modify the event selector (from #example thead input to table thead, in my case) accordingly.

$("table thead").on( 'keyup change', ".p-column-search",function () {

replaces

$("#example thead input").on( 'keyup change', function () {

1. Smile smugly.

GaryBartlett

Sorry forgot to add the link: http://live.datatables.net/kibokupu/10/edit?js,console,output

colin

1. frown when realise link was forgotten!?