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?
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();
});