Tag Archives: columns

jQuery DataTables with Lots of Columns Crashes in IE CodeUnit 16 FEB 2011

If you are using the brilliant jQuery DataTables plugin to present your data in nifty dynamic tables, and are using it in a server-side loading context, you have no doubt encountered the issue when a table with a lot of columns (more than 20) fails to load (in other words stays in “processing” mode) when browsing using Internet Explorer (IE).

Mysteriously enough, it does however work in both Firefox and Chrome.

Although difficult to debug, the issue at hand is actually quite simple – essentially IE’s built-in GET size limit is kicking in at the most inopportune of times, meaning that incomplete JSON is heading back towards your page.

The simple solution is to force DataTables to use POST instead of GET for your server-side table, and to do this you need to add the following to your datatable definition:

$(document).ready(function() {
	$('#example').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "server_processing_post.php",
		"fnServerData": function ( sSource, aoData, fnCallback ) {
			$.ajax( {
				"dataType": 'json', 
				"type": "POST", 
				"url": sSource, 
				"data": aoData, 
				"success": fnCallback
			} );
		}
	} );
} );

As you can see from the above, the fnServerData variable allows you to specify the type of the ajax call being used, which means we can now force it to POST and thus eliminate our Internet Explorer large column table problem for good!

Nifty.

Related Link: http://datatables.net/

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