How can I use a local JSON object as a data source for jQuery DataTables

Question

I have a local JSON object formatted like this:

[{
    \"id\": \"58\",
    \"country_code\": \"UK\",
    \"title\": \"Legal Director\",
    \"pubdate\": \"20         


        

Answer 1

The property to supply your own data is aaData NOT aoData:

testdata = [{"id":"58",...}]; // local object

$('#test').dataTable({
    "aaData": testdata,
    "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "country_code" },
        { "mDataProp": "title" },
        { "mDataProp": "pubdate" },
        { "mDataProp": "url" }
    ]
});

Working fiddle

Answer 2

I encoutered the same problem, solution is like this: Place $('#list_table').dataTable code in setTimeout function to postpone dataTable application for 5 seconds:

setTimeout("$('#list_table').dataTable ...." , 5000);

I noticed that apply dataTable plugin in firebug after the table is loaded, it doesn't show error as "No data available in table".