jQuery DataTables：我可以对排序有 3 种状态：ASC、DESC 和 NO_SORT？答案

【问题标题】：jQuery DataTables: Can I have 3 states for Sort : ASC, DESC and NO_SORT?jQuery DataTables：我可以对排序有 3 种状态：ASC、DESC 和 NO_SORT？
【发布时间】：2017-03-30 07:24:51
【问题描述】：

jQuery Datatable 在单击列标题时的排序顺序仅在 asc（向下箭头）和 desc（向上箭头）之间切换。即，

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

我想诱导这样的事情：

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.

有没有办法改变 jQuery dataTables 中的这种行为？请帮忙！提前致谢。

【问题讨论】：

无排序和以前的排序模式有什么区别？排序顺序不会改变。你想做什么？
我想问的是，一旦您对列应用排序。如何在不对任何其他列进行排序的情况下将其删除？
但是删除排序对您意味着什么？
假设我有 3 个列：年龄、姓名、出生日期。最初，我仅按照从 Rest API 接收到的顺序显示表行。然后单击年龄列标题一次。该表根据 Age-asc 进行排序。现在如何删除这个年龄排序并返回从 API 接收到的表行的初始排序？

标签： javascript jquery datatable datatables

【解决方案1】：

哇，这很有趣。这应该可以满足您的需求，尽管它并不优雅：

$('#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);
            }
        }
    }
});

这个工作 JSFiddle 说明了正在发生的事情。基本上，您想要的内容是开箱即用的，可用于多列排序（如 cmets 中所述）。如果只有一列被排序，我所做的是拦截排序，而不会弄乱多列排序。我会继续尝试改进它，但这应该对你有用。

【讨论】：

是的，这很好。作为建议，如果您想在多列排序中清除单列。你可以这样做：example.order([col_idx, '']).draw();仅清除 1 个特定列的排序。
虽然这通常不是必需的，除非你像我一样决定绕过 SHIFT 并使多列成为默认行为。
@jackOfAll 一个空数组执行相同的 TBH ;-) 我更新了 JSFiddle 以使其更加优雅（data-attribute 未清除存在问题）。跨度>

【解决方案2】：

当您加载表格时，它会以某种方式排序（可能按 id、名称或其他方式）。所以你所说的“不排序”实际上是“按初始列排序”。

一个简单的方法是让排序机制保持原样，并在某处放置一个按钮以重新加载表以删除当前排序。或者更好的是，让这个按钮按初始列对表格进行排序。

【讨论】：

那么有没有办法实现开箱即用的3个toggle状态排序？
我一直在看这个，有一种方法可以删除所有排序...example.order([]).draw();;但我无法弄清楚如何有选择地删除给定列的排序。
@jackOfAll 在技术上可以做到，看看datatables.net/forums/discussion/17910/…。但你为什么要这样做？想想看。如果你想删除当前的排序，那是因为你想按另一列排序！！
@Dacklf 例如，您可能使用 SHIFT+单击选择 4 个不同的列以按它们的组合排序，然后删除其中一个（以防您错误地选择了 1 列）。然后，您更喜欢按住 SHIFT 多次单击该列以删除该列排序。
@jackOfAll 这正是 datatables 所做的。 datatables.net/examples/basic_init/multi_col_sort.html。当您选择第二列（带移位）时，如果您第三次单击，它将删除该列上的排序...

【解决方案3】：

解决了通过维护数组的列状态，拦截并停止订单事件的默认行为然后手动执行的问题：

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

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

【讨论】：

这个变通方法能处理排序顺序的图标吗？出于好奇，我想看看 jsFiddle。此外，如果它解决了问题，请将您的答案标记为已接受。
是的，这会处理图标。这个周末我会尝试放一个 jsFiddle。