我尝试使用我现有的代码,该代码适用于一个列的总和,以便将总和显示在两列中 - 我试图将它们放在一个数组中,但它不起作用。是不是可以为此使用简单的阵列解决方案?
这是https://jsfiddle.net/setbon/3mvmhL1v/
这是JS:
$(document).ready(function() {
var table = $('#example').DataTable( {
rowReorder: {
selector: 'td:nth-child(2)'
},
responsive: true,
scrollX: true,
scrollY: "80vh",
scrollCollapse: true,
paging: true,
lengthChange: false,
lengthMenu: [ [10, 25, -1], [10, 25, "All"] ],
"order": [[ 0, "asc" ]],
"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 all pages
total = api
.column( [3,4] )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( [3,4], { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( [3,4] ).footer() ).html(
total
);
},
buttons: ['pdf']
} );
table.buttons().container()
.appendTo( '#example_wrapper .small-6.columns:eq(0)' );
}); (文档)$ .foundation();
因为我希望总结一个以上的列,我现在需要每https://datatables.net/plug-ins/api/sum()使用一个额外的插件?即使对于那个插件,我也找不到一个总结了多个列的示例,我可以复制并轻松自定义。
In this SO question代码与我的代码非常不同,让我感到困惑。另外this SO answer is difficult for me to understand and I don't know how to apply to resolve my problem
答案 0 :(得分:1)
工作示例:https://jsfiddle.net/guanzo/wx5mr9vs/1/
如果我理解正确,你需要2列中相同的金额。这很容易实现,您不需要插件。
首先,你的一行编号为8,有“东京”而不是工资编号。这就是你的jsfiddle中有$ NaN的原因。
其次,api.column()
用于选择单个列。要选择多个列,只需将函数调用复数api.columns([3,4])
即可。在你提供的jsFiddle中,你只有4列,这意味着你没有第4列索引,所以我做了
$( api.columns([2,3]).footer() ).html(
'$'+total
);
文档组织良好:https://datatables.net/reference/api/
编辑:每个列页脚都包含它自己的总和
https://jsfiddle.net/3mvmhL1v/4/
基本上,您需要分别对每列执行求和操作。 将两列的总和组合成一个变量对你没有帮助。
var sumColumns = [3,4]
sumColumns.forEach(function(colIndex){
// Total over all pages
var total = api
.column(colIndex)
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.columns(colIndex).footer() ).html(
total
);
})