Jquery DataTables change order to desc when it sorts

I am using DataTables to display some data and it works great but I want to customize it slightly and not sure how.

What I want to do is when a user clicks on a column heading to sort that column I want it to initially order descendingly rather than ascendingly. Is there any way to do t开发者_Go百科his?

Have a look at this: DataTables sorting direction control example

You can do something like:

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            { "asSorting": [ "desc", "asc" ] }, //first sort desc, then asc
        ]
    } );
} );

The current version of DataTables (1.10) provides the following way of switching this default sorting order with the property orderSequence under columnDefs (or columns but less flexible).

Here's the documentation on orderSequence.

"columnDefs": [
    { "orderSequence": [ "desc", "asc"], "targets": [ 1 ] },
]

As it also mentions, you may force a column to only sort when clicked as DESC or ASC which your interface may very well benefit from.

In my case, I needed to have columns descending their sort on initial click for an indeterminate number of columns so I decided to switch the example to target a column header's class name rather than explicitly defining each column as "targets":[1],"targets":[2],...[n] or programatically building an array of the indices of columns I cared about.

You can target columns multiple ways according to here.

The end result is a table definition like so:

<table><thead><tr>
    <th class='descendFirst'>DESCend when first clicked</th>
    <th>a normally sorted ASC->DESC->... column</th>
    ...
</tr></thead></table>

And Data Table empowered as such:

$("#table").dataTable({
    "columnDefs": [
        {"orderSequence": ["desc","asc"], "targets":"descendFirst" },
    ]
});

Voila! First click descending sort on all columns with a <th> marked with a class of 'descendFirst' (an arbitrarily chosen, descriptive class name).

In response to sorting blanks last, here's what I came up with--
(I just HATE blanks sorting first!!)

Include these custom sort functions

// custom sort functions
jQuery.fn.dataTableExt.oSort['text-blankslast-asc'] = function (x, y) {  
   x = (x == "") ? String.fromCharCode(255) : x;  
   y = (y == "") ? String.fromCharCode(255) : y;  
   return ((x < y) ? -1 : ((x > y) ? 1 : 0));  
};  

jQuery.fn.dataTableExt.oSort['text-blankslast-desc'] = function (x, y) {  
   x = (x == "") ? String.fromCharCode(0) : x;  
   y = (y == "") ? String.fromCharCode(0) : y;  
   return ((x < y) ? 1 : ((x > y) ? -1 : 0));  
};  

Apply the sort tags to the appropriate columns

// init example  
$('#table2').dataTable({  
   "bJQueryUI": true,  
   "aoColumns": [  
      null,  
      { "sType": "text-blankslast" },  
      { "sType": "text-blankslast" },  
      { "sType": "text-blankslast" },  
      null  
   ]  
});  

If anyone else like Dave and myself is looking for a way to set the sort order on all columns, the following may work for you. In order to change the sorting order on all of the columns I set up a loop to alter the settings after the table had instantiated:

$(document).ready(function() {
    var example_table = $('#example').dataTable();
    $.each(example_table.dataTableSettings[0].aoColumns, function(key, column) {
        column.asSorting = [ "desc", "asc" ];
    } );
} );

Hope that helps. Tested on jQuery 1.11.0 and DataTables 1.10.0

The only way to get your blank ones last would be a bit of a hack (since the sort is working correctly).

Instead of returning blank values from your server, return something like: "[Blank]"

I haven't tested it, but I'm pretty sure square brackets will come after alphanumeric codes. Also square brackets traditionally symbolises something that hasn't been completed or confirmed yet.

This works for me:

       settings = {
           aoColumnDefs: [
            {
                orderSequence: ["desc", "asc"],
                aTargets: ['_all']
            }
        ]};

        $('.dataTable').DataTable(settings);

Below code is to set default sorting order desc first then asceding for all columns.

aoColumnDefs: [{
    orderSequence: ["desc", "asc"],
    aTargets: ['_all']
}],