JQuery Datatables 实现对某一列的数据合计汇总
程序员文章站
2022-07-12 21:15:34
...
有两种实现方式,举例说明
第一种、JS代码如下:
var table;
table = $('#example').DataTable({
dom: 'Bfrtip',
scrollY: true,
scrollX: true,
scrollCollapse: true,
colReorder: true,
select: true,
stateSave: true,
//info: false,//关闭左下角关于行数和选中的提示
//filter: false,//关闭搜索
//paging: false,//关闭分页
pagingType: "full_numbers",
columns: [
{ title: "Name", data: "Name", className: "center" },
{ title: "Position", data: "Position" },
{ title: "Office", data: "Office" },
{ title: "Age", data: "Age" },
{ title: "Salary", data: "Salary", className: "canEditor" },
{ title: "操作", data: null, defaultContent: "<button type='button'>编辑</button>" }
],
footerCallback: function (row, data, start, end, display) {
var api = this.api(), data;
var intVal = function (i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ? i : 0;
};
//当前页统计
total = api.column(4).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
//全部统计
pageTotal = api.column(4, { page: 'current' }).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
$(api.column(4).footer()).html(
'当前页:$' + pageTotal + ' ( 全部:$' + total + ')'
);
},
language: {
url: dtsLanguage
}
});
HTML代码如下:
<table id="example" class="table table-bordered table-condensed" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0">
<tfoot>
<tr>
<th style="border-left:0;border-right:0"></th>
<th style="border-left:0;border-right:0"></th>
<th style="border-left:0;border-right:0"></th>
<th style="border-left:0;border-right:0"></th>
<th style="border-left:0;border-right:0">数据合计:</th>
<th style="border-left:0;border-right:0"></th>
</tr>
</tfoot>
</table>
第二种方式:
var table;
table = $('#example').DataTable({
dom: 'Bfrtip',
scrollY: true,
scrollX: true,
scrollCollapse: true,
colReorder: true,
select: true,
stateSave: true,
//info: false,//关闭左下角关于行数和选中的提示
//filter: false,//关闭搜索
//paging: false,//关闭分页
pagingType: "full_numbers",
columns: [
{ title: "Name", data: "Name", className: "center" },
{ title: "Position", data: "Position" },
{ title: "Office", data: "Office" },
{ title: "Age", data: "Age" },
{ title: "Salary", data: "Salary", className: "canEditor" },
{ title: "操作", data: null, defaultContent: "<button type='button'>编辑</button>" }
],
footerCallback: function (row, data, start, end, display) {
var data = table.search();
var ds = table.search(data).context[0].aiDisplay;
var Sum = 0;
$.each(ds, function (i, e) {
var data = table.row(e).data();
Sum = Number(Sum) + Number(data.Salary);
});
$(".Sum").html(Sum);
}
language: {
url: dtsLanguage
}
});
HTML代码如下:
<table id="example" class="display table table-striped table-over table-bordered" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0">
<thead></thead>
<tbody></tbody>
<tfoot>
<tr bgcolor="#FFCC99">
<th style="border-left:0;border-right:0"></th>
<th style="border-left:0;border-right:0"></th>
<th style="border-left:0;border-right:0">合计:</th>
<th style="border-left:0;border-right:0" class="Sum"></th>
<th style="border-left:0;border-right:0"></th>
</tr>
</tfoot>
</table>