DataTables logo
≡

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

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

GaryBartlettGaryBartlett Posts: 3Questions: 1Answers: 0
in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 22,494Questions: 26Answers: 5,169
    Answer ✓

    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

  • GaryBartlettGaryBartlett Posts: 3Questions: 1Answers: 0

    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.
  • GaryBartlettGaryBartlett Posts: 3Questions: 1Answers: 0

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    1. frown when realise link was forgotten!? ;)
This discussion has been closed.