如何在DataTables过滤后对指定列进行动态求和

我明白你的问题——当前的求和逻辑会把所有行（包括过滤后隐藏的）的佣金都算进去，而我们需要的是只统计过滤后可见行的佣金总和。这是因为DataTables在过滤时只是通过CSS隐藏了行，并没有从DOM中移除它们，所以直接用jQuery选择器会选中所有行的元素。

解决方案：利用DataTables内置API #

DataTables提供了专门的API来获取当前过滤后的可见行，我们可以用这个来实现准确的求和。下面是两种简单的实现方式：

方式一：直接选中过滤后的佣金元素（贴近你的原代码）

这种方法不用关心列索引，直接复用你原来的#loop选择器，通过DataTables的$()方法指定只选中过滤后的可见元素：

$(document).ready(function() {
    // 先初始化DataTables
    var table = $('#myTable').DataTable();

    // 定义求和函数
    function calculateCommissionTotal() {
        var totalValue = 0;
        // 只选择过滤后可见行中的#loop元素
        table.$('#loop', {"filter": "applied"}).each(function() {
            var currentRow = parseFloat($(this).text());
            // 避免非数字值导致NaN
            if (!isNaN(currentRow)) {
                totalValue += currentRow;
            }
        });
        // 更新总计显示，可根据需求保留小数位数
        document.getElementById('total').innerHTML = totalValue.toFixed(2);
    }

    // 页面加载时先计算一次初始总和
    calculateCommissionTotal();

    // 绑定DataTables的draw事件：每次过滤、分页、排序都会触发重绘，重新计算总和
    table.on('draw', calculateCommissionTotal);
});

方式二：通过行数据求和（更灵活）

如果你需要更灵活地操作行数据，可以通过DataTables的rows({search:'applied'})获取过滤后的行，再提取佣金列的数据：

$(document).ready(function() {
    var table = $('#myTable').DataTable();

    function calculateCommissionTotal() {
        var totalValue = 0;
        // 遍历所有应用了搜索过滤的行（即当前可见行）
        table.rows({search: 'applied'}).every(function() {
            // 注意：这里的索引9对应你的Commision列（从0开始计数，匹配你的表格列顺序）
            var commission = parseFloat(this.data()[9]);
            if (!isNaN(commission)) {
                totalValue += commission;
            }
        });
        $('#total').text(totalValue.toFixed(2));
    }

    calculateCommissionTotal();
    table.on('draw', calculateCommissionTotal);
});

关键说明 #

1. 为什么原代码不行？：原代码的$("tr #loop").each()会选中DOM中所有#loop元素，包括DataTables过滤后隐藏的行（只是CSS隐藏，DOM仍存在），所以总和会包含所有行的数据。
2. draw事件的作用：每次用户进行过滤、分页、排序操作时，DataTables都会重新绘制表格（触发draw事件），绑定这个事件可以确保总和始终和当前可见行保持同步。
3. 非数字值处理：加入!isNaN()判断是为了避免表格中出现非数字的佣金值导致总和变成NaN。

内容的提问来源于stack exchange，提问作者ECROWN TECH