jQuery DataTables: How to Sort by a Specific Column on Load

I somehow missed this breezing through the available documentation on the DataTables website, but basically the question arose on how to force a table that has just been loaded (with Datatables applied naturally) to be sorted in a particular manner by default?

Well it turns out that the answer to this question is pretty simple indeed.

When constructing your dataTable object you can pass it an initializer parameter named aaSorting which essentially allows you to set which columns to sort on and also which direction to sort in.

Take a look at this sample dataTables initialization below:

$('#example').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"iDisplayLength": 150,
		"bLengthChange": false,
		"sAjaxSource": "reservations_list.php",
		"aaSorting": [[ 5, "desc" ]]
	} );

If you look at the last parameter being fed to the constructor you’ll spot our aforementioned aaSorting being sneaked in there with an array value that is setting column six to be ordered in a descending fashion.

(You’ll note I say column six because obviously this is array based manipulation and as we all know, javascript utilizes zero-indexed arrays.)

And that is pretty much it. aaSorting allows us to set the default sorting pattern for any dataTables object.

Nice.

Related Posts:

  • DataTables is a fantastic plug-in for the jQuery Javascript library that I use for pretty much all my web development projects. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table – in other words, it creates useful dyna ...

  • I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement. Today's tip looks at how you can ...

  • DataTables is a fantastic jQuery-powered plugin that supercharges your ordinary HTML tables and as such is pretty much my de facto method for presenting tabular data. I often include special 'action' columns in my table where I lump in all my row data manipulating buttons and thus don't particularly want to allo ...

About Craig Lotter

South African software development manager and senior application developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

14 thoughts on “jQuery DataTables: How to Sort by a Specific Column on Load

  1. @Mitchell – Off the top of my head, I’m not actually sure if there is a native way of doing that without running datatables through a dynamic load script and messing with the SQL there. Perhaps the best place would be to ask on the main datatables.net forum itself?

  2. @Mitchell – Off the top of my head, I’m not actually sure if there is a native way of doing that without running datatables through a dynamic load script and messing with the SQL there. Perhaps the best place would be to ask on the main datatables.net forum itself?

  3. Mitchel sorting more than one field is easy. “aaSorting”:[[0,”asc”],[3,”desc”]].  I stumbled on this post when I was looking for a way to set a default sort column on a per table basis, without having to write custom js for each table. I couldn’t find anything pleasing, so I wrote one. Hopefully people will find it and they won’t use the others that I found :)

    http://devken.com/blog/sort-the-jquery-datatables-dynamically-on-load

  4. Hi there,

    I’ve used the sorting feature many times now with joy about its easyness … however i’ve come across the situation where i do not want to resort the original dataset on page load at all. However, simply removing the “aaSorting” option does not block the resorting like expected, but just sorts the first column alphabetically.

    How can I disable the rearrangement of the dataset?

    1. Allright, found a solution on stackoverflow: http://stackoverflow.com/questions/4964388/is-there-a-way-to-disable-initial-sorting-for-jquery-datables

      just pass an empty array 

      “aaSorting”: [],

      to override any default sortings.

      Oh and by the way: you might wanna take a look of the sorting of these blog posts. seems like you got a desc string sort here that mixes up the actual ages like:2 years ago2 hours ago
      1 month ago

      cheers!

  5. This didn’t work for me.
    I am populating the datatable with an ajax call populating aaData. Theres a fifth column of Date, and i want a default sorted order to be in descending order of date i.e. most recent first.
    This is what is inside my ajax call
    $.ajax( { type : “GET”, url : “ajaxBacklog”, contentType : ‘application/json’, data : null, dataType : ‘json’, success : function(json) { oTable = $(“#backlogTable”).dataTable({ “aaData” : json.aaData, “bProcessing” : true, “sPaginationType” : “full_numbers”, “bJQueryUI” : true, “bRetrieve” : true, “bPaginate” : true, “bSort” : true, “aaSorting” : [[ 4, “desc” ]] “oLanguage”: { “sEmptyTable”: “No records found.” }, “aoColumns”: [ { “bSortable”: true, sClass: “alignCenter”}, { sClass: “left”}, { sClass: “left”}, { sClass: “left”}, { sClass: “left”}, { sClass: “left”}, { sClass: “left”}, ], “error”: function() { alert(“Failed to load Data”); } }); }
    } );

    It din’t turned out the way you’ve explained. Please tell where m i going wrong. By default the backlogs are coming is ascending order of the date.

    1. try single quotes for desc and remember the comma between options: “aaSorting” : [[ 4, ‘desc’ ]], also make sure that the column you want to sort on has bSortable set to true

  6. @google-907f2df06f0662d5cd7a0c7713e286a1:disqus, try single quotes for desc and remember the comma between options: “aaSorting” : [[ 4, ‘desc’ ]], also make sure that the column you want to sort on has bSortable set to true

Leave a Reply