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

Does console.log(testdata); give you a string or an array/object? (use typeof testdata if you cannot tell the difference. — Felix Kling
– Felix Kling, Commented Mar 12, 2012 at 15:23
thanks - this sorted it. testdata = $.parseJSON( '{{ jobsJSON | raw }}'); — codecowboy
– codecowboy, Commented Mar 12, 2012 at 15:41

Rory McCrossan · Accepted Answer · 2014-06-10 13:51:28Z

42

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

edited Jun 10, 2014 at 13:51

answered Mar 12, 2012 at 15:26

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

codecowboy Over a year ago

Thanks. It was a combination of this and the json was not being parsed correctly: testdata = $.parseJSON( '{{ jobsJSON | raw }}');

Ali Over a year ago

I know this is an old reply but how do I get to show the column titles? It's currently empty. Thanks!

txyoji Over a year ago

@Ali Add a title attribute after your mDataProp to set the column titles. stackoverflow.com/a/22486279/119829

mahfuj asif Over a year ago

if i have another var that i want to set as column, can i do it without adding that variable to that testdata json?

Gonzalo.- · Accepted Answer · 2012-09-27 13:48:18Z

1

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

edited Sep 27, 2012 at 13:48

Gonzalo.-

12.7k5 gold badges53 silver badges84 bronze badges

answered Aug 11, 2012 at 3:25

Kenji

312 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related