Datatables - Only allow sorting with buttons

Question

Is there a way of disabling the column sorting in datatables when clicking on the column header and only allow sorting with the sorting icons (check the red arrow in the picture below)?

My reason for wanting to disable the sorting is that I am using the headers for column filtering and when you click on the header to enter a string the table sorts by that column (I know it's ugly, but I will change the input box design later).

I checked their options and could not find anything. I also checked the source code but that was way way way way beyond my knowledge level.

Thanks for any help/suggestion!

/Patrik

Not sure of the datatables way, but you can cancel the default click action from propagating to the table header from the input. — epascarello
– epascarello, Commented Jul 28, 2015 at 13:26

Gyrocode.com · Accepted Answer · 2015-07-28 15:03:35Z

8

SOLUTION

Add click event handler for each input in the header and stop event propagation to the DataTables plug-in.

$('.filter').on('click', function(e){
   e.stopPropagation();    
});

DEMO

See this jsFiddle for code and demonstration.

edited Jul 28, 2015 at 15:03

answered Jul 28, 2015 at 14:57

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PatrikJ Over a year ago

Hi! Thanks for your help! It still sorts when I click the column header AND when I click the sort icons though.

PatrikJ Over a year ago

AH, now I see. Just need to expand the filter. Let me try in my application.

PatrikJ Over a year ago

You sir, are a genious! :)

Collectives™ on Stack Overflow

Datatables - Only allow sorting with buttons

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related