页脚中的 DataTables.net 表列总和

Question

在将每列的总和值（类“sum”）插入其页脚时，我遇到了一个小细节问题。

代码（或多或少直接取自 DataTables.net）如下：

var table = $('#example').DataTable();
        table.columns('.sum').each(function (el) {
            var sum = table
                .column(el)
                .data()
                .reduce(function (a, b) {
                    return parseInt(a, 10) + parseInt(b, 10);
                });
            $(el).html('Sum: ' + sum);
        });

"sum" 具有正确的值，但不知何故没有插入​​到页脚中！ IE。它的元素显示为空。

请注意，下面的 sn-p 可以正常工作，但我想将每一列与类 sum 相加。

var table = $('#example').DataTable();
var column = table.column(4);

$(column.footer()).html(
    column.data().reduce(function (a, b) {
        return parseInt(a, 10) + parseInt(b, 10);
    })
);

/////////////////////////////////////// ////////////////////////////////

编辑 - 解决方法：

我将代码移至初始化 DataTable 的位置，并改为使用 footerCallback。见以下代码：

"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 this page
                    pageTotal = api
                        .column('.sum', { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column('.sum').footer()).html(pageTotal);
                }

现在不知何故，这个值被插入到了右边的 tfoot 元素中。仍然不知道为什么它一开始就不起作用（但正如评论顺序中提到的，包括 JS 文件可能与其中一些有关）。

现在我只需要弄清楚如何使用 class="sum" 循环多列...

Answer 1

只有在初始化 DataTable 时才需要执行您的表操作代码（参见initComplete 属性）。

还要确保在 <table> 中定义了 <tfoot></tfoot> 块，否则将没有页脚。

否则你很接近解决方案，请看下面更正的代码：

var table = $('#ticketTable').DataTable({
    'initComplete': function (settings, json){
        this.api().columns('.sum').every(function(){
            var column = this;

            var sum = column
                .data()
                .reduce(function (a, b) { 
                   a = parseInt(a, 10);
                   if(isNaN(a)){ a = 0; }                   

                   b = parseInt(b, 10);
                   if(isNaN(b)){ b = 0; }

                   return a + b;
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }
});

有关示例，请参阅 this JSFiddle。

更新

还有footerCallback 属性可以让您定义页脚显示回调函数，该函数将在每个“绘制”事件上调用。

initComplete 和footerCallback 之间的区别在于initComplete 被调用一次，而footerCallback 在每个“绘制”事件中被调用。

如果您要显示整个表格的总和，initComplete 就足够了。否则，如果您只需要在与当前页面相关的页脚数据中显示（如Footer callback example），请改用footerCallback。

Answer 2

混合。空替换为0

"initComplete": function (settings, json) {
        this.api().columns('.sum').every(function () {
            var column = this;

            var intVal = function (i) {
                return typeof i === 'string' ?
                i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            var sum = column
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }