DataTables dynamic creation example
Preamble
At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This is achieved using the "aaData" array in the initialisation object. A table node must first be created before the initialiser is called (as shown in the code below). This is also useful for optimisation - if you are able to format the data as required, this method can save a lot of DOM parsing to create a table.
Live example
Initialisation code
$(document).ready(function() {
$('#demo').html( '
' );
$('#example').dataTable( {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", "5", "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", "5.5", "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", "6", "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", "7", "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", "1.8", "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", "1.9", "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", "125.5", "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", "312.8", "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", "419.3", "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", "522.1", "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center", "sType": "numeric" },
{ "sTitle": "Grade", "sClass": "center" }
]
} );
} );
Other examples
Basic initialisation
Advanced initialisation
API
Please refer to the DataTables documentation for full information about it's API properties and methods.