DataTables logo DataTables

DataTables AJAX source example - array of objects with sub-arrays as a data source

Preamble

While the ability of DataTables to read arbitrary objects properties as a data source for any column is very powerful, it actually goes further than single level object properties; it is possible to read a data source for a column from a deeply nested array or property. This is specified in typical Javascript dotted object notation. For example "details.0" (used in this example) refers to the first property in an array called "details". "details.1" refers to the second property, etc. Object properties can also be used - for example "details.version" is perfectly valid, if that property is available in your data source.

Live example

Rendering engine Browser Platform(s) Engine version CSS grade
Rendering engine Browser Platform(s) Engine version CSS grade

Initialisation code

$(document).ready(function() {
	var oTable = $('#example').dataTable( {
		"bProcessing": true,
		"sAjaxSource": "sources/objects_subarrays.txt",
		"aoColumns": [
			{ "mData": "engine" },
			{ "mData": "browser" },
			{ "mData": "platform" },
			{ "mData": "details.0" },
			{ "mData": "details.1" }
		]
	} );
} );

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