使用footer_callback在datatables页脚中的1+列上求和?

时间:2016-10-14 02:39:16

标签: jquery html datatable datatables

给出这个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在这个小提琴中,它正在第5组中工作但是如何让它在第3组中工作?

2 个答案:

答案 0 :(得分:3)

查看fiddle here。我正在使用sum plugin。使用这种方法,您只需将一个列索引添加到数组即可。

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

concurrent.futures.ProcessPoolExecutor

答案 1 :(得分:0)

<块引用>

只需复制并过去“footerCallback”,然后在 cols 变量中给出您的列位置。它会休息

$(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 + ' )'
                );
            }

        },

    } );
} );