Javascript 数据表动态更新总计

我正在根据一些条件（现金/卡）计算页面负载的一些总计。这很好。现在，我需要在搜索时动态更改它们

将使用默认搜索输入和日期选择器执行搜索。搜索似乎工作正常，但不断变化的总数却没有

我有它的大部分工作和我的代码如下

感谢您的帮助

html

$（文档）.ready（函数（）{
$（'.input daterange input'）。每个（函数（）{
$（this.datepicker（'clearDates'）；
});
$（'#记录'）。数据表({
“footerCallback”：函数（行、数据、开始、结束、显示）{
var api=this.api（），
数据；
设cashtottalvalue=0；
设cardTotalValue=0；
设min=$（“#min date”）.val（）？$（“#min date”）.val（）.split（“-”）：；
设max=$（'#max date'）.val（）？$（'#max date'）.val（）.split（“-”）：；
min=min？新日期（min[1]+'/'+min[0]+'/'+min[2]）：“”；
max=max？新日期（max[1]+'/'+max[0]+'/'+max[2]）：“”；
api.rows（）.eq（0）.each（函数（索引）{
var row=api.row（索引）；
var createdAt=row.data（）.datePaid.split（“-”）| | 0；//表中的日期列
createdAt=新日期（createdAt[1]+'/'+createdAt[0]+'/'+createdAt[2]）；
如果（（分钟==“”| |时刻（createdAt）.isSameOrAfter（分钟））&&
（最大值==“”| |力矩（createdAt）.isSameOrBefore（最大值）））{
//“type”列是#5，但数组是基于0的，所以减去1
如果（row.data（）.paymentType=='Cash'）{
//“amount”列是#3，但数组是基于0的，所以减去1
设poundAmount=row.data（）.amount；
设金额=0；
如果（以英镑计的起始金额）{
金额=parseFloat（poundAmount.子字符串（1））；
}否则{
金额=浮动（磅数）；
}
//控制台日志（金额）；
现金总额+=金额；
}
如果（row.data（）.paymentType=='Card'）{
//“amount”列是#3，但数组是基于0的，所以减去1
设poundAmount=row.data（）.amount；
设金额=0；
如果（以英镑计的起始金额）{
金额=parseFloat（poundAmount.子字符串（1））；
}否则{
金额=浮动（磅数）；
}
//控制台日志（金额）；
cardTotalValue+=金额；
}
$（'#totalCash'）.html（'totalCash:'+cashTotalValue.toFixed（2））；
$（'#totalCard'）.html（'totalCard:'+cardTotalValue.toFixed（2））；
}
});
/*$（'#totalCash'）.html（'totalCash:'+cashTotalValue.toFixed（2））；
$（'#totalCard'）.html（'totalCard:'+cardTotalValue.toFixed（2））*/
},
“命令”：[
[0，“描述”]
],
“栏目”：[{
数据：“已付款”
},
{
数据：“发票”
},
{
数据：“金额”
},
{
数据：“chargeType”
},
{
数据：“paymentType”
},
],
“columnDefs”：[{
目标：[0]，
类型：“日期eu”
}],
});
//扩展数据表搜索
$.fn.dataTable.ext.search.push(
功能（设置、数据、数据索引）{
var min=$（“#min date”）.val（）？$（“#min date”）.val（）.split（“-”）：；
var max=$（'#max date'）.val（）？$（'#max date'）.val（）.split（“-”）：；
var createdAt=data[0]。拆分（“-”）| | 0；//表中的日期列
createdAt=新日期（createdAt[1]+'/'+createdAt[0]+'/'+createdAt[2]）
min=min？新日期（min[1]+'/'+min[0]+'/'+min[2]）：“”；
max=max？新日期（max[1]+'/'+max[0]+'/'+max[2]）：“”；
如果(
（最小值==“”|最大值==“”）||
（力矩（createdAt）.isSameOrAfter（最小值）和力矩（createdAt）.isSameOrAfter（最大值））
) {
返回true；
}
返回false；
}
);
//当a日期范围过滤器更改时，重新绘制表格
$（'.date range filter'）.change（函数（）{
$（“#记录”）.DataTable（）.draw（）；
});
});

到




日期
号码
价格
地位
类型
日期
号码
价格
地位
类型
27-03-2019
521735
£5.20
逾期的
卡片
27-03-2019
513938
£1.20
逾期的
现金
27-03-2019
523693
£0.20
逾期的
现金
27-03-2019
493645
£0.10
逾期续签
现金
27-03-2019
521734
£0.20
逾期的
卡片
27-03-2019
493646
£0.10
逾期续签
现金
27-03-2019
523691
£0.10
逾期续签
卡片
27-03-2019
523692
£0.10
逾期续签
卡片
26-03-2019
523694
£0.20
逾期的
现金
26-03-2019
506326
£1.20
逾期的
卡片
为了避免在非常基本的一行代码周围制造大量烟雾，我将在一个示例上演示我的解决方案，当然，您会理解这个想法，这非常简单-使用
drawCallback刷新每个表的总计重绘（每次都会通过过滤触发）
：


//表源数据
常数srcData=[
{项目：'苹果'，类别：'水果'，数量：5}，
{项目：'香蕉'，类别：'水果'，数量：4}，
{项目：'梨'，类别：'水果'，数量：8}，
{项目：'胡萝卜'，类别：'蔬菜'，数量：4}，
{项目：'卷心菜'，类别：'蔬菜'，数量：7}
];
//初始化数据表
const dataTable=$（“#mytable”）.dataTable({
dom：‘ft’，
数据：srcData，
列：Object.keys（srcData[0]）.map（key=>（{title:key，data:key}）），
//在eac上刷新您的总数