CODEWITHSUNDEEP
jqueryjsondatatables
codecowboy
codecowboy

Reputation: 10095

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

I have a local JSON object formatted like this:

[{
    "id": "58",
    "country_code": "UK",
    "title": "Legal Director",
    "pubdate": "2012-03-08 00:00:00",
    "url": "http://..."
},{
    "id": "59",
    "country_code": "UK",
    "title": "Solutions Architect,",
    "pubdate": "2012-02-23 00:00:00",
    "url": "http://..."
},{
    // ....more of the same......
}]

I would like to set this as the data source for a jQuery datatable and have tried this:

testdata = '{{ jobsJSON | raw }}'; //twig template tag
console.log(testdata);
$('#test').dataTable({
    "aoData": testdata,
    "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "country_code" },
        { "mDataProp": "title" },
        { "mDataProp": "pubdate" },
        { "mDataProp": "url" }
    ]
});

The DataTables plugin loads and attempts to draw the table but gives the error 'No data available in table'

I am not making an AJAX call and just want to access the JSON object from a local JS variable.

Upvotes: 21

Views: 60758

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 42

Kenji
Kenji

Reputation: 31

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".

Upvotes: 1

Related Questions