filter field in column header with sorting

sargemi

Link to test case: https://live.datatables.net/sargemi/1/edit

Description of problem: We have a filter field in a column header with sorting, when selecting the field with a click the sorting of the table is performed. How can the sorting be cancelled when clicking on the filter element?

kthorngren

Your test case doesn't run due to errors listed in the browser's console.

You can try using stopPropagation is described in this thread. Or create two header rows like this example:
https://live.datatables.net/saqozowe/2441/edit

Kevin

allan

I modified your example a little to run: https://live.datatables.net/sargemi/2/edit (it wasn't loading correctly in Firefox).

It doesn't order when I click in the header select at the moment. However, I'd very much recommend you put the select in a second row in the header and use orderCellsTop to have sorting on the top cells only.

Allan

sargemi

@kthorngren OrderCellsTop is deprecated
@alla stoppropagation stop the search but only do order event, and i don't want "2 headers".
Thnks

sargemi

I add the example without errors
https://live.datatables.net/sargemi/5/edit

kthorngren

OrderCellsTop is deprecated

I suspect that since Allan mentioned it that he is reconsidering deprecating orderCellsTop based on other feedback. I don't want to speak for Allan though

Updated your test case to use stopPropagation:

$('thead select', table.table().container()).on('click', function (evtObj) {     
    evtObj.stopPropagation();
});   

https://live.datatables.net/sargemi/9/edit

Kevin

sargemi

This way it worked, I'm going to adapt my code to it

Thank you very much @kthorngren
Thanks anyway @allan

allan

I suspect that since Allan mentioned it that he is reconsidering deprecating orderCellsTop based on other feedback. I don't want to speak for Allan though

Spot on!

Allan