JQuery DataTable not displaying REST service JSON data

james007

I have REST service in server which returns JSON data. I am getting the value and can able to print on the JQuery client using the below snippet. But the datatabe is not rendering the information. I also used aoColumns in the datatable to map the JSON data to the table column. What could be gone wrong?

DataTable init

[code]

oTable =$("#myTable").dataTable({
bJQueryUI: true,
"bPaginate": true,
//Pagination": "full_numbers",
"sPaginationType": "two_button",
"bProcessing": true,
"sAjaxSource": dataSource,
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 1 ] }
],
"aoColumns": [
{ "sName": "aprop" },
{ "sName": "bprop" },
{ "sName": "cprop" },
{ "sName": "dprop" },
{ "sName": "eprop" },
{ "sName": "fprop" },
{ "sName": "gprop" },
{ "sName": "hprop" },
{ "sName": "iprop" }
]

});


[/code]

Snippet Displays the JSON data

[code]

$.getJSON('RequestTrades.htm', function(data) {

$('#dSource').text(data);

var items = [];

$.each(data, function(key, val) {
items.push('' + key +' : '+ val + '');
});

$('', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body');
});

[/code]

allan

Is your array of data in an object with the property name "aaData"? DataTables is looking for that by default. You can override it with sAjaxDataProp: http://datatables.net/ref#sAjaxDataProp

Allan

james007

Allan, I use Spring REST service. MappingJacksonHttpMessageConverter will take the job of converting the java object into JSON object. So i wont get { "aadata": [...] } /{ "data": [...] }

MappingJacksonHttpMessageConverter just returns {[..][...]}.
In this case what needs to be done?

allan

Use sAjaxDataProp and set it to an empty string.

> {[..][...]}

That's not valid JSON. Do you mean "[ {...}, {...} ]"?

Allan

james007

@RequestMapping(value = "/RequestEmp.htm", headers = "Accept=application/json, text/plain, application/xml")
public @ResponseBody Emp fetchEmp() {
Employee emp=EmployeeDAO.selectEmp();
return emp;
}

My data looks like below...
for single record
{"jprop":"123","kprop":"aaa","lprop":"B ","aprop":"N","bprop":"500000","cprop":"qaqa","dprop":"479811.3","eprop":"94.74","fprop":"08/03/011","gprop":"11/03/011","hprop":"473700","iprop":"6111.3"}

For array of data
[{"jprop":"123","kprop":"123","lprop":"B ","aprop":"N","bprop":"500000","cprop":"qwe","dprop":"479811.3","eprop":"94.74","fprop":"08/03/011","gprop":"11/03/011","hprop":"473700","iprop":"6111.3"},{"jprop":"aqaq","kprop":"as","lprop":"S ","aprop":"N","bprop":"100000","cprop":"asa","dprop":"95643.06","eprop":"95.2","fprop":"27/09/011","gprop":"30/09/011","hprop":"95200","iprop":"443.06"}]

if this is the case then what goes in sAjaxDataProp

allan

An empty string :-)

Allan