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 https://datatables.net/examples/api/multi_filter.html.
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

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    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:
    http://live.datatables.net/nugeyewe/7/edit

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

    Kevin

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

    oops

  • 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.

This discussion has been closed.