[英]How can I add a subtotal and a grandtotal to my table using DataTables “jQuery Plug-in?”
I am trying to use Datatables plug-in to display data for a report. 我正在尝试使用Datatables插件显示报告的数据。
I like to add 2 footer rows to my table, the first one for a subtotal "totals from the current page" and another row for Granttotal "Totals from all the pages" 我想在表格中添加2个页脚行,第一个为小计“当前页面总计”,另一行为Granttotal“所有页面总计”
I followed this example in the docs to attempt to add the rows, but for some reason the footer is not showing up. 我按照文档中的此示例尝试添加行,但是由于某些原因,页脚未显示。
I populate the datatable on the fly using Ajax Request after the DataTable is initilized. 在初始化DataTable之后,我会使用Ajax Request即时填充数据表。 Below is my current code. 以下是我目前的代码。
Here is my Html markup 这是我的HTML标记
<table id="reportTable" class="table table-striped " cellspacing="0" style="width: 100%;">
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
Here is my JavaScript code 这是我的JavaScript代码
$(function(e) {
$(window).load(function (e) {
$('#reportTable').DataTable({
pageLength: 50,
lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
order: [ [ 2, 'desc' ] ],
columns: [
{ data: 'chain_name', title: 'Chain Name', width: '20%'},
{ data: 'store_id' , title: 'Store Number' },
{ data: 'completed', title: 'Total Completed' },
{ data: 'initial_quota', title: 'Target To Complete' },
{ data: 'total_callable', title: 'Total In Queue' },
{ data: 'current_status', title: 'Current Status' },
{ data: 'wgtstamp', title: 'Weight' }
]
,
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
var completedSubTotal = api
.column(2)
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total over this page
var completedGrandTotal = api
.column(2, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer with a subtotal
$(api.column(2).footer()).html(completedSubTotal);
// Update footer with a grand total
$(api.column(2).footer()).html(completedGrandTotal);
}
});
});
$('input:search').on('keyup', function () {
$('#reportTable').DataTable().search(this.value).draw();
});
$('#CampaignMenu').change(function(e) {
$('#reportTable').DataTable().clear().draw();
var campId = $(this).val();
if (campId != '0') {
$.ajax({
type: 'POST',
url: '@Url.RouteUrl("AccountQuotaDashboard.GetReportData")',
data: { 'campaign_id': campId },
dataType: 'json',
success: function (json) {
if (json && !$.isEmptyObject(json)) {
var table = $('#reportTable').dataTable().fnAddData(json);
}
}
});
}
});
});
How can I correctly add 2 footer row to my data table? 如何正确在数据表中添加2页脚行?
UPDATED 更新
I created a filddle to show you the code in action http://live.datatables.net/yubuyewi/2 . 我创建了一个漏洞来向您展示实际使用中的代码http://live.datatables.net/yubuyewi/2 。 As you can see everything is working except for the total rows 如您所见,除了总行之外,其他所有东西都在工作
You need to change the tfoot
section of your table and add a tr
and th
Inorder to get the sub total and grand total like this. 您需要更改表格的tfoot
部分,并添加tr
和th
,以便像这样获得小计和总计。
<tfoot><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>
Also you have swapped the sub total and grand total calculation. 另外,您已交换了小计和总计计算。
In grand total calculation, you have used page: current
which should be used in sub total calculation. 在总计计算中,您使用了page: current
应在子总计计算中使用的page: current
。
Corrected the script and the new fiddle is here 更正了脚本,新的小提琴就在这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.