jquery - 在 AJAX 调用响应之后,列总和未显示在 jQuery 数据表的页脚中?
问题描述
我有一个数据表,其中单击按钮 AJAX 调用将触发,响应将显示在数据表中。我想要页脚中列数据的总和,但页脚没有显示问题是什么?
HTML
<table id="viewDetailsDatatable" align="center" class="display" cellspacing="0" width="100%">
<thead>
<tr class="boxheadingsmall" style="font-size: 11px;">
<th style="text-align:center;" data-orderable="false">Date</th>
<th style="text-align:center;" data-orderable="false">S Count</th>
<th style="text-align:center;" data-orderable="false">S Amount</th>
<th style="text-align:center;" data-orderable="false">R Count</th>
<th style="text-align:center;" data-orderable="false">R Amount</th>
<th style="text-align:center;" data-orderable="false">Net Amount</th>
</tr>
</thead>
<tfoot>
<tr class="boxheadingsmall">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
数据表代码
$(function() {
$('#viewAmountDetails').on('click', function() {
var test1 = document.getElementById("input1").value;
var test2 = document.getElementById("input2").value;
var test3 = document.getElementById("input3").value;
var test4 = document.getElementById("input4").value;
var test5 = document.getElementById("input5").value;
var test6 = document.getElementById("input6").value;
table = $('#viewDetailsDatatable').DataTable({
"columnDefs": [
{
"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 S Count
total = api.column(1).data().reduce(
function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total S Count
pageTotal = api.column(1, {
page : 'current'
}).data().reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total S Count Update footer
$(api.column(1).footer()).html(
'' + pageTotal.toFixed(2) + ' ' + ' ');
// Total s amount
total = api.column(2).data().reduce(
function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total s amount
pageTotal = api.column(2, {
page : 'current'
}).data().reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total s amount Update footer
$(api.column(2).footer()).html(
'' + pageTotal.toFixed(2) + ' ' + ' ');
// Total r count
total = api.column(3).data().reduce(
function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total r count
pageTotal = api.column(3, {
page : 'current'
}).data().reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total r count Update footer
$(api.column(3).footer()).html(
'' + pageTotal.toFixed(2) + ' ' + ' ');
// Total r amount
total = api.column(4).data().reduce(
function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total r amount
pageTotal = api.column(4, {
page : 'current'
}).data().reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total r amount Update footer
$(api.column(4).footer()).html(
'' + pageTotal.toFixed(2) + ' ' + ' ');
// Total net amount
total = api.column(5).data().reduce(
function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total net amount
pageTotal = api.column(5, {
page : 'current'
}).data().reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total net amount Update footer
$(api.column(5).footer()).html(
'' + pageTotal.toFixed(2) + ' ' + ' ');
},
"className": "dt-center",
"targets": "_all"
}
],
dom: 'BTrftlpi',
"searching": false,
"paging": false,
destroy: true,
ajax: function (data, callback, settings) {
$.ajax({
"url": "abc.JSON",
"type": "POST",
"timeout" : 0,
"data": {
"test1": test1,
"test2": test2,
"test3": test3,
"test4": test4,
"test5":test5,
"test6" : test6,
},
success:function(data){
callback(data);
},
error:function(data) {
alert("Unable to fetch data");
}
});
},
"columns": [
{ "data": "cDate" },
{ "data": "sCount" },
{ "data": "sAmount" },
{ "data": "rCount" },
{ "data": "rAmount" },
{ "data": "netAmount" }
]
});
});
});
我的代码在我使用的 HTML 和 ajax 上面,但仍然无法正常工作。我想要页脚中的列总和,我缺少什么请帮忙?
解决方案
做这个例子:
const Table = $('#foo').DataTable({
. . . . . .,
. . . . . .,
drawCallback: function(){
Table.columns(5, {
page: 'current'
}).every(function() {
var sum = this
.data()
.reduce(function(a, b) {
var x = parseFloat(a) || 0;
var y = parseFloat(b) || 0;
return x + y;
}, 0);
console.log(sum);
$(this.footer()).html(sum);
});
}
});
在这种情况下,该列是第 5 列
推荐阅读
- python - 数据框的箱线图未正确绘制
- c# - ServiceStack 会话时间增加
- go - 如何使用对象而不是字节发送新请求?
- javascript - Javascript:HTML5 Canvas 和带有 getElementById 的 id 循环
- twitter-bootstrap-3 - 带有 Bootsrap 问题的 Cakephp 3 分页器模板与 sort()
- python - Windows下带有时间戳的python zip解压
- dart - Flutter 隔离与未来
- python - 如何获取包含 csv 文件的列中的单元格
- python - 将 MatplotLib 或自定义颜色图应用于 OpenCV 图像
- javascript - 如何制作嵌套列表?