FooterCallback - both totals coming back as page totals

webpointz

I'm using the footerCallBack and the Page Total and Total amounts are the same. Here's my code:

    <script type="text/javascript" language="javascript" class="init">

        $.extend( $.fn.dataTable.defaults, {
            responsive: true
        } );        
        
        $(document).ready(function() {
            $('#example').dataTable( {
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // Total over all pages
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                } );
 
            // Total over this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 4 ).footer() ).html(
                pageTotal +' ('+ total +' total)'
            );
        },              
                "language": { "infoFiltered": ""},          
                "order": [[ 1, "desc" ]],
                "processing": true,
                "serverSide": true,
                "ajax": {
                        "url": 'scripts/server_processing_activity.php',
                "data": {                        
                    formCustomer: '<?php echo $_POST["sel_customer"] ?>',  
                    formStartDate: '<?php echo $_POST["dp3"] ?>',
                    formEndDate: '<?php echo $_POST["dp4"] ?>',
                    }               
                }
                            
            } );
        } );

    </script>   

webpointz

When I use console.log("Data: " + data); it shows ONLY the current page of data.

Subsequent clicks on the pagination buttons show more data coming through however the footCallBack page and total amounts are identical. I can't seem to get the grand total of ALL the data to show.

webpointz

Update:

Also, when I employ TableTools and do a CSV export, copy or PDF, it only prints the first 10 rows (first page) of data, however, the PRINT button shows ALL rows and the proper grand total?

I'm doing everything right and I'm stumped.

allan

"serverSide": true,

The whole point of server-side processing is that only the data needed for the current page is available at the client-side. Since your footer calculation is being done at the server-side, it only has that data available. Likewise TableTools is client-side software so it can only work with the data available.

In this regard, server-side processing is a tradeoff. You will have to do he summation at the server-side, and also have the server create the export files if you need server-side processing.

Allan

webpointz

Thanks Allan,

Any suggestions on both? I'm still trying to figure all of this out.

By the way, DataTables is fantastic!!!

webpointz

Update. I added a simple query on the page that does a SELECT SUM(qty) as grandtotal FROM table to obtain the total based on the same WHERE statement and now I'm getting page totals and grand total.

Thanks Allan

allan

Good to hear. For the creation of the export files, have a look at the download plug-in for TableTools which provides the client-side code. You would need to create the server-side code for your use case that will create the files.

Copy to clipboard with server-side processing will obviously only ever copy what is shown on screen.

Allan