jQuery DataTables: how to sort by specific column?

2019-03-15 00:47发布

Here's the page:

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.

How do I do this?

7条回答
Root(大扎)
2楼-- · 2019-03-15 01:22

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
});
查看更多
一纸荒年 Trace。
3楼-- · 2019-03-15 01:26
 $('#id').dataTable( {
     "bSort": true,
     "aoColumnDefs": [{ 
         'bSortable': false, 
         'aTargets': [ 1 ] }
      ]
});
查看更多
甜甜的少女心
4楼-- · 2019-03-15 01:28

$('#id').dataTable( {

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

});

查看更多
欢心
5楼-- · 2019-03-15 01:29

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

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

Reference:

查看更多
迷人小祖宗
6楼-- · 2019-03-15 01:34
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
查看更多
太酷不给撩
7楼-- · 2019-03-15 01:36

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

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).

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:

$('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:

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":

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aaSorting": [[ 5, "desc" ]],
    "aoColumns":[
        {"bSortable": false},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true},
        {"bVisible": false}
    ]
});
查看更多
登录 后发表回答