(SOLVED) JSON: Loading Data

Konstantin

Hello,

i'm new in DataTables und trying to configure my first application. I'm want data, that placed on the server, in JSON format be displayed in a dataTable. My JSON file has following format (http://jsonlint.com validated):
[quote]
{
"configuration":
{
"domain": "HPSM",
"name": "highPriorityUserIncidents",
"language": "en",
"version": "v01",
"creationgmttimestamp": "1320249079000",
"lastupdategmttimestamp": "1320249079000"
},
"data":
[
{
"uinumber": "INC9765",
"status": "open",
"title": "Printer doesnt print",
"assignmentgroup": "Service Desk",
"service": "IT Service"
},
{
"uinumber": "INC543",
"status": "closed",
"title": "Email",
"assignmentgroup": "Service Desk",
"service": "Email Service"
}
]
}[/quote]

Array of objects [code] "data":[{}][/code] should be displayed, like here described: http://datatables.net/release-datatables/examples/ajax/objects.html. But it doesnt work.


Here is the configuration:

[code]
$(document).ready(function() {
$('#highPriorityUserIncidents').dataTable( {
"bProcessing": true,
"sAjaxSource": "http://localhost:8080/myProxyService0.1/cache/highPriorityUserIncidents.json",
"aoColumns": [
{ "mDataProp": "uinumber" },
{ "mDataProp": "status" },
{ "mDataProp": "title" },
{ "mDataProp": "assignmentgroup" },
{ "mDataProp": "service" }
]
} );
} );
[/code]


And here is my table:

[code]



uinumber
status
title
assignmentgroup
service





Loading data from
server





uinumber
status
title
assignmentgroup
service




[/code]

Noting spacial. But i have [quote]"Processing..."[/quote] message before the table and [quote]"Loading..."[/quote] in the table. No JavaScript errors. I dont understand, what's wrong. Please help me :)))

Konstantin

Does dataTables have any debug possibilities?

fbas

by default, the system looks for a variable named "aaData" in the JSON object.

you can either change the name of the variable in your JSON or you can override the default name with sAjaxDataProp to read your "data" variable

[code]$(document).ready(function() {
$('#highPriorityUserIncidents').dataTable( {
"bProcessing": true,
"sAjaxDataProp": "data"
"sAjaxSource": "http://localhost:8080/myProxyService0.1/cache/highPriorityUserIncidents.json",
"aoColumns": [
{ "mDataProp": "uinumber" },
{ "mDataProp": "status" },
{ "mDataProp": "title" },
{ "mDataProp": "assignmentgroup" },
{ "mDataProp": "service" }
]
} );
} );[/code]

http://www.datatables.net/ref#sAjaxDataProp

Konstantin

if i test is like this, using just an array with my objects (copy&paste):

[code]
$(document).ready(function() {
$('#highPriorityUserIncidents').dataTable( {
"bServerSide": false,
"aaData":
[
{
"uinumber": "INC9765",
"status": "open",
"title": "Printer doesnt print",
"assignmentgroup": "Service Desk",
"service": "IT Service"
},
{
"uinumber": "INC543",
"status": "closed",
"title": "Email",
"assignmentgroup": "Service Desk",
"service": "Email Service"
}
],
"aoColumns": [
{ "mDataProp": "uinumber" },
{ "mDataProp": "status" },
{ "mDataProp": "title" },
{ "mDataProp": "assignmentgroup" },
{ "mDataProp": "service" }
]
} );
} );
[/code]

it's everything okay. The data is being displayed

Konstantin

hello and thank you for the reply. I've tested both: changed my json format and changed the configuration.

f.e. with
[code]
$(document).ready(function() {
$('#highPriorityUserIncidents').dataTable( {
"bProcessing": true,
"sAjaxDataProp": "data",
"sAjaxSource": "http://localhost:8080/ProxyService0.1/cache/highPriorityUserIncidents.json",
"aoColumns": [
{ "mDataProp": "uinumber" },
{ "mDataProp": "status" },
{ "mDataProp": "title" },
{ "mDataProp": "assignmentgroup" },
{ "mDataProp": "service" }
]
} );
} );
[/code]

and

[code]{
"configuration":
{
"domain": "HPSM",
"name": "highPriorityUserIncidents",
"language": "en",
"version": "v01",
"creationgmttimestamp": "1320249079000",
"lastupdategmttimestamp": "1320249079000"
},
"data":
[
{
"uinumber": "INC9765",
"status": "open",
"title": "Printer doesnt print",
"assignmentgroup": "Service Desk",
"service": "IT Service"
},
{
"uinumber": "INC543",
"status": "closed",
"title": "Email",
"assignmentgroup": "Service Desk",
"service": "Email Service"
}
]
}[/code]

i have no luck :(

Konstantin

Firebug Request Header:
[quote]Host localhost:8080
User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Accept application/json, text/javascript, */*; q=0.01
Accept-Language de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding gzip, deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 115
Connection keep-alive
Origin null[/quote]

Firebug Response Header:

[code]Server Apache-Coyote/1.1
Accept-Ranges bytes
Etag W/"589-1320417459000"
Last-Modified Fri, 04 Nov 2011 14:37:39 GMT
Content-Length 589
Date Fri, 04 Nov 2011 14:42:22 GMT[/code]

Response is empty. I dont know whether its okay. Any suggestions?

Konstantin

My i call with "sAjaxSource" a simple text file from the http Server, like above? Or should it be a proper file with "application/json" content type?

fbas

flush the cache? "ProxyService0.1/cache" doesn't sound promising...

wsjbence

Comparing your HTML to some of the examples I notice that you have not assigned an id to your table element. You have assigned a class, and you use that class name to build the jquery selector that the data tables function is called on. Perhaps this selector returns nothing because the name you want to use is a class instead of an id?

Konstantin

Hi, yeah! It's everithing fine now. Eclipse doesnt updated cache where i got the json files. Thank you for your support!