setting classes on headers for table with no initial sort

hoopahey

I have html table content that is presorted for performance reasons. It's a medium-sized page, and it's got to be very snappy, even on mobile. I want to get markup on screen as fast as possible, while simultaneously avoiding any Flash of Unstyled Content.

I'm using an empty array for 'aaSorting' so that my table is not redundantly sorted again on page load:

[code]
$('table').dataTable( {
"aaSorting": [], // empty array means no initial sort, but user can still click on columns
});
[/code]

The problem is that with sorting initially disabled, the 'sorting_asc' class doesn't get applied to the header of the first column, so there's no visible directional arrow, and the user has no inkling that the columns are sortable. And when I apply the [code]sorting_asc[/code] class to the first column header in markup, the 'sorting_asc' class actually gets removed when the plugin initializes. Is there a clever way around this?

fbas

This seems to do the trick:

[code]

$('table th:first').removeClass().addClass('sorting_asc');

[/code]

removeClass() with no params removes all the previous classes, then we add the ascending sort class

(naturally run this after .dataTable() is finished)