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

omjgkv6w  于 2022-11-29  发布在  jQuery
关注(0)|答案(7)|浏览(205)

我正在使用DataTable来显示一些数据,它工作得很好,但我想稍微自定义它,不确定如何自定义。
我想做的是当用户点击一个列标题来排序该列时,我希望它最初是降序而不是升序。有什么方法可以做到这一点吗?

piztneat

piztneat1#

看看这个:DataTables sorting direction control example
您可以执行以下操作:

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

bsxbgnwa2#

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'(任意选择的描述性类名)。

jgzswidk

jgzswidk3#

作为对最后排序空白的回应,我想到了
(我只是讨厌先把空格排序!!)

  • 包括这些自定义排序函数 *
// 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  
   ]  
});
1qczuiv0

1qczuiv04#

如果像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和DataTable 1.10.0上进行了测试

q3qa4bjr

q3qa4bjr5#

唯一的方法,让您的空白最后将是一个有点黑客(因为排序是正确的工作)。
不要从服务器返回空值,而应返回如下内容:“[空白]”
我还没有测试过,但我很确定方括号会出现在字母数字代码之后。而且方括号传统上象征着还没有完成或确认的东西。

qco9c6ql

qco9c6ql6#

这对我很有效:

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

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

xtupzzrd7#

下面的代码用于为所有列设置默认的排序顺序:先降序,然后升序。

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

相关问题