DataTables using JavaScript data source

Question

I am trying to implement a simple dataTables example using JavaScript object as a data source following the template here (second example). Please see code below:

$("#dynamicScenarioTblContainer div:last table").DataTable({ //initialize table with extras
    "data"   : [{"NoData": "no data"}],
    "columns": [{ "data" : "NoData" }]
}); 

Although the code seems to follow the same logic as the example I am getting

'Uncaught TypeError: Cannot read property 'length' of undefined'

Update:

var DSDefaultSettings = '<table class="display compact" cellspacing="0" width="100%"><tr><thead></thead></tr><tbody></tbody>/table>';
$("#dynamicScenarioTblContainer").append("<div></div>")
$("#dynamicScenarioTblContainer div:last").html(DSDefaultSettings);

$("#dynamicScenarioTblContainer div:last table").DataTable({ //initialize table with extras
    "data": [{"NoData": "no data"}],
    "columns":  [{ "data": "NoData" }]
});  

Answer 1

There is no tbody element in your table and the thead should not be encapsulated by a tr .

Reference: http://www.w3schools.com/tags/tag_thead.asp

The correct HTML for the table should be:

var DSDefaultSettings = '<table class="display compact" cellspacing="0" width="100%"><thead></thead><tbody></tbody></table>';