Jquery DataTables,按特定的列排序?

时间:2022-05-08 11:42:42

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?

我该怎么做呢?

6 个解决方案

#1


49  

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
});

#2


12  

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}
    ]
});

#3


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

#4


1  

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

#5


1  

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:

参考:

#6


1  

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.

希望这个有帮助。

#1


49  

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
});

#2


12  

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}
    ]
});

#3


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

#4


1  

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

#5


1  

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:

参考:

#6


1  

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.

希望这个有帮助。