DataTables.net table 页脚中的列总和

Question

我在将每列的总和值 class "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。它的 - 元素显示为空。

请注意，下面的代码片段工作正常，但我想用 class 对每一列求和。

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

您的 table 操作代码只需要在初始化 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 属性可让您定义页脚显示回调函数，该函数将在每个 "draw" 事件中调用。

initComplete 和 footerCallback 之间的区别在于 initComplete 被调用一次，而 footerCallback 在每个 "draw" 事件中被调用。

如果您要显示整个 table 的总和，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);
        });
    }

DataTables.net table 页脚中的列总和

DataTables.net table column sum in footer

javascript

jquery

datatables

jquery-datatables

编辑 - 解决方法：