jQuery DataTables: How to Reload a Table’s Data CodeUnit 24 MAR 2010

Since my discovery of the awesome jQuery DataTables plug-in I haven’t stopped using it in my projects at it is by far the simplest and cleanest way of delivering feature-rich tables to a user.

Of course, I don’t usually work with static table data, meaning that I use server side processing scripts to load the data to my tables and when I started to employ user selectable data filters not connected to the DataTables object, I realised that I needed to be able to reload the DataTable’s data source at will.

However, simply trying to initialize a DataTable object on an existing DataTable object brings up the error message

DataTables warning: Unable to re-initialise DataTable. Please use the API to make any configuration changes required.

which is needless to say, a good indication that approach is not exactly going to get you anywhere.

The answer lies in exactly what the error message told you – you need to make use of the API calls on the existing DataTable in order to reload its data. So how to do this then?

Well essentially it is a pretty simple solution. First, we check if the known DataTables object exists, in other words, that it is not undefined. If it is undefined, initialize and draw it for the first time. If not, empty it first using the fnClearTable function and then redraw using the fnDraw function – which of course would then reload the updated dataset from the server side processing script.

if (typeof oTable == 'undefined') {
			oTable = $('#commentstable').dataTable({
				"bProcessing": true,
				"bServerSide": true,
				"iDisplayLength": 150,
				"bLengthChange": false,
				"sAjaxSource": "datatables_comments_list.php"
			oTable.fnClearTable( 0 );


Related Link: http://datatables.net/index

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.