jQuery DataTables:如何按特定列排序?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7878098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:23:52  来源:igfitidea点击:

jQuery DataTables: how to sort by specific column?

jquerysortingdatatablescolumnsorting

提问by Snow_Mac

Here's the page:

这是页面:

http://csuvscu.com/

http://csuvscu.com/

I need to sort by the Date Column, right now it needs to read Nov 6, Nov 5 and lastly Oct 7.

我需要按日期列排序,现在它需要读取 11 月 6 日、11 月 5 日和最后 10 月 7 日。

How do I do this?

我该怎么做呢?

回答by shaheenery

Your Current Code:

您当前的代码:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1
});

What you could do:

你可以做什么:

oTable = $('table').dataTable({
    // display everything
    "iDisplayLength": -1
});

oTable.fnSort( [ [0,'desc'] ] ); // Sort by first column descending

But as pointed out in the comment below, this may be a cleaner method:

但正如下面评论中所指出的,这可能是一种更简洁的方法:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aaSorting": [[ 0, "desc" ]] // Sort by first column descending
});

回答by paic_citron

DataTables uses Alphabetical order as the default sorting method. This is actually what happens here.

DataTables 使用字母顺序作为默认排序方法。这实际上就是这里发生的事情。

There are two solution:

有两种解决方法:

  • Define your own date sorting method
  • Sort the table using an hidden column containing the date in Unix Timestamp (seconds elapsed since 1st January 1970).
  • 定义您自己的日期排序方法
  • 使用包含 Unix 时间戳(自 1970 年 1 月 1 日以来经过的秒数)中的日期的隐藏列对表进行排序。

If you want your users to be able to sort the column by themselves you might use the first solution.

如果您希望您的用户能够自己对列进行排序,您可以使用第一种解决方案。

--------------- First Solution:

--------------- 第一个解决方案:

We need to tell the DataTable plugin what to do with our columns. You'll need to use the "aoColumns" property:

我们需要告诉 DataTable 插件如何处理我们的列。您需要使用“aoColumns”属性:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aoColumns":[
        {"sType": "shaheenery-date"},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true}
    ]
});

Then define the "shaheenery-date-asc" and "shaheenery-date-desc" sorting method. You also need a function "getDate" that translate the date in numeric format:

然后定义“shaheenery-date-asc”和“shaheenery-date-desc”排序方法。您还需要一个函数“getDate”以数字格式转换日期:

function getDate(a){
        // This is an example:
        var a = "Sunday November 6, 2011";
        // your code =)
        // ...
        // ...
        // You should output the result as YYYYMMDD
        // With :
        //   - YYYY : Year
        //   - MM : Month
        //   - DD : Day
        //
        // Here the result would be:
        var x = 20111106
        return x;
}

jQuery.fn.dataTableExt.oSort['shaheenery-date-asc'] = function(a, b) {      
        var x = getDate(a);
        var y = getDate(b);
        var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
        return z;
};

jQuery.fn.dataTableExt.oSort['shaheenery-date-desc'] = function(a, b) {
        var x = getDate(a);
        var y = getDate(b);
        var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
        return z;
    };

--------------- Second Solution:

---------------第二种解决方案:

We are going to use the "aoColumns" property as well. This time we tell DataTable to hide the last column which will contains the date in Unix Timestamp. We also need to define this column as the default one for sorting with "aaSorting":

我们还将使用“aoColumns”属性。这次我们告诉 DataTable 隐藏最后一列,该列将包含 Unix 时间戳中的日期。我们还需要将此列定义为使用“aaSorting”进行排序的默认列:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aaSorting": [[ 5, "desc" ]],
    "aoColumns":[
        {"bSortable": false},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true},
        {"bVisible": false}
    ]
});

回答by Divyesh

oTable = $('#DataTables_Table_0').dataTable({   //table id -->DataTables_Table_0

    iVote: -1,  //field name 
    "bRetrieve":true

});

 oTable.fnSort( [ [1,'desc'] ] );   // Sort by second column descending

回答by Andrés Rosales Campos

 $('#id').dataTable( {
     "bSort": true,
     "aoColumnDefs": [{ 
         'bSortable': false, 
         'aTargets': [ 1 ] }
      ]
});

回答by devlin carnate

The existing answers are using legacy DataTables syntax. Versions 1.10+ should use the following syntax:

现有答案使用旧版 DataTables 语法。版本 1.10+ 应使用以下语法:

$('table').dataTable({
    "pageLength": -1,  //display all records
    "order": [[ 0, "desc" ]] // Sort by first column descending
});

Reference:

参考:

回答by Darren Hall

With the latest version of Data Tables you can sort by column index

使用最新版本的数据表,您可以按列索引排序

var data_table = $('#data-table').DataTable();
data_table.order( [7,'desc'] ).draw();

Hope this helps.

希望这可以帮助。

回答by phaneendra Garapati

$('#id').dataTable( {

$('#id').dataTable({

""aaSorting": [[ "0", "<"desc" or asc>"]]

""asorting": [[ "0", "<"desc" or asc>"]]

});

});