7

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

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

4

6 回答 6

12

看看这个：DataTables 排序方向控制示例

您可以执行以下操作：

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            { "asSorting": [ "desc", "asc" ] }, //first sort desc, then asc
        ]
    } );
} );
于 2010-09-16T09:30:54.530 回答
6

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

这是关于orderSequence.

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

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

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

您可以根据此处以多种方式定位列。

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

<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”类（任意选择的描述性类名）。

于 2015-04-28T15:03:54.467 回答
2

如果像 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 上测试

于 2014-05-07T19:33:19.653 回答
2

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

包括这些自定义排序功能

// 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  
   ]  
});
于 2012-02-01T09:56:58.710 回答
0

让你的空白最后一个的唯一方法是有点破解（因为排序工作正常）。

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

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

于 2011-11-17T13:48:20.653 回答
0

这对我有用：

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

        $('.dataTable').DataTable(settings);
于 2017-01-25T07:39:27.623 回答