DataTables pipeline total over all pages

Viewed 1533

I've implemented the pipelining example of DataTables on my page and I want to know who to do I access the json_encode values that are returned to the browser

I want to calculate the total of a particular column of returned values so I can display it to the user as a total of all the pages.

My jquery code

table = $('#table').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": $.fn.dataTable.pipeline( {
        url: "<?php echo site_url('test/proj_time_spent')?>/" + projectNum +"/" + VO,
        pages: 6 // number of pages to cache
    } ),

    "footerCallback": function () {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i = (Number(i.substr(i.indexOf(">")+1,2))* 3600 + Number(i.substr(i.indexOf(":") + 1,2)) *60 ) / 3600:
                typeof i === 'number' ?
                    i : 0;
        };

        var pageTotal;
        var colTotal;

        for($i = 4; $i <= 4; $i++){
        // Total over this page
        pageTotal = api
            .column( $i, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over all pages
        // still returns the same value as the page total above
        colTotal = api
            .column( $i) 
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer of Value
        $( api.column( $i ).footer() ).html(
            pageTotal.toFixed(1) + ' hours <br>(' + colTotal.toFixed(1) + ' hours)' 
        );
        }
    }
} );
} );

Now I have intrigued the code a little and I see that what DataTables is just using the 10 entires on the page, not the full xhr returned data in cache.

Edit My answer

I set the number of pages to 1000 so the number of records that are drawn are 1000x10 = 10000, but my records will be less then 10000.

// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
//
$.fn.dataTable.pipeline = function ( opts ) { ...

//rest of code for pipeline example
....
settings.jqXHR = $.ajax( {
            "type":     conf.method,
            "url":      conf.url,
            "data":     request,
            "dataType": "json",
            "cache":    false,
            "success":  function ( json ) {
                cacheLastJson = $.extend(true, {}, json);
                chart_data = cacheLastJson;
                if ( cacheLower != drawStart ) {
                    json.data.splice( 0, drawStart-cacheLower );
                }
                if ( requestLength >= -1 ) {
                    json.data.splice( requestLength, json.data.length );
                }
                colTotal = 0;
                records = (cacheLastJson.recordsTotal !== cacheLastJson.recordsFiltered)? cacheLastJson.recordsFiltered : cacheLastJson.recordsTotal;
                for ( var i = 0; i < records; i++){

                    colTotal += (Number(cacheLastJson.data[i][4].substr(-5,2))*3600 + Number(cacheLastJson.data[i][4].substr(-2,2))*60)/3600;
                }

                drawCallback( json );
            }
        } );

//remainder of code from example
2 Answers

To update a field outside the table using a value from the ajax response, reference to Idham's answer to similar question using drawCallback gave an appropriate solution

var myTable = $('#myTable').DataTable( {
    "serverSide": true,
    "ajax": { 
        "url" : "/response.php",
        "method" : "POST"
    },
    "drawCallback": function (settings) { 
        // Here the response
        var response = settings.json;
        console.log(response);
    },
});
Related