Question

我有一张表可以很好地填充数据。有一个运输成本列需要计算并显示在表格外的div中。我已经得到了总结的值，但是如何将值传递给数据表，以便可以在页面的其他位置填充它。

Answer 1

为什么要将计算的总和传递给dataTable，以便将其传递给<div>？起初我以为你想让dataTable计算总和并返回它，所以我做了这个扩展或“插件”：

//pass columnIndex that needs to be calculated
//and the $(element) that should receive the calculated value
$.fn.dataTableExt.oApi.fnColumnSum = function ( oSettings, iColIndex, oElement ) {
    var value,
        total = 0;
    for (var i=0; i<oSettings.aoData.length;i++) {
        value = oSettings.aoData[i]._aData[iColIndex];
        if (!isNaN(value)) {
            total = total + parseFloat(value);
        }
    }
    oElement.text(total);
}

现在DataTable已扩展，因此您可以调用示例

dataTable.fnColumnSum(3, $("#shipping-costs"));

jsfiddle with the above - ＆gt;的 http://jsfiddle.net/jTgx2/

Answer 2

这段代码对我有用。我希望它也能帮到你。

$("#cashSheet").dataTable({
    "footerCallback": function(row, data, start, end, display){
        var api = this.api(), data;
        var intval = function(i){
            return typeof i === 'string' ?
            i.replace(/[\$,]/g, '')*1:
            typeof i === 'number' ?
            i : 0;
        };
        total = api
            .column( 3 )
            .data()
            .reduce(function(a, b){
                return intval(a) + intval(b);
            }, 0 );
        pageTotal = api
            .column( 3, {page: 'current'} )
            .data()
            .reduce(function(a, b){
                return intval(a) + intval(b);
            }, 0 );
        $(api.column( 3 ).footer() ).html(
            ''+pageTotal +' ( '+ total + ' total)'
        );
        total = api
            .column( 4 )
            .data()
            .reduce(function(a, b){
                return intval(a) + intval(b);
            }, 0 );
        pageTotal = api
            .column( 4, {page: 'current'} )
            .data()
            .reduce(function(a, b){
                return intval(a) + intval(b);
            }, 0 );
        $(api.column( 4 ).footer() ).html(
            ''+pageTotal +' ( '+ total + ' total)'
        );
    }
});

它计算第四列和第五列的总和，并在页脚中显示它。希望它能帮到你。一切顺利。

Answer 3

<块引用>

试试这个，而不是多次编写相同的函数

$(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(/[\$a-zA-Z, ]/g, '') * 1 :
                    typeof i === 'number' ?
                    i : 0;
            };

            var cols = [4, 5]; // your columns position will come in this array

            for (let index = 0; index < cols.length; index++) {
                var col_data = cols[index];
                // Total over all pages
                total = api
                    .column(col_data)
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

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

                // Update footer
                $(api.column(col_data).footer()).html(
                    'Total: ' + pageTotal + ' ( GrandTotal: ' + total + ' )'
                );
            }

        },

    } );
} );

Jquery Datatables无法获得多列的总和值

3 个答案: