DataTables with column specific search fields

DataTables with column specific search fields

crazyPhDcrazyPhD Posts: 6Questions: 3Answers: 0

Hi everyone,

I have a rather basic question for this combination:

  • DataTables
  • Responsive
  • Scroller

I would like to put input fields for searching in the <th> fields (by replacing my headings) and redraw like in the example in
Putting the search inputs in the <tfoot> cells or a second row in <thead> does not play nicely with Responsive and Scroller. So I'm stuck with my inputs in the single <thead> row.
If the column is not orderable, all is well. But if it is orderable, two AJAX requests get sent when a user hits enter (I only bind to the keyup event and check for the enter key): One from my event handler for the search input and another one due to the order/sort listener.

How do I suppress the request that requests ordered data when the user actually is only interested in his/her search results?

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 8,887Questions: 25Answers: 2,026
    Answer ✓

    The best option would be to go back to using two header rows. As you noted Responsive doesn't support complex headers. So you will need to control the second header display of the select list or input search as Responsive shows/hides columns. Here is one of my examples I modified to include responsive and scroller:

    Not sure how well it works with scroller. I see some odd things once in while. Will leave it to you to test.


  • testowniktestownik Posts: 21Questions: 10Answers: 0
    edited September 2019


  • crazyPhDcrazyPhD Posts: 6Questions: 3Answers: 0

    Hey Kevin,

    thanks for the feedback. After some feedback from my users, I disabled the Responsive plugin. Using only Scroller two header rows seem OK.

Sign In or Register to comment.