DataTables logo DataTables

This site contains the legacy documentation for DataTables v1.9 and earlier for reference only.
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.
DataTables server-side processing example with JSONP

Preamble

JSONP is a method of using JSON data from any server, regardless of XSS protection that modern browsers use. It is very useful for being able to retrieve JSON data from any domain name you choose and is easy to integrate with DataTables, thanks to jQuery's Ajax handler, as shown in this example.

Live example

Rendering engine Browser Platform(s) Engine version CSS grade
Loading data from server
Rendering engine Browser Platform(s) Engine version CSS grade

Initialisation code

$(document).ready(function() {
	$('#example').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "scripts/jsonp.php",
		"fnServerData": function( sUrl, aoData, fnCallback, oSettings ) {
			oSettings.jqXHR = $.ajax( {
				"url": sUrl,
				"data": aoData,
				"success": fnCallback,
				"dataType": "jsonp",
				"cache": false
			} );
		}
	} );
} );

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

			

				
Basic initialisation

				
				
				
Advanced initialisation

				
				
				
API

				
			

			
			

				
Data sources

				
				
				
Server-side processing

				
				
				
Ajax data source

				
				
				
Plug-ins