新增过滤规则时如何实现精准数据筛选功能？

问题概述 #

• 当前表现：用户选择筛选选项点击“Apply”后，结果未按筛选条件缩小范围，反而展示所有符合任一选中条件的结果。
• 预期需求：选择颜色“Royal”时仅显示对应结果；再选择城市“Toronto”时，需进一步缩小范围，只展示同时满足所有筛选参数的结果。
• 核心问题：存储选中筛选数据的全局变量globalFilterList及点击触发的gatherDataResults函数逻辑存在错误。

现有代码 #

let globalFilterList = {
    color: [],
    style: {
       front: [],
       back: []
    },
    date: [],
    location: [],
    status: []
};

 
function gatherDataResults(){
    $(newData).each(function(){
          if( 
             $(this)[0]["color"] == globalFilterList["color"][0]
             || $(this)[0]["city"] == globalFilterList["location"][0]
             || $(this)[0]["province"] == globalFilterList["location"][1]
             || $(this)[0]["status"] == globalFilterList["status"][0])
          {
            
          // Clear original data first before appending new data
          $('.ordersPageTable').html('');
          $('.ordersPageTable').append(`
          <tr>
            <th><input type="checkbox"/></th>
            <th>Order</th>
            <th>Date Issued</th>
            <th>Status</th>
            <th><button class="printBatchBtn">Print Batch <img src="images/orders/printerIcon.svg" width="21"/></button></th>
          </tr>`);
            
          /* Update the search results to reflect what we searched for */
          tableData += `
          <tr>
            <td><input type="checkbox"/></td>
            <td>${$(this)[0]["sku"]} <span>${$(this)[0]["first_name"]} ${$(this)[0]["last_name"]}</span></td>
            <td>${$(this)[0]["Order_Date"]}</span></td>
            <td>${$(this)[0]["shipment_status"]}<span>${currentStatus[$(this)[0]["shipment_status"]]}</span></td>
            <td class="viewPrintOrder"><button class="viewBtn" data-customerID='${$(this)[0]["customer_id"]}'>View</button><button class="printBtn" data-customerID='${$(this)[0]["customer_id"]}'>Print</button></td>
          </tr>`;
            
            $('.ordersPageTable').append(tableData);
        }
   })
}

问题诊断 #

1. 逻辑运算符错误：用||（或）判断，只要满足任一筛选条件就显示结果，完全违背“同时满足所有条件”的需求，应改为&&（与）逻辑。
2. 未处理空筛选条件：若某类筛选无选中项（如globalFilterList.color为空），当前代码会直接判断color == undefined，导致符合其他条件的结果被过滤。
3. 表格重置时机错误：循环内每次匹配结果就清空表格并添加表头，最终只会显示最后一条匹配数据。
4. tableData未初始化：若为全局变量，多次调用函数会导致数据累加，出现重复结果。

修复后的代码 #

let globalFilterList = {
    color: [],
    style: {
       front: [],
       back: []
    },
    date: [],
    location: [],
    status: []
};

function gatherDataResults(){
    // 初始化表格数据变量，避免累加
    let tableData = '';
    // 提前清空表格并添加表头，避免循环内重复操作
    $('.ordersPageTable').html(`
        <tr>
            <th><input type="checkbox"/></th>
            <th>Order</th>
            <th>Date Issued</th>
            <th>Status</th>
            <th><button class="printBatchBtn">Print Batch <img src="images/orders/printerIcon.svg" width="21"/></button></th>
        </tr>
    `);

    $(newData).each(function(){
        const item = $(this)[0];
        let isMatch = true;

        // 颜色筛选：有选中项时才校验匹配
        if (globalFilterList.color.length > 0 && !globalFilterList.color.includes(item.color)) {
            isMatch = false;
        }

        // 地区筛选：有选中项时校验城市/省份匹配
        if (globalFilterList.location.length > 0) {
            const selectedCity = globalFilterList.location[0];
            const selectedProvince = globalFilterList.location[1];
            if (selectedCity && item.city !== selectedCity) isMatch = false;
            if (selectedProvince && item.province !== selectedProvince) isMatch = false;
        }

        // 状态筛选：有选中项时才校验匹配
        if (globalFilterList.status.length > 0 && !globalFilterList.status.includes(item.status)) {
            isMatch = false;
        }

        // 所有条件满足时，拼接表格行
        if (isMatch) {
            tableData += `
            <tr>
                <td><input type="checkbox"/></td>
                <td>${item.sku} <span>${item.first_name} ${item.last_name}</span></td>
                <td>${item.Order_Date}</td>
                <td>${item.shipment_status}<span>${currentStatus[item.shipment_status]}</span></td>
                <td class="viewPrintOrder">
                    <button class="viewBtn" data-customerID='${item.customer_id}'>View</button>
                    <button class="printBtn" data-customerID='${item.customer_id}'>Print</button>
                </td>
            </tr>`;
        }
    });

    // 一次性添加所有匹配结果到表格
    $('.ordersPageTable').append(tableData);
}

关键优化点 #

• 改为分条件校验逻辑，确保所有选中的筛选条件必须同时满足才会显示结果。
• 对每类筛选做空值判断，未选中的条件不参与过滤。
• 表格重置和表头添加放在循环外，避免重复操作导致数据丢失。
• 函数内初始化tableData，避免多次调用时数据累加。
• 用includes方法支持同类别多选（如选多个颜色时，匹配任一颜色即可，同时仍需满足其他类别筛选）。

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