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

StackOverflow https://stackoverflow.com/questions/7878098

Question

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?

Était-ce utile?

La solution

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

Autres conseils

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

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

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.

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

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:

$('#id').dataTable( {

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

});

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top