Столбец суммы Bootgrid и показать результат в нижнем колонтитуле

Я реализую таблицу Bootgrid, получая данные из таблицы Mysql с помощью Ajax, все работает нормально, но теперь я пытаюсь суммировать последний столбец и печатать результат в последней строке или нижнем колонтитуле. Кто-нибудь знает, какой метод я должен вызвать или как я могу добраться до этого?


person Lenin Ocaña    schedule 12.04.2017    source источник


Ответы (1)


У меня был аналогичный опыт, лучший способ, который я мог придумать, - это использовать обработчик событий loaded, а затем выполнять вычисления вручную, вот пример, предполагающий, что у вас есть два столбца qte и цена, и вы хотите получить итог (qte * цена):

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));

});

Надеюсь это поможет.

person Ibrahim.H    schedule 30.12.2017