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"具有正确的值,但不知何故未插入页脚!即它的元素显示为空.

请注意,下面的代码段工作正常,但我想用类和求和每列.

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

不知何故,现在将值插入到右脚部元素中.仍然不知道为什么它不会起作用(但正如在包含JS文件的评论顺序中提到的那样可能与其中一些有关).

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

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

请参阅此JSFiddle以获取示例.

UPDATE

还有footerCallback属性,它允许您定义页脚显示回调函数,该函数将在每个"draw"事件中调用.

之间的区别initComplete和footerCallback是initComplete被调用一次,footerCallback在每一个"画"事件.

如果你显示整个表的总和,initComplete就足够了.否则,如果您只需要在与当前页面相关的页脚数据中显示(如在页脚回调示例中),请footerCallback改用.