CODEWITHSUNDEEP
jquerymysqlsumjquery-bootgrid
Lenin Ocaña
Lenin Ocaña

Reputation: 81

Bootgrid sum column and show result it in footer

I'm implementing a Bootgrid table getting data from Mysql table using Ajax, everything works fine, but now I'm trying to sum the last column and print result on the last row or footer. Does anyone know which method should I call or how can I get to this?

Upvotes: 2

Views: 953

Answers (1)

Ibrahim.H
Ibrahim.H

Reputation: 1195

I had a similar experience, the best way I could think of is to use loaded event handler, then do calculations manually, here is an example assuming you've two column qte & price and you want to get total(qte*price):

var bootGrid = ('#grid');

bootGrid.bootgrid({
    ajax: true,
    url: 'json'
    ,multiSort:true
    // other options...
    ,labels: {
            infos: '<h3>Total: <b><span id="totalAmount"></span></b></h3><p>Showing {{ctx.start}} to {{ctx.end}} of {{ctx.total}} entries</p>',
    } //labels
}).on("loaded.rs.jquery.bootgrid", function (){
    // dynamically find columns positions
    var indexQte = -1;
    var indexPrice = -1;
    $(bootGrid).find('th').each(function(e){
        if ($(this).attr('data-column-id') == 'qte'){
            indexQte = e;
        } else if ($(this).attr('data-column-id') == 'price'){
            indexPrice = e;         
        }
    });
    var totalAmount = 0.0;
    $(bootGrid).find('tbody tr').each(function() {
        var qte = 0.0;
        var price = 0.0;
        // loop through rows
        $(this).find('td').each(function(i){
            if (i == indexQte){
                qte = parseFloat($(this).text());
            } else if (i == indexPrice){
                price = parseFloat($(this).text());
            }
        });
        totalAmount += qte * price;
    });
    $('#totalAmount').text(totalAmount.toFixed(2));

});

Hope this helps.

Upvotes: 1

Related Questions