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.
Engine | Browser | Platform | Version | 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 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | $(document).ready( function () { $( '#demo' ).html( '<table class="display" id="example"></table>' ); $( '#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" }, { "sTitle" : "Grade" , "sClass" : "center" } ] } ); } ); |