Problem with display of JSONarray using datatable

Testuser

Hi all,

I am completely new to this plug-in, I am trying to display a JSonarray data returned by a servlet using the datatable plug-in, but with no result so far..I am getting weird java script error like..expected ; at 13456661 line number.
Please help me in fixing this..here is the data returned from server:
[code]
{"report":

{"rows":[

{"expDtTm":"","startTime":"","details":[{"startTime":"","status":"ACTIVE","query":"","queryDiffTime":"","engineId":461,"endTime":"","queryId":281}],"jobId":1400,"status":"QUEUED","description":"Basic Replication Dashboard Capture Log","link":"http:\/\/172.29.168.119\/stage\/2603\/1400","scheduledDtTm":"","frequency":"Immediate","endTime":"","jobDiffTime":"","jobInstanceId":2603},
]}}

[/code]
and similar rows..and I tried validating this JSON and its a valid json,
and in the .html page

[code]
$(document).ready(dataLoadAjax =
function(){
$.ajax({
"dataType":"jsonp",
"type":"GET",
"url":"http://localhost:8080/JobsServlet?do=view&output=json",
"jsonpCallback":"jsonpCallback",
"success":function(data){
}
});
});
function jsonpCallback(data){
$('#example').dataTable({
"bProcessing": true,
"bDestroy": true,
"bAutoWidth": false,
"aaData":data.report.rows,
"aoColumns":[{
"mDataProp":"jobInstanceId",
"mDataProp":"jobId",
"mDataProp":"description",
"mDataProp":"startTime",
"mDataProp":"endTime",
"mDataProp":"jobDiffTime",
"mDataProp":"status",
"mDataProp":"scheduledDtTm",
"mDataProp":"expDtTm",
"mDataProp":"frequency",
"mDataProp":"link"}]
}); }

[/code]

Please let me know if this is the correct approach or not...any help is appreciated.
thank u guys..

fbas

the "data" returned by the $.ajax call is only in scope for the duration of that function. make a reference to it in another variable. I've added "ajaxdata" and changed lines 11 and 20.

[code]
$(document).ready(dataLoadAjax =
function(){
var ajaxdata;

$.ajax({
"dataType":"jsonp",
"type":"GET",
"url":"

Testuser

Hi , Thank u for helping me..but still I have the same problem..only change is that line number got changed in the java script warning.
When i checked it in firefox..it shows a different error like ..it is pointing at the begining of the json string and says "not well formed" and the other one is "invalid label"..
can you tell me what does this mean and how to fix it..thank u

Testuser

HI,

I got some info after google search and am able to fix those 2 warnings. but now a new problem started..the table is getting displayed but it has only one column..i.e only the data for the last column.."linlk" is getting displayed..not other data is comming..can u please tell me bow to get through this?..
thanku all

allan

The invalid label is likely due to an invalid JSONP reply from the server. What does it look like. Also what is the line of code from where you were getting your original error? Sounds like it would just be a syntax error.

Allan

Testuser

Hi Allan, thanks for ur reply and u r right its a syntax problem..i got through it..but still I couldnt get the table displayed properly. As I wrote above..i will get a Jsonarray from server (each obeject has about 10 properties..and one of the property is an object with some 8 properties..)..the thing is i have to display this as a table..with 9 coulmns ..and the 10th column which is an object with properties gets dsiplayed as a hidden row..like user clicks any where on the row..the new row has to displayed below..with the data of the the 10th columns properties.....I am tyring to use fnserverdata and al..but its not working can u help out pls..Here I am posting out the data from server:
[code]
{
"report": {
"rows": [
{
"expDtTm": "",
"startTime": "",
"details": [
{
"startTime": "",
"status": "ACTIVE",
"query": "",
"queryDiffTime": "",
"engineId": 461,
"endTime": "",
"queryId": 281
}
],
"jobId": 1400,
"status": "QUEUED",
"description": "Basic Replication Dashboard Capture Log",
"link": "http://172.29.168.119/stage/2603/1400",
"scheduledDtTm": "",
"frequency": "Immediate",
"endTime": "",
"jobDiffTime": "",
"jobInstanceId": 2603
},

{
"expDtTm": "",
"startTime": "2011-12-01 13:29:06.0",
"details": [
{
"startTime": "2011-12-01 13:29:08.0",
"status": "READY",
"query": "",
"queryDiffTime": "0 hrs 0 mins 3 secs 3000 miliseconds",
"engineId": 541,
"endTime": "2011-12-01 13:29:11.0",
"queryId": 361
}
],
"jobId": 1480,
"status": "DELIVERED",
"description": "Test jib",
"link": "http://172.29.168.119/stage/2766/1480",
"scheduledDtTm": "",
"frequency": "Immediate",
"endTime": "2011-12-01 13:29:24.0",
"jobDiffTime": "0 hrs 0 mins 18 secs 18000 miliseconds",
"jobInstanceId": 2766
}


]
}
}
[/code]
and this is the html code:
[code]
$(document).ready(dataLoadAjax = function(){
var ajaxData;
$.ajax({
"dataType":"json",
"mimeType":"application/json",
"type":"GET",
"url":"http://localhost:8080/JobsServlet?do=view&output=json",
"success":function(data){
ajaxData = data;
$('#example').dataTable({
"bProcessing": true,
"bDestroy": true,
"bAutoWidth": false,
"aaData":ajaxData.report.rows,
"aoColumns":[{
"mDataProp":"jobInstanceId",
"mDataProp":"jobId",
"mDataProp":"description",
"mDataProp":"startTime",
"mDataProp":"endTime",
"mDataProp":"jobDiffTime",
"mDataProp":"status",
"mDataProp":"scheduledDtTm",
"mDataProp":"expDtTm",
"mDataProp":"frequency",
"mDataProp":"link",
"mDataProp":"details"}] ,
"fnServerData": fnServerObjectToArray(['jobInstanceId','jobId','description','startTime','endTime','jobDiffTime','status','scheduledDtTm','expDtTm','frequency','link','details']) }); } });

fnServerObjectToArray = function( aElements){
return function(sSource, a0Data,fnCallback){
$.ajax({
"dataType":'json',
"type":"post",
"url":sSource,
"data":a0Data,
"success": function(json){
var a =[];
for( var i=0, iLen = aaData.length; i< iLen; i++ ){
var inner = [];
for( var j=0, jLen = aElements.length; j>jLen ; j++){
inner.push(json.aaData[i][aElements[j]]);
}
a.push(inner);
}
json.aaData= a;
fnCallback(json); } }); } } });
[/code]

thanks for your help..

allan

I don't really understand the fnServerData function you've got there. You are converting from objects to arrays, but you've specifically told DataTables (using mDataProp) to expect objects. What was the intention there?

Actually - looking at it further, I don't see any need for fnServerData at all, since you aren't using DataTables' method to get the Ajax data - you are making your own call.

> the 10th column which is an object with properties gets dsiplayed as a hidden row..like user clicks any where on the row..the new row has to displayed below..with the data of the the 10th columns properties

You mean something like this: http://datatables.net/blog/Drill-down_rows ? You don't need a column for that. Just use fnGetData when you want to render the child row, and that will give you the data source object.

Allan

Testuser

Hi allan..thanks again for ur response..yes u r absolutely right..actually I am completely new to scripting..jquery ..ajax everything..so i couldnt figure out the proper way. when I didnt use the fnServerfunction() data for only a single column used to be displayed in the table..so I thought tat data has to be converted again..to array..or something and used that one..
Now I got the actual problem..I am enclosing all mDataProps in a single [{"":"","":""}]..but the correct way is each one should have be seperately enclose [{},{},...] so only the final columns used to come..:)

But now got a new problem to display that inner drill down row..I follwed the example u mentioned..its quite understandable..great thanks for such a good article..but the problem is after I used that logic in my page..only table is getting displayed..on a white back ground all other formating,styles every thing is gone..not even the click for open and close of inner row is working...can u tell me wats the prob now?

allan

No really from that description :-). It could be anything. Open the Inspector's console in Chrome/Safari and see what that says.

Allan

Testuser

Hello Allan, I got it working...but I must say that its a beautiful plug-in with many options..u simply rock :) I am able to display that drill-down rows, then coustomize few columns data (used the fnRender())..and pagination..etc etc..everything I used datatable only..with zero doc.write()..credit goes to ur plug-in and u :)..now starting with some other complex table..no idea wat issues are waiting for me :)