How to Render JSON data as OBJECT list NOT Array list

bheksta

• 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*/

Daimian

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 the mRender to the aoColumns section for the column it is needed.

bheksta

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

Daimian

Try changing data to mData.

I was digging through my old Datatables pages and one of my 1.9.4 pages used mData.

bheksta

Thank you ! Thank You ! Daimian
mData is exactly what it required.

allan

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

bheksta

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 ?

allan

Please link to a test case showing the issue so we can debug it.

Allan

bheksta

I have this HTML :

                                  <<select id="selectError" class="form-control" data-rel="chosen">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                    <option>Option 5</option>
                                  </select>


                        <table id="mytable" class="table table-striped table-bordered bootstrap-datatable">

                      </table>            
                    </div>

i have this " <<" ..so it wont create html on this pot >>
JS:

$('#selectErrorl').change( function() {
var selectedVal = '';

        //alert( $('#mytable').text().length ); -- my way of check if there is html content

        if ( parseInt( $('#mytable').text().length ) > 18 ){
            //$('#mytable').dataTable().fnClearTable(); --doesnt work
            $('#mytable').dataTable().fnDestroy();  - works         
        }       

        selectedVal = $(this).val();

        if (selectedVal != '' )   
            fnStatsSubsBilledReport( selectedVal, '' ); 
});