jQuery DataTables with Lots of Columns Crashes in IE

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/