Multi-column Ordering - Apply different css classes to primary, secondary, tertiary column headers?

Nick Hope

I have multi-column ordering applied on my table.

I would like to apply a different css class to the <thead><th> tag of the primary, secondary, tertiary etc. ordering columns so that I can style them differently, to give them descreasing visual "strength". At the moment we have <th class="sorting_desc">. With this feature it would for example be <th class="sorting_desc multi1">, <th class="sorting_desc multi2"> etc..

Is there a way to do this? If not, I would like to make it a feature request.

tangerine

DT uses orderClasses for this.
https://datatables.net/reference/option/orderClasses

You could over-ride those colour settings to your own taste.

Nick Hope

@tangerine Thank you. I didn't know about that. However that adds classes to the <tbody><td> cells, whereas I want to apply different styles to the <thead><th> cells.

kthorngren

If you want to set these dynamically when the user or API changes the table order you can use the order event. In the event handler use order() to get the current order and use jQuery addClass() and removeClass() to manipulate the classes accordingly.

Kevin

Nick Hope

Thank you @kthorngren . I need to step back and learn more about Javascript and jQuery (for many reasons beyond this), then I will return to this solution.