Datatables:监听行内文本框，进行行内数据修改；计算行总和

一、监听行内文本框，进行行内数据修改

效果

修改数量、单价会自动计算金额（金额=数量*单价）

实现

1、增加行的class

2、数据监听、修改数值

"initComplete": function() {// 监听数量和单价输入框的变化$(document).on('input', '.quantity, .price', function() {var row = $(this).closest('tr');var quantity = parseFloat(row.find('.quantity').val()) || 0;var price = parseFloat(row.find('.price').val()) || 0;var lineAmount = quantity * price;// 更新金额输入框row.find('.line_amount').val(lineAmount.toFixed(2));});}

解决新增行或删除行，数据丢失

"initComplete": function() {$(document).on('input', '.quantity, .price', function() {var row = $(this).closest('tr');var quantity = parseFloat(row.find('.quantity').val()) || 0;var price = parseFloat(row.find('.price').val()) || 0;var lineAmount = quantity * price;// 更新金额输入框row.find('.line_amount').val(lineAmount.toFixed(2));// 更新 allData 数组中的 line_amountvar rowIndex = row.index();let allData = table.rows().data().toArray();allData[rowIndex].line_amount = lineAmount.toFixed(2);});
}

 

二、计算行总和

效果

方法一：遍历求和

 遍历全部金额特有的选择器（这里使用的是class="line_amount"），进行累加

"initComplete": function() {// 获取总金额function getallcount() {var total = 0;//遍历所有class="line_amount"的值，进行累加$('.line_amount').each(function() {var amount = parseFloat($(this).val());if (!isNaN(amount)) {total += amount;}});console.log(total)}
}

在需要的地方进行引用

例如

"initComplete": function() {$(document).on('input', '.quantity, .price', function() {var row = $(this).closest('tr');var quantity = parseFloat(row.find('.quantity').val()) || 0;var price = parseFloat(row.find('.price').val()) || 0;var lineAmount = quantity * price;// 更新金额输入框row.find('.line_amount').val(lineAmount.toFixed(2));// 更新 allData 数组中的 line_amountvar rowIndex = row.index();let allData = table.rows().data().toArray();allData[rowIndex].line_amount = lineAmount.toFixed(2);// 更新总和getallcount();});
}

方法二：使用DataTable的draw 事件

var table = $('#mytable').DataTable({// ... 其他配置 ..."initComplete": function(settings, json) {// ... 初始化代码 ...// 绑定 draw 事件table.on('draw', function() {var api = this.api();//例如获取第列的总和var total = api.column(7).data().reduce(function(a, b) {return a + (b ? parseFloat(b) : 0);}, 0);console.log(total.toFixed(2));});}
});