How can I prevent firing the order event and just do my operation?

tsingfeng

I add an icon into an orderable column, while I click the icon in the cell in thead, I just want to do my operation,and sort the column while other places in the cell clicked? How to do this?
Thanks!

allan

Disable DataTables' default sort listener for the column using columns.orderable. Then add your own events to the elements as required. order() can be used to order the table.

Allan

tsingfeng

Thank you for your answering，Allan!
It's useful to me,but I still have a little problems. When I set columns.orderable to false, there is no longer box-shadow style for the element while it's clicked. I want to add the box-shadow style to it in my event listeners, but I don't know the exact style values. Can you give me some help? Thanks!

allan

there is no longer box-shadow style for the element while it's clicked

That's correct. If you want to add your own event listeners, you'd need to add your own styling as well.

To be honest, I'm not sure what you mean by box-shadow style. DataTables doesn't use a box-shadow for the table headers.

Allan

tsingfeng

Well, it's like this. When I set columns.orderable to true, there are no asc and desc icons in headers, but there is a box-shadow style in blue color while the element clicked. I don't know the reason.
By the way, I use DataTables with bootstrap.js. but no matter I use jquery.dataTables or _dataTables.bootstrap _ ,there are no icons in the same.

allan

but there is a box-shadow style in blue color while the element clicked. I don't know the reason.

That's an outline focus, and it shows that active element on the page for keyboard access. Try pressing the return key when that outline is shown and it will sort the table for example.

Allan

tsingfeng

Sorry, there was a mistake in my description. The box-shadow style is shown while the mousedown event fired, not the click event.
And I find the reason why the header of my table was shown incorrectly. Because I missed rel="stylesheet" in my link tag. Now I add it,the table is shown correctly.
Thanks again, Allan!