对 jQuery 数据表中的所有选定行求和
Sum all selected rows in jQuery Datatables
我有一个金额列,并使用此 https://datatables.net/examples/advanced_init/footer_callback.html 来计算页脚中页内和页外的总数。
还有这个例子,它提醒页面和页面外的总金额。https://datatables.net/examples/plug-ins/api.html
我试图实现的是如何对工资列的选定行的值求和
这是我在 jsfiddle 上构建的一个,行选择完成,页脚总数完成。
但是我不知道如何在左下角单元格中添加所选行总数的总和值
http://jsfiddle.net/ebRXw/190/
$('#example').dataTable( {
"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
total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
// Total over this page
pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}
} );
$('#example tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
} );
在 th
元素中添加显示总和的 .sum
类。此外,创建一个 sum
变量并在 javascript 代码的顶部对其进行初始化。然后,将切换selected
类的代码更改为以下内容:
$('#example tbody').on('click', 'tr', function () {
var price = parseInt(($(this).find('td').last().html()).replace(/'$|,/g, ''));
if($(this).hasClass('selected')) {
sum -= price;
} else {
sum += price;
}
$('.sum').html(sum);
$(this).toggleClass('selected');
} );
这是一个工作 JFiddle
试试这个工作演示
$('#example tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
$('#button').trigger('click');
console.log($('tfoot tr > th').eq(1).html( '$'+ $('#selectedtotal').html()));
});
var totalSUM = 0;
$("tbody tr.selected").each(function () {
var getValue = $(this).find("td:eq(4)").html().replace("$", "");
var filteresValue = getValue.replace(/',/g, '');
totalSUM += Number(filteresValue)
console.log(filteresValue);
});
alert(totalSUM);
JS 小提琴
您可以检查是否已通过 $(this)[0].classList.contains("selected")
选择一行。然后将行$(this).find(':nth-child(5)')
的第 5 列的量与$('sum')
的量相加:
if($(this)[0].classList.contains("selected"))
{
$('#sum').html(
parseFloat($('#sum').html()) +
parseFloat($(this).find(':nth-child(5)').html().replace(/[$,]/g, "")));
}
else
{
$('#sum').html(
parseFloat($('#sum').html()) -
parseFloat($(this).find(':nth-child(5)').html().replace(/[$,]/g, "")));
}
这是一个演示
相关文章:
- 如何在php中的jquery中对循环内的选择框值求和
- 如何在jquery中使用实时计算求和值
- 如何使用jquery对货币格式的数字求和
- jQuery根据相关复选框选择求和单元格
- 如何使用jquery对具有相同类的文本框的值求和并将其放入另一个文本框中
- 使用绑定的简单JavaScript/jQuery求和函数
- 对 jQuery 数据表中的所有选定行求和
- 如何在ajax请求和it上测试并获得完整的代码覆盖率's使用Jasmine和Blanket.js对jQuery
- 使用jquery进行一些求和和和乘法运算
- jquery:动态删除内容后求和得到NaN
- Jquery 对具有逗号的值求和,如果有十进制值则求和
- 如何使用挖空或 jquery 对数据绑定列求和
- 约束随机数总是用javascript/jquery对约束求和
- 如何使用onchange在jquery中创建自动求和
- 使用 jQuery 对嵌套表中的值求和
- 如何使用Javascript或jQuery求和单选按钮值
- jQuery No Ui Slider,如何锁定多个互连的滑块以始终求和100
- 使用jQuery从TR求和
- 在jquery中,代码希望按列对除第一行以外的所有数据求和.我如何通过以下代码实现它
- 使用jQuery对两个文本输入的值求和