How to map incoming data fields of an ajax response into data table columns
How to map incoming data fields of an ajax response into data table columns
rv_nath
Posts: 7Questions: 0Answers: 0
HI,
From backend, I get a JSON response containing the following fields.
{
"aaData": [
{
"id": "94",
"category": "bats",
"rate": 1600,
"discnt_percent": 5.5,
"name": "MRF Bat",
"code": "91",
"catid": "1",
"cost": "1500",
"taxes": "14.5",
"units": "nos",
"qty" : "100",
"vat" : "5"
},
{ ...},
]
In my HTML table display, I want to show only code, name and qty columns, by ignoring other data.
I am trying to use the below code, but it doesn't work.
[code]
$("#item-list-table").dataTable({
"bProcessing" : false,
"sAjaxSource" : "responses/item-list.json",
"aoColumns" : [
{"mData" : "code"},
{"mData" : "name"},
{"mData" : "qty"}
]
});
[/code]
In fact, I don't understand how datatables maps the incoming source fields into respective html columns. Went through aoColumnDefs and aoColumns. But couldn't understand either of them for this usecase. Any help is greatly appreciated.
thanks and regards,
RV
From backend, I get a JSON response containing the following fields.
{
"aaData": [
{
"id": "94",
"category": "bats",
"rate": 1600,
"discnt_percent": 5.5,
"name": "MRF Bat",
"code": "91",
"catid": "1",
"cost": "1500",
"taxes": "14.5",
"units": "nos",
"qty" : "100",
"vat" : "5"
},
{ ...},
]
In my HTML table display, I want to show only code, name and qty columns, by ignoring other data.
I am trying to use the below code, but it doesn't work.
[code]
$("#item-list-table").dataTable({
"bProcessing" : false,
"sAjaxSource" : "responses/item-list.json",
"aoColumns" : [
{"mData" : "code"},
{"mData" : "name"},
{"mData" : "qty"}
]
});
[/code]
In fact, I don't understand how datatables maps the incoming source fields into respective html columns. Went through aoColumnDefs and aoColumns. But couldn't understand either of them for this usecase. Any help is greatly appreciated.
thanks and regards,
RV
This discussion has been closed.
Replies
So, I wrote a transformation fn, by implementing fnServerData callback, which converts the data into
"aaData" : [
[col1_data, col2_data, col3_data].
[col1_data, col2_data, col3_data].
[...]
]
sorry for the spam created.
For any other dumb people like me, here is what I did.
[code]
$("#item-list-table").dataTable({
"bProcessing" : false,
"sAjaxSource" : "responses/item-list.json",
"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"fnServerData" : function (sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax({
"dataType": "json",
"url": sSource,
"data": aoData,
"success": function(data) {
//do your stuff here
transform2DataTableFormat(data);
//finally call the original fn.
fncallback(data);
}
});
}
});
[/code]
See also: http://datatables.net/blog/Extended_data_source_options_with_DataTables
Allan