Need help with custom API JSON response to go into dataTables

danieljamesbertrand

Hi,

I am a noob with javascript and datatables. I started coding in javascript about 2 weeks ago.

I have a custom API that sends JSON data structures back when I hit a URI, sometimes with a parameter d={"parm1" : p1, "parm2" : "p2"} etc.

I get back JSON data in the same format.

I would like to put this JSON data into a dataTable and possibly edit it with Editor.

I have tried many different ajax settings but I just can't get data into the table. I use Firebug to check my errors.

The following is what I have been trying... it just says "no table data".

I am not sure what I have to do with aaData, aData... etc. Can you please help me?

$('#userTbl').dataTable( {
"bProcessing": true,
"dataType": "json",
"type": "GET",
"sAjaxDataProp": "",
"aoColumns": [
{ "mDataProp": "col1_id" },
{ "mDataProp": "col2_id" },
{ "mDataProp": "col3_id" }
],
"sAjaxSource": 'http://my.uri/my/data/path' })


My table is set up this way:












Regards,

Dan

snarf2larf

Your table only shows 1 column but your aoColumns show there are 3? Also, your tag should contain Column Name not .

Check the json being returned using firebug. Does it contain the data in the same format found here? http://datatables.net/usage/server-side

Your sAjaxDataProp being empty too might be causing problems. Try removing that or setting it to the correct object containing the table data.

allan

@Dan - could you run your table through the DataTables debugger (link at the bottom of the reply box) as I suspect that will lead us to an answer for you. At a guess - are you returning an array of objects, or just a single object in your JSON?

@snarf2larf

> Also, your tag should contain Column Name not .

Generally yes, and this used to be strictly enforced by DataTables, but that isn't true anymore - TH and TD can now be used interchangeably in the head (and the body for that matter) :-). Now it is simply good practice to use TH because it has semantic meaning as the column header.

> Your sAjaxDataProp being empty too might be causing problems

An empty value for sAjaxDataProp is a special case which allows DataTables to expect an array from the JSON return, rather than an object with a property that is an array and will be used as a data source.

sAjaxDataProp cannot be empty for server-side processing, since an object much be returned, but in this case, client-side processing with an Ajax source is being used, so that is a valid (and often useful) thing to do :-)

Allan

danieljamesbertrand

I don't mean to be any trouble, but can you please explain what I have to do to get the GET data from http://datasource into my table.

I changed the code to be a bit simpler..

The data returned from http://datasource is this:

{"business_unit_id":2,"language_code":"en","theme_id":1}

which looks to me to be properly formatted JSON.

$(document).ready(function() {
$('#userTbl').dataTable( {
"bProcessing": false,
"dataType": "json",
"type": "GET",
"sAjaxSource": 'http://datasource' })
} );













bus_id

danieljamesbertrand

The debug info is here:

http://debug.datatables.net/emozix

allan

Okay - thanks for the debug trace. It shows that the JSON coming back from the server is:

[code]
{
"business_unit_id": 2,
"language_code": "en",
"theme_id": 1
}
[/code]

Now that isn't going to work for anything more than 1 row - and therefore (because DataTables doesn't limit you to just 1 row!) DataTables doesn't support that format. You must return an array of items for DataTables to iterate over, adding them to the table, even if there is only one item - i.e.:

[code]
[
{
"business_unit_id": 2,
"language_code": "en",
"theme_id": 1
}
]
[/code]

So you need to change your script on the server slightly to allow you to send more than one row at a time :-)

Allan

danieljamesbertrand

Allan,

Thank you for your help.

Can't I just wrap the data after the ajax call? I am so close... lol

allan

Yes you can - you could use fnServerData to override the Ajax call that DataTables makes itself and replace it with your own $.ajax call, and then in the success callback just wrap the object (when only one object is returned) in an array.

However, I would have thought you would need special code on the server-side to handle that 1 record return situation - or are you only expecting to ever return 1 record?

Allan

danieljamesbertrand

I will pay for 1 hour of support, how can we talk.... on skype?

danieljamesbertrand

Hey Allan - are you in the UK? Is it really late (or early) for you?

allan

Just replied to your PM :-) I'm UK (BST) based.

Regards,
Allan