DataTables server-side processing example with deferred loading

Preamble

When using DataTables with server-side processing the default behaviour is to have DataTables automatically go the server and load the data, removing anything which might already be on the page. However, this behaviour might not always be desirable when the first page of the table has already been preloaded in the HTML. This is achieved by using the iDeferLoading initialisation property. It serves two purposes, firstly to include that deferred loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and pagination to be displayed correctly).

In this example the preloaded data is hardcoded in, but you could use a PHP include or anything else to put the data in the table for the first page - DataTables won't process it at all, simply display it and be ready to load the next page / search / sort etc.

Live example

Rendering engine Browser Platform(s) Engine version CSS grade
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Rendering engine Browser Platform(s) Engine version CSS grade

Initialisation code

$(document).ready(function() {
	$('#example').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "scripts/server_processing.php",
		"iDeferLoading": 57
	} );
} );

Server response

The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.


			
			
			

Other examples