如何为jQuery.fancyTable添加精确匹配筛选功能（或替代方案）

核心思路 #

fancyTable虽未官方明确提及精确匹配方案，但可通过自定义filterFunction替换默认模糊搜索逻辑，同时调用组件内置的筛选方法刷新分页，避免手动修改DOM导致的空白页问题。

方案1：针对特定列（如Stage）添加精确筛选控件 #

1. 先在页面添加筛选控件（如下拉框）：

<select id="stageFilter" class="mb-3">
  <option value="">所有阶段</option>
  <option value="Prescreen">Prescreen</option>
  <option value="Interview">Interview</option>
  <!-- 根据业务需求补充其他选项 -->
</select>

2. 修改fancyTable初始化代码，加入自定义筛选逻辑并监听控件变化：

$(document).ready(function () {
  // 初始化fancyTable并获取组件实例
  const tableInstance = $(".sampleTable").fancyTable({
    sortColumn: 0,
    sortOrder: 'descending',
    pagination: true,
    perPage: 12,
    globalSearch: true,
    // 自定义筛选函数，控制行的显示/隐藏
    filterFunction: function(row, cellDataArray, searchString) {
      // 优先处理Stage列的精确筛选
      const selectedStage = $("#stageFilter").val();
      if (selectedStage) {
        // 假设Stage是第2列（索引从0开始，需根据你的表格结构调整）
        const stageCellText = $(row).find('td').eq(2).text().trim();
        if (stageCellText !== selectedStage) {
          return false; // 不匹配则隐藏该行
        }
      }

      // 处理全局搜索的精确匹配（若需要全局搜索也改为精确模式）
      if (searchString) {
        return cellDataArray.some(cell => cell.trim() === searchString.trim());
      }

      // 无筛选条件时显示所有行
      return true;
    }
  }).data("fancyTable");

  // 监听筛选控件变化，触发fancyTable重新筛选并刷新分页
  $("#stageFilter").on("change", function() {
    tableInstance.filter();
  });
});

方案2：将全局搜索改为精确匹配 #

若仅需把默认的全局模糊搜索替换为精确匹配，直接修改filterFunction即可：

$(document).ready(function () {
  $(".sampleTable").fancyTable({
    sortColumn: 0,
    sortOrder: 'descending',
    pagination: true,
    perPage: 12,
    globalSearch: true,
    filterFunction: function(row, cellDataArray, searchString) {
      if (!searchString) return true;
      // 判断任意单元格文本是否与搜索值精确匹配
      return cellDataArray.some(cell => cell.trim() === searchString.trim());
    }
  });
});

关键注意事项 #

• 禁止手动修改tr的display属性：fancyTable的分页依赖内部维护的行数据统计，手动隐藏行不会更新组件的分页计数，会导致空白页。必须调用tableInstance.filter()让组件重新计算符合条件的行，自动刷新分页。
• 列索引需适配实际表格结构：示例中假设Stage列索引为2，需根据你的表格列顺序调整eq(2)的数值。

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