jQuery DataTables: Can I have 3 states for Sort :

问题:

jQuery Datatable's sorting order on clicking column header toggles only between asc(Down Arrow) and desc(Up Arrow). i.e.,

1st-click ascending
2nd-click descending
3rd-click asc
4th-click desc
   ||   || 
   ||   || 
   ||   || 
   ||   || 
odd-click asc
even-click desc.

I want to induce something like this :

1st-click ascending
2nd-click descending
3rd-click no-sorting
4th-click asc
5th-click desc
6th-click no-sort
   ||   || 
   ||   || 
   ||   || 
   ||   || 
(n%3==1)-click asc
(n%3==2)-click desc
(n%3==0)-click no-sort.

Is there a way to change this behavior in jQuery dataTables? Please help! Thanks in advance.

回答1:

Wow, that was interesting. This should do what you need though it's not elegant:

$('#example').on("order.dt", function () {
    if(example.settings().order().length === 1){
        var order = example.settings().order()[0];
        var th = $("#example th:eq(" + order[0] + ")");
        if(th.attr("data-sort-next") === "false"){
            example.order([]).draw();
            th.attr("data-sort-next", true);
        }else{
            if(order[1] === "desc"){
                th.attr("data-sort-next", false);
            }else{
                th.attr("data-sort-next", true);
            }
        }
    }
});

This working JSFiddle illustrates what's going on. Basically, what you want is available out of the box for multi-column sorting (as noted in the comments). What I've done is intercept the sorting if there's only one column being sorted, without messing up the multi-column sorting. I'll keep on trying to refine it but that should work for you.

回答2:

when you load a table, it is sorted in a certain way (maybe by id, name or whatever). So what you call 'no-sorting' is, in fact, a 'sort by initial column'.

An easy approach is to let the sorting mechanism as it is, and place a button somewhere to reload the table deleting the current sort. Or even better, make this button sort the table by the initial column.

回答3:

Solved the issued by maintaining the state of the columns an array, intercepting and stopping the default behavior of the order event and then manually doing :

var dir = 'asc' for ascending
var dir  ='desc' for descending
var dir = '' for no-sort

$("#table-id").dataTable.order([colIdx, dir]).draw();