AJAX Request seems to drop object in main javascript.
AJAX Request seems to drop object in main javascript.
Darkenspirit
Posts: 48Questions: 11Answers: 0
Greetings Hi!
I am pulling a json object out of a SQL database using edge.js. Right now I am just testing on localhost 8081 and the object pulls through just fine because if I were to just append the data to the table through a normal ajax request without datatables the table updates with my data properly.
However if I use datatables and its initialization, it looks like the table and the search features and sorting etc all those features come in through fine but the AJAX request cant seem to get my JSON object. It is undefined. If you see the included screenshots.
My javascript looks like this:
$(document).ready(function() {
$('#table_1').dataTable( {
"ajax": "http://localhost:8081",
"columns": [
{ "data": "CountryCode" },
{ "data": "CountryName" }
]
} );
} );
Included is a picture of my JSON object pulled through on localhost:8081
http://i.imgur.com/W5gqiay.jpg
and here is the error I am getting:
http://i.imgur.com/19alxVG.jpg
I must admit I am a bit of a newbie to javascript and ajax (primarily a SQL programmer) but If someone could point me towards the right direction on where to look etc.
Also note the following piece of javascript works just fine to update my table with the json object url.
$(document).ready(function () {
$.getJSON("http://localhost:8081",
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].CountryCode + "</td>");
tr.append("<td>" + json[i].CountryName + "</td>");
$('table').append(tr);
}
});
});
I am not sure how datatables is looking for the JSON object and I could even be using the wrong function but I am not experienced enough to look through datatables code without a direction.
Thanks!
This question has an accepted answers - jump to answer
Answers
Can you link to a test case showing the issue please or use the debugger.
Allan
I linked 2 pictures in the body of the text. I did use the debugger for Chrome is this what you were referring to? Its simply that aData variable is undefined.
http://debug.datatables.net/evenuk
Here is the debug link.
It still says my datasource is DOM despite it having pulled a JSON object.
Last JSON from server
{
"CountryCode": "BF",
"CountryName": "BURKINA FASO"
}
Also note this is a different test with my /random endpoint in my API which just returns a random row from SQL as a JSON object.
Thanks for the debug link.
I think that's an error in the debugger... Doh!
So the problem is that DataTables expects an array of data. I guess it could accept just a single object, but then you'd only ever have a single row in the table, so it requires an array.
For example, your returned JSON might look like:
You'd also need to use
ajax.dataSrcto tell it to expect an array of data, rather than an object with an array in it. You havedataSrcset, but not as an option of theajaxobject. Try:Allan
Ah it did not click at all for me to set the dataSrc INSIDE the ajax param.
Thank you! This worked marvelously!
Now I have to go through the bootstrap references and manuals and see how to make it more responsive since right now the table options (like paging and search) are moving around and shrinking but the table does not!
Thanks again !
I'm just about to start work on a responsive plug-in for DataTables in fact :-). Keep an eye on this site or my github account - should be able to release it fairly quickly I think.
Allan
One last quick question,
http://datatables.net/reference/option/columns.defaultContent
The documentation is kind of confusing, what if I wanted all the cells where it is null that is in my array ""
come up as "Not Available?"
Neither way I do it seem to ge twhat I want nor fix the TN4 error I am having.
js"columns": [{"data": "PolicyID","defaultContent": "Not Available"},jsjs"columns": [{ "data": "PolicyID" },{ "defaultContent": "Not Available" }jsI suspect once again it is the format the JSON object is coming through as. Whats werid is that I get the TN/4 Error despite having all PolicyID rows filled in with an integer, It still has an issue regardless.
Anyways, I am going to keep reading the documentation and try to figure it out unless there is something obvious right now before I post another debug.
In the
columnsarray you need to have one object for each column (ornullif it doesn't need any options for that column).Allan
http://debug.datatables.net/upuqev
I have the right # of columns for the # of columns I pulled out. I dont know how to test the #cells = #columns * #rows
So for the Policy Number column do I need to do something like this?
http://i.imgur.com/363N5T4.jpg
Also screenshot of the table not displaying a few columns despite the JSON values being there.