在Grocery CRUD 2.0.1中实现DataTable筛选后列求和显示

由于你使用的是DataTables 1.9.2，其API与新版差异极大，column()这类新版方法并不存在。结合Grocery CRUD已为Total列添加.total类的前提，以下是可行的实现方案：

方案一：利用fnDrawCallback监听表格重绘（推荐） #

DataTables 1.9.2中，fnDrawCallback会在表格每次重绘（包括筛选、分页后）触发，适合实时计算可见行的总和：

// 获取Grocery CRUD生成的DataTables实例（默认表格ID为gcrud-table）
var oTable = $('#gcrud-table').dataTable();

// 重写表格的绘制回调函数
oTable.fnSettings().fnDrawCallback = function() {
    var totalSum = 0;
    // 获取所有可见行的DOM节点
    var visibleRows = oTable.fnGetNodes();

    // 遍历可见行，提取Total列数值求和
    $(visibleRows).each(function() {
        // 通过类名获取Total列单元格内容
        var rawValue = $(this).find('.total').text().trim();
        // 清理数值格式（如千分位逗号、货币符号），转换为数字
        var numValue = parseFloat(rawValue.replace(/[^\d.]/g, ''));
        if (!isNaN(numValue)) {
            totalSum += numValue;
        }
    });

    // 将结果输出到指定div（示例ID为total-sum）
    $('#total-sum').text('筛选后总计: ' + totalSum.toFixed(2));
};

// 页面初始化时手动触发一次求和（确保初始状态显示正确）
oTable.fnDraw();

方案二：使用fnFooterCallback（基于原始数据计算） #

如果需要基于DataTables的原始数据集计算，可使用fnFooterCallback，但需注意对应Total列在原始数据中的索引（从0开始）：

// 获取已初始化的DataTables实例，避免重复初始化冲突
var oTable = $('#gcrud-table').dataTable({
    "bRetrieve": true,
    "fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) {
        var totalSum = 0;
        // aiDisplay是可见行在原始数据中的索引数组，遍历计算
        for (var i = iStart; i < iEnd; i++) {
            // 假设Total列在原始数据中的索引为4，根据实际情况修改
            var rawValue = aaData[aiDisplay[i]][4];
            var numValue = parseFloat(rawValue.replace(/[^\d.]/g, ''));
            if (!isNaN(numValue)) {
                totalSum += numValue;
            }
        }
        // 更新指定div的内容
        $('#total-sum').text('筛选后总计: ' + totalSum.toFixed(2));
    }
});

关键注意事项 #

1. 表格ID确认：Grocery CRUD生成的表格默认ID为gcrud-table，如果你的表格ID不同，需对应修改选择器。
2. 数值格式处理：如果Total列包含千分位逗号、货币符号（如$、¥），必须先通过正则清理后再转换为数字，否则会出现NaN导致求和错误。
3. 避免初始化冲突：由于Grocery CRUD已自动初始化DataTables，必须使用bRetrieve: true或直接通过fnSettings()修改回调，不能重复调用dataTable()初始化表格。

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