jQuery DataTables：如何按特定列排序？

Question

jQuery DataTables：如何按特定列排序？

jquerysortingdatatablescolumnsorting

21

这是页面链接：

http://csuvscu.com/

我需要按照日期列进行排序，目前的顺序是11月6日，11月5日，最后是10月7日。

应该如何操作？

- Snow_Mac

3

我建议您在问题中添加一些适用的代码。是的，一个人可以去到您提供的链接页面并查看源代码，但是重要的是只要您在这里提供所需的信息，即使您的网站在未来某个时候关闭，代码仍将可用。 - Kiley Naro

请查看以下帖子。 - Emmanuel N

@KileyNaro提到了网站崩溃的问题，但我仍然会保留这个链接——对我来说，不必在本地机器上重新创建测试非常方便，我可以在Chrome的JavaScript控制台中完成所有操作 :) - shaheenery

5

那个时刻已经到来了。 - user3720516

2

这个问题现在已经没有用了。问题规范的链接已经失效。 - Jean-François Corbett

7个回答

13

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

有两种解决方法：

定义自己的日期排序方法
使用包含Unix时间戳（自1970年1月1日以来经过的秒数）日期的隐藏列对表格进行排序。

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

--------------- 第一种解决方法：

我们需要告诉DataTables插件如何处理我们的列。您需要使用"aoColumns"属性：

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

然后定义“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;
    };

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

我们将再次使用"aoColumns"属性。这一次，我们告诉DataTable隐藏最后一列，它将包含Unix时间戳中的日期。我们还需要将该列定义为默认排序列，并使用"aaSorting"进行设置：

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

- paic_citron

2

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

- Divyesh

2

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

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

希望这可以帮到您。

- Darren Hall

1

现有的答案使用了旧版DataTables语法。1.10+版本应该使用以下语法：

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

参考资料：

- devlin carnate

1

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

这段代码是使用jQuery插件DataTables来创建一个表格，并设置了排序和禁用第二列的排序功能。

- Andrés Rosales Campos

-3

$('#id').dataTable( {

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

});

$('#id').dataTable( {

""aaSorting": [[ "0", "<"desc" 或者 "asc">"]]

});

- phaneendra Garapati

请问您能否详细解释一下您的代码的意图？ - Jean-François Corbett

特别是链接已经失效，因此不再需要回答问题。 - Michael Dodd

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shaheenery · Accepted Answer

您当前的代码：

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

你可以这样做：

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

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

但是如下评论所指出的，这可能是一种更简洁的方法：

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