how to make an aggregate sum of all rows of a particular column on each criteria entered ?

pheromix

There is a dataTable :

<table id="list_livraisons" class="striped cell-hovered border bordered" data-searching="true">
    <thead>
        <tr>
            <th style="text-align: center;">Ref.</th>
            <th style="text-align: center;">Date</th>
            <th style="text-align: center;">Table</th>
            <th style="text-align: center;">Client</th>
            <th style="text-align: center;">Price</th>
            <th style="text-align: center;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

$(document).ready(function() {

        $('#cell-content').addClass('bg-white fg-grayDark');

        $('#list_livraisons').attr('style', 'width:100%');

        var list_livraisons = $('#list_livraisons').DataTable({
            responsive: true,
            "oLanguage": {
                // switch lang here with a PHP variable 
                "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt",
            },
            "processing": true,
            "serverSide": true,
            ajax: "<?php  echo RP_SSP ?>server_processing_livraisons.php",  
            "aoColumnDefs": 
                [{
                    "aTargets": [1],
                    "mData": 1,
                    "mRender": function (data, type, full) {
                        var d = convertDateFormat2(data, " / ");
                        return '<div style="text-align:center;">'+d+'</div>';
                    }
                },
                {
                    "aTargets": [4],
                    "mData": 4,
                    "mRender": function (data, type, full) {
                        var _data = formatNombre(data, 2, " ");
                        return '<div style="text-align:right;">'+_data+'</div>';
                    }
                },
                { 
                    "aTargets": [5],
                    "mData": 5,
                    "mRender": function (data, type, full) {
                        if (isLivraisonValider(data)) {
                            return '<div style="text-align:center;">'+
                                    '<a href="RestaurantLivraison/detail/'+ data +'" style="margin-right: 8px;"><span class="mif-stack3 mif-2x"></span></a>'+
                                    '<span class="mif-checkmark mif-2x fg-lightGreen"></span>'
                                   '</div>';
                        } else {
                            var ref = '\''+full [0]+'\'';
                            return '<div style="text-align:center;">'+
                                    '<a href="RestaurantLivraison/detail/'+ data +'" style="margin-right: 8px;"><span class="mif-stack3 mif-2x"></span></a>'+
                                    '<a href="RestaurantLivraison/modifier/'+ data +'" style="margin-right: 8px;"><span class="mif-pencil mif-2x"></span></a>'+
                                    '<a href="#" id="staticDialog" onclick="afficheDlg(\''+ data +'\','+ref+')" style="color:red;"><span class="mif-cross mif-2x"></span></a>'
                                   '</div>';
                        }
                     },
                }],
                "aLengthMenu": [[10, 25,50,100, -1], [10, 25,50,100, "<?php echo _getText('global.pagination.tout'); ?>"]]
        });

        list_livraisons.on( 'search.dt', function () {
            $('#somme_total').html(); // here I want to put the sum as the html data
        } );

    });

As you can see I want to calculate the sum of all column-rows of the fifth column ( Price ) everytime the user filters the table. How to do that ?

adambelshaw

I've just done something similar. Take a look at the footer callback here: https://datatables.net/examples/advanced_init/footer_callback.html

I added a drawCallback function in the Datatables options.

var api = this.api(), data;
 
            // Total over all pages
            total = api
                .column( 4)
                .data()
                .reduce( function (a, b) {
                    return parseInt(a) + parseInt(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return parseInt(a) + parseInt(b);
                }, 0 );
 
            $('#somme_total').html(
                '$'+pageTotal +' ( $'+ total +' total)'

I can't tell 100% from you're code, but I think you might need to write you're own function to get the price instead of parseInt if formatNombre outputs something strange.