AJAX Request seems to drop object in main javascript.

Darkenspirit

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!

allan

Can you link to a test case showing the issue please or use the debugger.

Allan

Darkenspirit

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.

Darkenspirit

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.

allan

Thanks for the debug link.

It still says my datasource is DOM despite it having pulled a JSON object.

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:

[ {
    "CountryCode": "BF",
    "CountryName": "BURKINA FASO"
} ]

You'd also need to use ajax.dataSrc to tell it to expect an array of data, rather than an object with an array in it. You have dataSrc set, but not as an option of the ajax object. Try:

{
    "ajax": {
        url: "http://localhost:8081/random",
        "type": "get",
        "dataSrc": ""
    },
    "columns": [{
        "data": "CountryCode"
    }, {
        "data": "CountryName"
    }]
}

Allan

Darkenspirit

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 !

allan

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

Darkenspirit

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" }, js

js "columns": [ { "data": "PolicyID" }, { "defaultContent": "Not Available" } js

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

allan

In the columns array you need to have one object for each column (or null if it doesn't need any options for that column).

Allan

Darkenspirit

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?

        { 
        "data": "PolicyNumber",
        "type": "num",
        "defaultContent": "Not Available"   
        },

Darkenspirit

http://i.imgur.com/363N5T4.jpg

Also screenshot of the table not displaying a few columns despite the JSON values being there.