Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 478
Snow_Mac Avatar asked Oct 24 '11 15:10

Snow_Mac


People also ask

How do I sort a specific column in a DataTable?

Using the order initialisation parameter, you can set the table to display the data in exactly the order that you want. The order parameter is an array of arrays where the first value of the inner array is the column to order on, and the second is 'asc' (ascending ordering) or 'desc' (descending ordering) as required.

How do I remove a sort from a specific column?

Use columnDefs option to remove sorting from a column. Pass column index in targets within [] (Indexing starting from 0) and set orderable to false . In the example, I removed sorting from email and salary column.

How hide DataTable column based on condition?

To hide and show columns use columns() and visible() method. Call it on dataTables instance and pass column index in columns() method and false to visible() method. Similarly, pass true to visible() if you want to show the columns.

How do I sort two columns in DataTable?

The default behavior of DataTables allows the sorting of multiple columns at one time by holding the Shift key and clicking on the header cells in the order that needs to be sorted.


2 Answers

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
});
like image 106
shaheenery Avatar answered Sep 22 '22 13:09

shaheenery


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}
    ]
});
like image 29
paic_citron Avatar answered Sep 24 '22 13:09

paic_citron