CODEWITHSUNDEEP
datatables
bluehatfish
bluehatfish

Reputation: 61

jQuery datatables extra server data

I need to get additional data back from the server (a sum of one of the columns for all pages) when i make my ajax call. I've tried getting this data from the fnDrawCallBack but can't seem to access it.

Here, in my codeigniter model I am setting the data, and it's coming through fine when i check the response in chrome developer tools. 

    foreach ($rResult->result_array() as $aRow) {

        $row = array();

        foreach ($aColumns as $col) {
            $row[] = $aRow[$col];

        }
        $iTotalPrice += $aRow['price'];
        $output['aaData'][] = $row;
    }

    $output['iTotalPrice'] = $iTotalPrice;
    return $output;

My js look like this:

$('#data').dataTable({
    "sPaginationType": "bootstrap"
    , "bJQueryUI": false
    , "bAutoWidth": false
    , "bDestroy": true
    , "fnServerParams": function(aoData) {
        aoData.push({"name": "aStatuses", "value": checkedStatuses
        }, {"name": "aDeliveryStatuses", "value": checkedDeliveryStatuses
        })
    }
    , "bStateSave": false
    , "bProcessing": true
    , "bServerSide": true
    , "sServerMethod": "GET"
    , "sAjaxSource": "cars/datatable"
    , "iDisplayLength": 10
    , "bLengthChange": false
            //,"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    , "aaSorting": [[0, 'desc']]
    , "aoColumns": [
        {"bVisible": true, "bSearchable": true, "bSortable": true},
        {"bVisible": true, "bSearchable": true, "bSortable": true},
        {"bVisible": true, "bSearchable": true, "bSortable": true},
        {"bVisible": true, "bSearchable": true, "bSortable": true},
        {"bVisible": true, "bSearchable": false, "bSortable": false},
        {"bVisible": true, "bSearchable": false, "bSortable": true},
        {"bVisible": true, "bSearchable": false, "bSortable": false}
    ]
    , "fnDrawCallback": function(oSettings) {
        $('span').popover();

    }
    , "fnInitComplete": function(oSettings, json) {

    }
});

So what i'd ideally like to do, is set a the contents of a span in a callback, like $('#mySpan').html(iTotalPrice);

But, i can't seem to get hold of the data.

Any help appreciated, Thanks.

Upvotes: 1

Views: 1195

Answers (1)

bluehatfish
bluehatfish

Reputation: 61

Well, I figured it out in the end incase anyone has had the same issue.

I used fnServerData instead of fnServerParams

'fnServerData' : function(sSource, aoData, fnCallback ){
   aoData.push({"name": "aStatuses", "value": checkedStatuses
        });
        $.getJSON( sSource, aoData, function (json) { 
    console.log(json);      
            /* Do whatever additional processing you want on the callback, then tell DataTables */
    //$('#totalValue').html('Total: £'+json.iTotalPrice);       
            fnCallback(json)
        } );

}

Upvotes: 2

Related Questions