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!


Related Link: http://datatables.net/

Related Posts:

About Craig Lotter

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

  • Guest

    THANK YOU!!  I’ve been struggling with why my datatable wouldn’t work with my last couple of columns.

  • No problem, glad it worked for you! :)