DataTables.net表格列在页脚中加总
我在插入每个列的总和值（类“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”循环多个列…
只有在初始化DataTable时才需要执行表操作代码（请参阅initComplete属性）。
还要确保在
定义了
块，否则将没有页脚。
否则你非常接近解决方案，请参阅下面的更正代码：
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在每个“draw”事件中被调用一次并且footerCallback被调用。
如果要显示整个表的总和， initComplete就足够了。 否则，如果您需要仅显示与当前页面相关的页脚数据（如在页脚回调示例中 ），请改用footerCallback 。
混合。 空替换为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); }); }