loading JSON data

doubletake

I'm trying to get a simple JSON file to load into a table. Why doesn't this work? getting cannot read property asSorting of undefined error?

Thanks,
Don

[code]
$('#eventListContainer').html('');
$('#eventList').dataTable( {
"bProcessing" : true,
"sAjaxSource": 'events.json'
} );


events.json test data below

[
{"Event_Name":"NACE 2013","Event_Date_Start":"2013-01-18T00:00:00","Event_Location_City":"San Diego"},
{"Event_Name":"ASATT","Event_Date_Start":"2012-10-26T00:00:00","Event_Location_City":"San Jose"},
{"Event_Name":"American College of Chest Physicians ","Event_Date_Start":"2012-10-31T00:00:00","Event_Location_City":"San Diego"}
]

[/code]

doubletake

Additional note: I'm only testing with local json file now. the json will come from an ajax call to a REST service later. But, it will be the same format as the local file.

[code]
$.ajax({url:"http://mydomain.com/api/events.json?returnFormat=json",
contentType: "application/json; charset=utf-8",
dataType:"json",
success: function(result) {
eventListJson = result;
loadDataTable(eventListJson);
},
error: function (request,error) {
alert(error);
}

});
[/code]

allan

Firstly you need to tell DataTables what data to use for each column. Is it column 1 or 4 or whatever that uses "Event_Name" for example - there is no order in the object. For that you use mData - see http://datatables.net/blog/Extended_data_source_options_with_DataTables

Also to consume a plain array, use sAjaxDataProp and set it to an empty string (edit sorry - I said array before) (otherwise DataTables expects an object with an aaData property).

Allan

doubletake

Thanks Allan, appreciate the help.
I still get a cannot initialize table alert for some reason (with or without adding bRetrieve and bDestroy)

I tried the code below with various attempts at setting sAjaxDataProp to an empty array. "[]", "{}", ""
but none of them worked.

What is the correct syntax for an empty sAjaxDataProp?

Thanks,
Don

[code]
oTable = $("#eventList").dataTable( {
"sAjaxSource" : "events.json",
"sAjaxDataProp": ?,
"aoColumns": [
{"mData": "Event_Name"},
{"mData": "Event_Date_Start"},
{"mData": "Event_Location_City"}
]
} );
[/code]

doubletake

I also tried "sAjaxDataProp" : [],

this still throws the cannot reinit table error.

For testing purpose, if I add a name in the JSON called "data", and use this in sAjaxDataProp, the data loads fine (but I still get the cannot initialize table alert).

Unfortunately, the .Net server feeding me the JSON does not include a name for the array of objects. So, I need to work without it.

doubletake

Alert I'm seeing is DataTable warning ... cannot reinitialize datatable ....

But the data still loads ok. (when I have a name in the JSON). I can ask the server guy add this, but I still need to get rid if this annoying popup.

My table html is in the page (without the rows). Then I initialize the table on doc ready. Shouldn't that be it? Adding bDestroy and/or bRetrieve does nothing.

Might be because I using it in bootstrap. No idea.

Any advise on getting rid of this alert?

allan

> What is the correct syntax for an empty sAjaxDataProp?

[code]
sAjaxDataProp: ''
[/code]

Sorry I said empty array before - should have said empty string.

If that doesn't work, can you link to a test page showing the error please?

Allan