Ajax loading
Ajax loading
drawnitsud
Posts: 1Questions: 1Answers: 0
So, I have poured over the manual and googled extensively and I don't know what I am missing here. I am trying to load my data through an ajax call and I keep getting: Cannot read property 'mData' of undefined
My ajax call returns an object and when I console.log it, the structure looks like this:
[Object, Object]
0: Object
formattedCreated: "1/15/2016"
id: 50
subject: "Meter"
1: Object
formattedCreated: "1/16/2016"
id: 51
subject: "Second"
Okay, so its an array of objects basically. I cannot figure- for the life of me- the call. I've tried several.
JavaScript:
$("#my_table").DataTable({
"ajax": "path/of/call",
"columns": [
{"data": "formattedCreated"}
{"data": "subject"}
{"data": null} (I don't want to use id)
]
});
HTML:
table id="my_table"
thead
tr
th Date /th
th Subject /th
th a href="" i class="fa fa-icon" /i /a /th
/tr
/thead
/table
I've tried many variances of the JavaScript but cannot seem to get it to work. Any help would be MUCH appreciated
This discussion has been closed.
Answers
Based on the piece of console that you showed about your ajax response... It looks your JSON structure is missing the "data" identifier
Your object should console:
Object {data: Array[2]}instead of[Object, Object].So, you have two options:
1) change the response to be:
{data: [{formattedCreated: "1/15/2016",id: 50,subject: "Meter"},{formattedCreated: "1/16/2016"id: 51subject: "Second"}]}You can use "dataSrc" property to see how dataTable is seeing the data.
2) And also you can try the code below since looks your data is ready to be used (already outside of the "data" identifier).
JavaScript:
$("#my_table").DataTable({"ajax": {url: "path/of/call",dataSrc: function (data, settings) {console.log(data);return data;}},"columns": [{"data": "formattedCreated"}{"data": "subject"}{"data": null} (I don't want to use id)]});