How to Render JSON data as OBJECT list NOT Array list
How to Render JSON data as OBJECT list NOT Array list
- File: jquery.dataTables.min.js
- Version: 1.9.4
I have followed all example of AJAX source data in the online documentation BUT no luck
I have this JSON data format that I need to render as DataTable..
BUT then I get this error:
DataTables warning (table id = 'xxxxx'): Requested unknown parameter '0' from the data source for row 0
{"data":[{"Date":"2014-07-03 ","TotalPaidOk":"937","Total1stBilled":"939","TotalPending":"0","TotalFree":"1","TotalNoFunds":"2","TotalSysErrors":"0","TotalObs":"0","TotalObsSuccess":"0","TotalObsSuccessRands":".000000","DisplaySequence":1},{"Date":"2014-07-02 ","TotalPaidOk":"4297","Total1stBilled":"13334","TotalPending":"1","TotalFree":"2","TotalNoFunds":"10490","TotalSysErrors":"611","TotalObs":"37698","TotalObsSuccess":"5054","TotalObsSuccessRands":"10108.000000","DisplaySequence":2}....]}
BUT this JSON format it does render it well
{"data":[["2014-07-03 ","937","939","0","1","2","0","0","0",".000000",1],["2014-07-02 ","4297","13334","1","2","10490","611","37698","5054","10108.000000",2],["2014-07-01 ","9482","13363","1","2","10449","641","47238","10468","20936.000000",2] ....]}
/*begin*/
$('#testTable').dataTable( {
"aaData":data.data,
"sPaginationType": "bootstrap",
"bSort": false,
//"sScrollY": "600px",
//"bPaginate": false,
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aoColumns": [
{"bSortable": true, "asSorting": [ "desc" ] , "sWidth":"100px", "sTitle":"Date", "data":"Date"},
{"bSortable": true, "sTitle":"# Fully Paid", "data":"TotalPaidOk"},
{"bSortable": true, "sTitle":"# 1st Billed", "data":"Total1stBilled"},
{"bSortable": true, "sTitle":"# Pending", "data":"TotalPending"},
{"bSortable": true, "sTitle":"# Free", "data":"TotalFree"},
{"bSortable": true, "sTitle":"# No Funds", "data":"TotalNoFunds"},
{"bSortable": true, "sTitle":"# Sys Errors", "data":"TotalSysErrors"},
{"bSortable": true, "sTitle":"# Obs", "data":"TotalObs"},
{"bSortable": true, "sTitle":"# Obs Success", "data":"TotalObsSuccess"},
{"bSortable": true, "bSortable": true, "sTitle":"Obs Success (ZAR)"
, "data":"TotalObsSuccessRands", "sType":"currency"
},
{"bSortable": true, "asSorting": [ "asc", "desc" ] , "sTitle":"Sequence", "data":"DisplaySequence"},
],
"aoColumnDefs": [
{ "aDataSort": [ 10 ], "aTargets": [ 10 ] },
{
"mRender": function ( data, type, row) {
var mValue = parseFloat(0.00);
mValue = parseFloat( data );
if ( mValue > 0 ) {
//mValue = Math.round(mValue);
return 'R' + mValue.toFixed(2);
}else
return '-'
return 'R' + data;
},
"aTargets": [9]
},
{"bVisible": false, "aTargets": [ 10 ] }
]
} );
/*end*/
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
My knowledge of 1.9.4 is a bit rusty... But I think your issue is with the
mRender. Try removing it. If it works then I would try adding themRenderto theaoColumnssection for the column it is needed.Even before mRender - it never worked...
it only accepts JSON array dat NOT JSON objects
I added "mRender" way long after all my tries to display JSON objects data list have falied.
It throws this error:
" DataTables warning (table id = 'xxxxx'): Requested unknown parameter '0' from the data source for row 0 "
BUT if I return JSON data as array ({"data":[{0:"Testing", 1:"PHP"},{....}]}) - it works fine
this fails :
{"data":[{"topic":"Testing", "Subject":"PHP"},{....}]}
-- what is it that it does like about named JSON objects
Try changing
datatomData.I was digging through my old Datatables pages and one of my 1.9.4 pages used
mData.Thank you ! Thank You ! Daimian
mData is exactly what it required.
Yup - the camelCase notation was introduced in 1.10, which the currency documentation reflects.
If you need to use the old version of the library the legacy documentation is still available (although I would obviously recommend upgrading).
Allan
Hi Allan
On change event of select input > I want to repopiulated my table with new data based on the selected value from the drop-down:
HTML
** It olny works for the first time if you select the value from dropdown
BUT this doesnt seem to work
$('#myTableId').dataTable().fnClearTable();
How should I do it ?
Please link to a test case showing the issue so we can debug it.
Allan
I have this HTML :
i have this " <<" ..so it wont create html on this pot >>
JS:
$('#selectErrorl').change( function() {
var selectedVal = '';