setting orderSequence does not show correct up/down arrows on table header for bootstrap4 theme

jamesSampica

https://jsfiddle.net/qyonfhr2/

When you set the orderSequence option for a column the up/down arrows do not appear correctly for the option that gets set.

For example, in the fiddle above, the "Office" column has "asc" set for order sequence but the table displays a down arrow when rendered. When the header is clicked, both up and down arrows are displayed. When a different column is clicked, the up arrow disappears and the down arrow displays.

jamesSampica

I was able to add this hack to get it to work. It just moves the classes around on initialization and when the column gets changed

var columnThatsBroke = 3;

$("#myDatatable").DataTable({
    ...
     initComplete: function() {
            $(individualTransfersDataTable.column(columnThatsBroke).header()).toggleClass("sorting sorting_desc_disabled");
    },
    ...
});

$individualTransfers.on("order.dt", function () {
    var order = individualTransfersDataTable.order();
        if(order[0][0] !== columnThatsBroke) 
            $(individualTransfersDataTable.column(columnThatsBroke).header()).removeClass("sorting_asc_disabled");
} );

jamesSampica

Here's a fiddle with the hack in place https://jsfiddle.net/z9L17dmj/

colin

That's behaving as expected - 'asc' is an arrow that goes up. It makes more sense if you compare that to the age field which is numeric.

Colin

kthorngren

@colin James is right. The behavior of the sort icons is incorrect with Bootstrap 4. After initialization the icon looks like this for `asc:

After sorting the column it looks like this:

The order of the table is correct, just not the icons.

The same test case not using Bootstrap behaves as expected.

Kevin

jamesSampica

Hi @colin,

Maybe I did not explain myself correctly.

When using the bootstrap 4 theme and the orderSequence option is set to "asc" for a column, the arrow displays in the following direction...

https://jsfiddle.net/qyonfhr2/

When using the default datatables theme and the same option is set, the arrow displays in the following direction...

https://jsfiddle.net/8chjfnwo/

As you can see, the arrow is different despite using the same options. I believe "asc" should display the arrow upward and "desc" should display it downward

allan

Oh wow - I can't believe how long this bug has been present and this is the first it has been picked. Many thanks for letting us know about it - it looks like it might be around a decade old :-/

I've committed a fix. Its actually a bit of a work around, but it works... I've already committed changes to our v2 development branch to DataTables to make the sorting classes / styling more "sane".

Regards,
Allan