jQuery DataTables: how to sort by specific column? [closed]

最后都变了- 提交于 2019-12-03 12:04:33

问题


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?


回答1:


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:


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



回答3:


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:


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



回答5:


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:

  • Sorting
  • Page Length



回答6:


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.




回答7:


$('#id').dataTable( {

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

});



来源:https://stackoverflow.com/questions/7878098/jquery-datatables-how-to-sort-by-specific-column

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!