DataTable过滤后无对应货币数据时，如何将对应总和设为0？

核心问题分析 #

你的代码中，货币汇总值的DOM更新逻辑被放在了循环内部的条件判断中——只有当找到对应货币的条目时才会更新DOM。如果过滤后某类货币没有匹配条目，对应的DOM元素就不会被更新，从而保留过滤前的旧值。

修复方案 #

将DOM更新逻辑移到循环外部，确保无论是否找到对应货币条目，都会用计算后的汇总值（包括0）刷新DOM。同时修正DataTable配置中的拼写错误（serverSider → serverSide）。

修正后的完整代码 #

$(document).ready(function(){
    var table = $('#servicios').DataTable({
        processing: true,
        serverSide: true, // 修复拼写错误
        "pageLength": 50,
        "lengthMenu": [[5,10,50,-1], [5,10,50,"All"]],
        "language":{
            "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
        }
    });

    // 初始汇总计算
    let soles = 0.0;
    let dollar = 0.0;
    table.column(3).data().each( value => {
        const [symbol, amount] = value.split(' ');
        if (symbol === "S/") {
            soles += parseFloat(amount.replace(/,/g, ""));
        } else if (symbol === "$") {
            dollar += parseFloat(amount.replace(/,/g, ""));
        }
    });
    // 统一更新DOM
    $("#soles").text(soles.toLocaleString('en-US'));
    $("#dollar").text(dollar.toLocaleString('en-US'));

    // 下拉筛选事件
    $('.filter-select').change(function(){
        table.column($(this).data('column')).search($(this).val()).draw();
        
        let soles = 0.0;
        let dollar = 0.0;
        table.column(3,{search:'applied'}).data().each( value => { 
            const [symbol, amount] = value.split(' ');
            if (symbol === "S/") {
                soles += parseFloat(amount.replace(/,/g, ""));
            } else if (symbol === "$") {
                dollar += parseFloat(amount.replace(/,/g, ""));
            }
        });
        // 无论是否有匹配条目，都强制更新DOM
        $("#soles").text(soles.toLocaleString('en-US'));
        $("#dollar").text(dollar.toLocaleString('en-US'));
    });
});

关键修改点 #

1. DOM更新时机调整：将$("#soles").text()和$("#dollar").text()移到循环结束后，确保每次计算完成后都会刷新两个汇总值的显示。
2. 修复配置错误：修正serverSider为serverSide，避免DataTable服务器端处理功能异常。
3. 冗余代码简化：移除(+soles)这类冗余转换，直接使用数值类型调用toLocaleString方法。

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