jQuery DataTables搜索时商品总计求和失效问题求助

问题根源 #

• 直接绑定的点击事件仅作用于初始加载的DOM元素，DataTables操作后（如搜索）可能出现事件失效问题
• 单条总计计算时误用元素ID而非解析后的价格数值，导致计算结果错误
• 全局求和遍历了所有DOM中的.total元素，包含DataTables隐藏的行，导致求和结果不符合预期

修复步骤及代码 #

1. 改用事件委托绑定点击事件：确保DataTables操作后的元素仍能触发事件
2. 修复单条总计计算错误：使用解析后的价格数值替代元素ID进行计算
3. 修改全局求和逻辑：仅计算DataTables当前可见行的总计值，排除隐藏行的旧数据
4. 修正条件判断语法：修复原代码中逻辑判断的语法错误

修改后的完整代码：

// Calculating Sub total for all Items
function totalAmount(){
    var total = 0;
    // 使用DataTables API获取当前搜索生效后的可见行
    table.rows({search:'applied'}).every(function(){
        var $row = $(this.node());
        // 解析总计值，为空或非数值时取0
        var amount = parseFloat($row.find('.total').val()) || 0;
        total += amount;
    });
    
    console.log(total);
    $('.sub_total').val(total);
    $('.total_charge').val(total);
}
                
// Incrementing Quantity Value - 事件委托模式绑定点击事件
$(document).on('click', '.plus', function(e){
    e.preventDefault();
            
    let qtyID = $(this).attr('data-input');
    let priceID = $(this).attr('data-price');
    let sub_total = $(this).attr('data-total');
    
    let newValue = parseInt($('#'+qtyID).val());
    // 修正条件判断逻辑，避免非数值类型误判
    if(!isNaN(newValue) && newValue >= 1) {
        $('#'+qtyID).val(newValue + 1);
        var qty = parseInt($('#'+qtyID).val());
        // 增加默认值，避免价格为空时出现NaN
        var price = parseInt($('#'+priceID).val()) || 0;
        // 修复：使用解析后的价格数值计算单条总计
        var total = price * qty;
        
        $('#'+sub_total).val(total);  
        // 更新全局总计
        totalAmount();
    } else {
        $('#'+qtyID).val(0);
    }
});

// 初始化DataTables
var table = $('#table_wf').DataTable();

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