Jquery DataTables在排序时将顺序更改为desc

Posted 2023-05-07

【中文标题】Jquery DataTables在排序时将顺序更改为desc

【英文标题】：Jquery DataTables change order to desc when it sorts

【发布时间】：2011-04-13 02:59:05

【问题描述】：

我正在使用 DataTables 来显示一些数据，它工作得很好，但我想稍微自定义它，不知道如何。

我想要做的是，当用户单击列标题对该列进行排序时，我希望它最初按降序而不是升序排序。有没有办法做到这一点？

【问题讨论】：

1.9 和 1.10 版本都有类似的处理方式；请参阅 SteD 对 1.9 的回答（这里是 asSorting 1.9 documentation）和我在下面对 1.10 对 1 个或更多（或 _all！）列的默认降序排序的回答。

【参考方案1】：

看看这个：DataTables sorting direction control example

你可以这样做：

$(document).ready(function() 
    $('#example').dataTable( 
        "aoColumns": [
             "asSorting": [ "desc", "asc" ] , //first sort desc, then asc
        ]
     );
 );

【讨论】：

谢谢，效果很好！您知道排序时可以让空白/空字段出现在最后而不是第一个的任何方式吗？

谢谢。您是否碰巧知道是否添加了一种方法来为整个表设置默认值？我没找到。

看起来这不适用于 v. 1.10.x？找不到合适的解决方案。

@ConAntonakos，请参阅我对 1.10 解决方案的回答

@Dave，您可以使用我的解决方案定位 1.10 版中的 _all 列。您也可以在 1.9 中使用 _all 作为目标，as seen here。请参阅使用 aoColumnDefs 指定 "desc","asc" 和目标 _all 的 asSorting 示例

【参考方案2】：

当前版本的 DataTables (1.10) 提供了以下方式来切换此默认排序顺序，使用 columnDefs 下的属性 orderSequence（或 columns，但不太灵活）。

这是orderSequence 上的文档。

"columnDefs": [
     "orderSequence": [ "desc", "asc"], "targets": [ 1 ] ,
]

正如它还提到的，您可以强制列仅在单击为 DESC 或 ASC 时进行排序，您的界面可能会从中受益。

在我的情况下，我需要在初始单击时将列降序排列以获得不确定的列数，因此我决定将示例切换为以列标题的 class 名称为目标，而不是将每一列明确定义为 "targets":[1],"targets":[2],...[n]或以编程方式构建我关心的列的索引数组。

您可以通过多种方式定位列according to here。

最终结果是这样的表定义：

<table><thead><tr>
    <th class='descendFirst'>DESCend when first clicked</th>
    <th>a normally sorted ASC->DESC->... column</th>
    ...
</tr></thead></table>

和数据表这样授权：

$("#table").dataTable(
    "columnDefs": [
        "orderSequence": ["desc","asc"], "targets":"descendFirst" ,
    ]
);

瞧！首先单击所有列的降序排序，<th> 标记有“descendFirst”类（任意选择的描述性类名称）。

【参考方案3】：

为了回应最后对空白进行排序，这是我想出的-- （我只是讨厌先排序空白！！）

包括这些自定义排序函数

// custom sort functions
jQuery.fn.dataTableExt.oSort['text-blankslast-asc'] = function (x, y)   
   x = (x == "") ? String.fromCharCode(255) : x;  
   y = (y == "") ? String.fromCharCode(255) : y;  
   return ((x < y) ? -1 : ((x > y) ? 1 : 0));  
;  

jQuery.fn.dataTableExt.oSort['text-blankslast-desc'] = function (x, y)   
   x = (x == "") ? String.fromCharCode(0) : x;  
   y = (y == "") ? String.fromCharCode(0) : y;  
   return ((x < y) ? 1 : ((x > y) ? -1 : 0));  
;  

将排序标签应用到相应的列

// init example  
$('#table2').dataTable(  
   "bJQueryUI": true,  
   "aoColumns": [  
      null,  
       "sType": "text-blankslast" ,  
       "sType": "text-blankslast" ,  
       "sType": "text-blankslast" ,  
      null  
   ]  
);  

【讨论】：

或者只是添加隐藏文本以使其显示在适当的位置。前任。 zzzzz - 一个 hack，但易于实现。

【参考方案4】：

如果像 Dave 和我这样的其他人正在寻找一种方法来设置所有列的排序顺序，以下可能对您有用。为了更改所有列的排序顺序，我设置了一个循环以在表实例化后更改设置：

$(document).ready(function() 
    var example_table = $('#example').dataTable();
    $.each(example_table.dataTableSettings[0].aoColumns, function(key, column) 
        column.asSorting = [ "desc", "asc" ];
     );
 );

希望对您有所帮助。在 jQuery 1.11.0 和 DataTables 1.10.0 上测试

【参考方案5】：

最后得到空白的唯一方法是有点hack（因为排序工作正常）。

不要从服务器返回空白值，而是返回类似：“[Blank]”

我还没有测试过，但我很确定方括号会出现在字母数字代码之后。方括号传统上也象征着尚未完成或确认的事情。

【参考方案6】：

这对我有用：

       settings = 
           aoColumnDefs: [
            
                orderSequence: ["desc", "asc"],
                aTargets: ['_all']
            
        ];

        $('.dataTable').DataTable(settings);