How to have sorting and filtering together in table head?
How to have sorting and filtering together in table head?
HugoHa
Posts: 2Questions: 1Answers: 0
Hello,
https://datatables.net/examples/api/multi_filter_select.html shows how to implement filtering of columns using select inputs (dropdowns). How can this functionality be placed not in the footer, but in the head of the table in an additional line (= table row) below the table head that contains the column names and the sort controls?
Thank you for a helpful hint!
HugoHa
Link to test case: https://datatables.net/examples/api/multi_filter_select.html
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
This question has accepted answers - jump to:
Answers
See this example:
https://live.datatables.net/saqozowe/2131/edit
It uses the second header for the search inputs and
orderCellsTopto set the column sorting events in the top header. You can find other threads with more examples.A better optino might be to use the ColumnControl extension.
Kevin
Thank you Kevin, this works as expected! And I will take a look at the ColumnControl extension, that looks really mighty!
The only detail left is that I have some columns without select inputs (dropdowns):
this.api().columns([2, 3, 4, 5]).every( function () {The other columns (0 + 1) show the sort arrows which is not desired - how can I get rid of them? Another thing that is not completely as desired is the fact that the cells with the select inputs (dropdowns), eg in the second TR, are sensitive to clicking too and initiate sorting:
How can this be achieved? Thank you for another helpful advice!
-init columns.orderable
can be used to disable ordering for specific columns (and thus will remove the ordering icons). You can use-init ordering.handler` to disable the default click to order as well (although that is global, not column specific).As Kevin says - use ColumnControl. You can readily have a search input and a sort click icon, or any combination of them. Check out this example for instance.
Allan
Another option is to use
orderCellsTopas I mentioned above. Updated test case:https://live.datatables.net/saqozowe/2640/edit
Kevin
Ah yes , sorry. If it's just that you don't want the icons and handler on the second row if the header, use
orderCellsToportitleRow.Allan