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 () {
  var rdb = new SQLEngine("r0000000002","-",'rdbhost');
  var q = 'SELECT * FROM css_data';
  function getData(sSource, aoData, fnCallback) {
    function cBack(json) {
      var newJson = {'aaData': json.records.rows};
      fnCallback(newJson);
    }
    var res = rdb.query({ 'callback': cBack,
                          'errback': alert,
                          'q': q   })
  }
  $('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" '+
                      'class="display" id="example"><'\/table>' );
  $('#example').dataTable( {
    "sAjaxSource": "/space/holder",
    "aoColumns": [
      { "sTitle": "Engine" },
      { "sTitle": "Browser" },
      { "sTitle": "Platform" },
      { "sTitle": "Version", "sClass": "center" },
      { "sTitle": "Grade" }
    ],
    "fnServerData": getData,
    "bPaginate": false,
    "bLengthChange": false
  } );  
})

Please refer to the DataTables documentation for full information about its API properties and methods.