Tag Archives: sorting

jQuery DataTables: How to Disable Sorting on a DataTable Instance Programming 18 FEB 2013

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 dynamic, with oodles of extra functionality, tables out of plain old vanilla HTML tables.

Today’s question is how to disable sorting on a DataTable instance when it initializes.

Turns out, this is pretty easy to achieve, simply by turning off the bSort property during the method call. In practice:

$('#campaignlinkstable').dataTable({
"bProcessing": true,
"bSort": false
});

Yup, pretty much as easy as that.

(Note that you can further refine your sorting by turning bSort back on and making use of the aaSorting column definition.)

Nifty.

How to Disable Sorting on a Column in jQuery Datatables Plugin CodeUnit 19 APR 2010

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 quick tip is on how to disable sorting on specific columns, in the event when it simply doesn’t make sense for a user to be able to sort by that particular column in your table.

As per usual, the trick lies in setting this up at table initialization, making use of the handy bSortable property that can be applied to a column. The default value for this property is true, meaning you can specifiy it as null and it will remain sortable, but if you wish to remove the ability to sort then you need to explicity set it to false for that column. Seeing this in action, let’s have a look at the example below. If you can imagine that we have a four column table, I’m now going to turn off sorting for column three: 

$('#example').dataTable( {
"aoColumns": [
null,
null,
{ "bSortable": false },
null
]
} );

And that’s really it. Pretty simple, after all!

To protect this man's sanity, turn off sorting now!

Related Link: http://datatables.net

PHP: How to Sort Your Array but Keep Your Keys CodeUnit 06 APR 2010

PHP comes bundled with a range of nifty array sorting functions the simplest of which will simply take your array and sort it either alphabetically or numerically, acting on the array object itself rather than creating a new, sorted object.

But if you have an associative array, in other words an array with keys, running the sort() function might give you a little shock once it has finished executing – if you check out your array, you’ll notice all of your precious array keys have been completely wiped out, obviously not the greatest of lessons to be learned.

In order to get around this, PHP gives us the asort() function which sorts the values contained in an array accordingly, but at the same time retains all of the original value keys. Similarly, the arsort() function sorts the array in the reverse direction, once again saving the original keys.

(If however you wish to sort on the keys of an array, you can look towards ksort() which literally sorts an array according to its keys and not the values it contains!)

You’ll note that while all these sort functions accept a first parameter which is the actual array to sort, they also come with a secondary, optional parameter which allows you to set just how the array is to be sorted. The following sorting options are available to you:

...

jQuery DataTables: How to Sort by a Specific Column on Load CodeUnit 04 APR 2010

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.