编辑 - 解决方法：

Question

我在插入每列的总和值时遇到一些细节问题，并将＃34; sum＆＃34;添加到其页脚中。

代码（或多或少直接来自DataTables.net）：

＆＃13;

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

＆＃13;

＆＃34;和＆＃34;具有正确的值，但不知何故没有插入页脚！即它的元素显示为空。

请注意，下面的代码段工作正常，但我希望将每个列与类和相加。

＆＃13;

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

＆＃13;

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

编辑 - 解决方法：

我将代码移动到初始化DataTable的位置，然后使用footerCallback。见下面的代码：

＆＃13;

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

＆＃13;

现在不知何故，该值被插入到右脚部元素中。仍然不知道为什么它首先不起作用（但是在包含JS文件的评论顺序中提到它可能与其中一些有关）。

现在我只需要弄清楚如何使用class =＆＃34来循环多个列;总和＆＃34; ...

Answer 1

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

另外，请确保<tfoot></tfoot>中已定义<table>阻止，否则将无页脚。

否则您非常接近解决方案，请参阅下面的更正代码：

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属性允许您定义页脚显示回调函数，该函数将在每个＆＃34; draw＆＃34;事件。

initComplete和footerCallback之间的区别在于initComplete被调用一次而footerCallback被调用每个＆＃34; draw＆＃34;事件。

如果您要显示整个表格的总和，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表格列在页脚中加总

编辑 - 解决方法：

2 个答案: