数据表显示所有行的总和，而不是当前显示的行
我用jQuery创建了数据表，它有七列。但它有约。 24行。最初，将显示前八行。表格末尾有“显示更多”链接。如果用户单击该链接，则将显示另外八行。 数据表的第六列具有“到期金额”值，其具有“总到期等级”类。我试图在页面底部显示当前显示的第六列行的总和。例如，最初将显示八行，因此将仅显示八行的总和。当用户点击“显示更多”链接时，将显示另外八行，因此将显示十六行的总和。 我编写了代码，但它总是显示所有24行的总和，而不是当前显示的行。 以下是数据表的HTML代码：
<table id="multiple-account-table" cellpadding="0" cellspacing="0" class="wide100">
<thead>
<tr>
<th><input type="checkbox" id="select-all-statement" value="" /></th>
<th id="acc-num">Account Number</th>
<th id="acc-name">Account Name</th>
<th id="alias-name">Alias</th>
<th id="dueDate-column">Due Date</th>
<th id="totalDue-column" >Total Due</th>
<th id="payment-column" class="black white-active-bg pad-bottom-0-5">Payment Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Total</th>
<th id="total-due-footer"></th>
<th id="payment-footer"></th>
</tr>
</tfoot>
</table>
以下是javascript代码：
$( document ).ready(function() {
generateTable();
var sum = 0.00;
$(this).find(".total-due-class").each(function(){
var temp = $(".total-due-class").html();
sum += parseFloat(temp.substring(1));
});
$("#total-due-footer").html("$"+sum);
});
对此有何建议？ 下面是generateTable（）
中jquery-datatable的代码function generateTable(){
var index = -1;
$('#multiple-account-table').dataTable({
"data": [
{"accountNumber":"034-202553701","name":"Account 1","alias":"dummy1","dueDate":"10/19/2016","statementBalance":"34.60"},
{"accountNumber":"678-202553702","name":"Account 2","alias":"dummy 2","dueDate":"10/19/2015","statementBalance":"14.50"},
{"accountNumber":"989-202553703","name":"Account 3","alias":"Atlanta 3","dueDate":"10/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553704","name":"Account 4","alias":"dummy4","dueDate":"10/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553705","name":"Account 5","alias":"Atlanta 5","dueDate":"09/19/2016","statementBalance":"100.50"},
{"accountNumber":"131-202553706","name":"Account 6","alias":"Atlanta 6","dueDate":"12/19/2017","statementBalance":"18.50"},
{"accountNumber":"131-202553707","name":"Account 7","alias":"Atlanta 7","dueDate":"01/01/2015","statementBalance":"105.50"},
{"accountNumber":"131-202553708","name":"Account 8","alias":"Atlanta 8","dueDate":"10/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553709","name":"Account 9","alias":"Atlanta 9","dueDate":"10/07/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553710","name":"Account 10","alias":"Atlanta 10","dueDate":"10/19/2016","statementBalance":"15.50"},
{"accountNumber":"131-202553711","name":"Account 11","alias":"Atlanta 11","dueDate":"10/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553712","name":"Account 12","alias":"Atlanta 12","dueDate":"04/04/2016","statementBalance":"115.50"},
{"accountNumber":"131-202553713","name":"Account 13","alias":"Atlanta 13","dueDate":"05/19/2015","statementBalance":"25.50"},
{"accountNumber":"131-202553714","name":"Account 14","alias":"Atlanta 14","dueDate":"03/19/2015","statementBalance":"135.50"},
{"accountNumber":"131-202553715","name":"Account 15","alias":"Atlanta 15","dueDate":"10/19/2017","statementBalance":"15.50"},
{"accountNumber":"131-202553716","name":"Account 16","alias":"Atlanta 16","dueDate":"10/19/2015","statementBalance":"08.50"},
{"accountNumber":"131-202553717","name":"Account 17","alias":"Atlanta 17","dueDate":"10/08/2015","statementBalance":"10.50"},
{"accountNumber":"131-202553718","name":"Account 18","alias":"Atlanta 18","dueDate":"09/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553719","name":"Account 19","alias":"Atlanta 19","dueDate":"10/05/2015","statementBalance":"15.80"},
{"accountNumber":"131-202553720","name":"Account 20","alias":"Atlanta 20","dueDate":"10/19/2015","statementBalance":"39.50"},
{"accountNumber":"131-202553721","name":"Account 21","alias":"Atlanta 21","dueDate":"10/21/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553722","name":"Account 22","alias":"Atlanta 22","dueDate":"10/19/2016","statementBalance":"15.50"},
{"accountNumber":"131-202553723","name":"Account 23","alias":"Atlanta 23","dueDate":"10/19/2015","statementBalance":"32.50"},
{"accountNumber":"131-202553724","name":"Account 24","alias":"Atlanta 24","dueDate":"12/29/2016","statementBalance":"105.50"}
],
"dom": 'it',
"pageLength": 8,
"language": {
"info": "Viewing accounts 1 - _END_ of _TOTAL_ ",
"emptyTable": "No records are available",
},
"columns": [
{"data": null},
{"data": "accountNumber"},
{"data": "name"},
{"data": "alias"},
{"data": "dueDate"},
{"data": "statementBalance"},
{"data": null}
],
"columnDefs": [
{className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4,5,6]},
{
'targets': 0,
'orderable': false,
'render': function(data, type, full, meta) {
++index;
return '<input type="checkbox" id="select-checkbox'+index+'" name="payment-checkbox" class="multi-checkbox"/>';
}
},
{
'targets': 1,
'render': function(data, type, full, meta) {
return '<span id="pdf" class="stmt-identifier">'+data+'</span>';
}
},
{
'targets': 4,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).text(sData);
}
},
{
'targets': 5,
'orderable': false,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html('<span class="total-due-class">$'+sData+'</span>');
}
},
{
'targets': 6,
'searchable':false,
'orderable':false,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html('<span class="dollar-font">$<input type="number" id="payement-textbox" class="payment" value="" name="payment-textbox" /></span>');
}
}
],
"aaSorting": [[4, 'asc'], [5,'desc'], [1,'asc'] ]
}); //End of datatable function
$('#multiple-account-table_wrapper').append('<span id="md-table-load-more" style="display: none;" class="see-more text-center pad-1 link-enabled bold">Show More</span>');
updateShowMoreLink();
}
2 个答案:
答案 0 :(得分：0)
您的代码似乎缺少某些部分，您可以将您的JS代码更改为：
$('#multiple-account-table tbody').find(".total-due-class").each(function(index, item){
var temp = $(item).text();
sum += parseFloat(temp.substring(1));
});
哪个应该只匹配当前视图中的行。
答案 1 :(得分：0)
datatables网站上有一个例子可以完全满足您的需求。
上查看它将计算当前显示的所有列和列的总和。您也可以自由修改显示内容和方式。
编辑：
将以下部分添加到表的生成过程中：
"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(5, {page: 'current'})
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(5).footer()).html('$' + pageTotal);
}
并从文档就绪处理程序中删除以下部分
var sum = 0.00;
$(this).find(".total-due-class").each(function(){
var temp = $(".total-due-class").html();
sum += parseFloat(temp.substring(1));
});
$("#total-due-footer").html("$"+sum);
给出了下面显示的结果，这应该是你想要的：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？