DataTables.net 表页脚中的列总和 [英] DataTables.net table column sum in footer
问题描述
我在将每列的总和值(类别为sum")插入其页脚时遇到了一个小细节问题.
I'm having issues with a tiny detail in inserting the sum value of each column, with class "sum", into its footer.
代码(或多或少直接取自 DataTables.net)如下:
The code (more or less taken straight from DataTables.net) goes:
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.它的 -element 显示为空.
"sum" has the correct value but is somehow not inserted into the footer! I.e. its -element shows up empty.
请注意，下面的代码段工作正常，但我想用类 sum 对每一列求和.
Note that the snippet below works fine, but I want to sum each column with class 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.见下面的代码:
I moved the code to where the DataTable is initialized and went with footerCallback instead. See below code:
"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 文件可能与其中的一些有关).
Somehow now the value is inserted into the right tfoot element. Still no idea why it wouldn't work in the first place (but as mentioned in comment order of including JS-files could have had to do with some of it).
现在我只需要弄清楚如何使用 class="sum"...
Now I just have to figure out how to loop multiple columns with class="sum"...
推荐答案
你的表操作代码只需要在 DataTable 初始化时执行，(见 initComplete 属性).
Your table manipulation code needs to be executed only when DataTable is initialized, (see initComplete property).
还要确保您在 Also make sure you have 否则你已经非常接近解决方案了，请看下面更正后的代码: Otherwise you were very close to the solution, please see below the corrected code: 有关示例，请参见 此 JSFiddle. 更新 还有 footerCallback 属性可让您定义页脚显示回调函数，该函数将在每个平局"事件. There is also footerCallback property that lets you defined footer display callback function which will be called on every "draw" event. The difference between 如果您要显示整个表的总和， If you're displaying the sum for the whole table, 这篇关于DataTables.net 表页脚中的列总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 中定义了
<tfoot></tfoot> block defined in your <table> otherwise there would be no footer.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);
});
}
});
initComplete 和 footerCallback 的区别在于 initComplete 被调用一次，而 footerCallback 在每次绘制"时被调用事件.initComplete and footerCallback is that initComplete is called once and footerCallback on every "draw" event. initComplete 就足够了.否则，如果您只需要在与当前页面相关的页脚数据中显示(如 页脚回调示例)，改用 footerCallback.initComplete should suffice. Otherwise if you require to show in the footer data relevant for current page only (as in Footer callback example), use footerCallback instead.
登录
关闭
