current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 12 down vote favorite
6

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.

share|improve this question
    
Does console.log(testdata); give you a string or an array/object? (use typeof testdata if you cannot tell the difference. – Felix Kling Mar 12 '12 at 15:23
    
its a string. I have also tried using $.parseJSON() on it. – codecowboy Mar 12 '12 at 15:31
    
thanks - this sorted it. testdata = $.parseJSON( '{{ jobsJSON | raw }}'); – codecowboy Mar 12 '12 at 15:41
up vote 31 down vote accepted

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

share|improve this answer
2  
Thanks. It was a combination of this and the json was not being parsed correctly: testdata = $.parseJSON( '{{ jobsJSON | raw }}'); – codecowboy Mar 12 '12 at 15:42
    
I know this is an old reply but how do I get to show the column titles? It's currently empty. Thanks! – Ali Mar 12 '14 at 13:50
up vote 1 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.