jquerysortingdatatables

DataTables orders ascending twice


I'm using history.pushState/history.replaceState to save the ordering state of a table (with serverSide processing and orderMulti set to false) each time the user clicks a th. Subsequently I'm using .on("popstate") to restore the saved ordering.

Everything is working flawlessly, except when the restored ordering is in ascending direction, it will order ascending a second time when the user orders on the same column again (i.e. the table redraws but the ordering doesn't change). Note that when the restored ordering is descending, it will reorder as expected when ordering on the same column.

Saving the ordering state:

setTableState = function() {
    let state = history.state || {}, url = "/"+location.pathname.split("/")[1]+"/",
        order = myTable.order();
    
    if (order.length && order[0][1]) {
        state["sort"] = [{
            name: myTable.columns(order[0][0]).init()[0].name,
            dir: order[0][1],
        }];
        url += "sort:" + (state["sort"]["dir"] == "desc" ? "-" : "") + state["sort"]["name"] + "/";
    }
    else state["sort"] = [];
    
    if (url == location.pathname) history.replaceState(state, ""); // Prevent duplication of history item
    else history.pushState(state, "", url);
}

Saving & restoring the ordering:

$(document).ready(function() {
    myTable.on("draw", function() {
        setTableState();
    });

    $(window).on("popstate", function(e) {
        if (history.state && "sort" in history.state && history.state["sort"].length) {
            myTable.order(history.state["sort"]).draw();
        }
        else myTable.order(defaultSort).draw();
    });
});

Since it's working correctly when the restored order is in descending direction (i.e. it will change to an unordered state when reordering on the same column), it seems like a bug with DataTables itself?


Solution

  • It does appear to be a bug with DataTables (v2.2.1). The solution is to order by index rather than by name.

        $(window).on("popstate", function(e) {
            let sort = history.state && "sort" in history.state && history.state["sort"].length
                        ? history.state["sort"] : defaultSort;
            myTable.order([[ myTable.column(sort.name+":name").index(), sort.dir ]]).draw();
        });