jquery - 使用 footer_callback 对数据表页脚中的 1+ 列求和？

Question

鉴于此footer_callback数据表示例这是我的FIDDLE .

这基本上是 1 列每列总数的总和。 谁能告诉我如何对超过 1 列执行此操作？

我想我可能需要为我想要求和的列添加更多th标签:

    <tfoot>
        <tr>
            <th colspan="4" style="text-align:right">Total:</th>
            <th></th>
        </tr>
    </tfoot>

并为每列添加另一个回调函数，但到目前为止我还没有感到高兴。 有人可以建议吗？

        "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);
            }, 0 );

        // 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)'
        );
    }

注意:我可能需要表/数据集中的另一列包含可以求和的数字。
更改了表格，因此有 2 列可以求和 FIDDLE 。在这个 fiddle 中，它在第 5 列中工作，但我如何让它在第 3 列中工作？

Answer 1

查看 fiddle here 。我正在使用sum plugin 。通过这种方法，您只需向数组添加列索引即可对其进行求和。

我还添加了“已应用”过滤器，以便过滤时总数动态更新。

$(document).ready(function() {

        // SUM PLUGIN
        jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
            return this.flatten().reduce( function ( a, b ) {
                if ( typeof a === 'string' ) {
                    a = a.replace(/[^\d.-]/g, '') * 1;
                }
                if ( typeof b === 'string' ) {
                    b = b.replace(/[^\d.-]/g, '') * 1;
                }

                return a + b;
            }, 0 );
        } );

        $('#example').DataTable({
            "footerCallback": function () {
                var api = this.api(),
                    columns = [3, 5]; // Add columns here

                for (var i = 0; i < columns.length; i++) {
                    $('tfoot th').eq(columns[i]).html('Total: ' + api.column(columns[i], {filter: 'applied'}).data().sum() + '<br>');
                    $('tfoot th').eq(columns[i]).append('Page: ' + api.column(columns[i], { filter: 'applied', page: 'current' }).data().sum());
                }
            }
        });
    });