CODEWITHSUNDEEP
jquerysortingdatatables
John
John

Reputation: 21927

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 this?

Upvotes: 8

Views: 22755

Answers (7)

Jay Chauhan
Jay Chauhan

Reputation: 334

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

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

Upvotes: 1

Richard
Richard

Reputation: 4415

This works for me:

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

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

Upvotes: 0

veeTrain
veeTrain

Reputation: 2915

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

Upvotes: 6

Glen
Glen

Reputation: 889

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

Upvotes: 2

ozberg
ozberg

Reputation: 31

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

Upvotes: 2

Enigma Plus
Enigma Plus

Reputation: 1548

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.

Upvotes: 0

SteD
SteD

Reputation: 14027

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

Upvotes: 12

Related Questions