DataTables自定义筛选功能异常：仅返回第一页数据

我来帮你搞定这个分页异常的坑——这是使用DataTables自定义搜索插件时很容易踩的小问题！

问题根源分析 #

你当前的代码逻辑是：添加自定义搜索函数 → 绘制表格 → 立刻移除搜索函数。这就导致只有第一次绘制表格时应用了筛选规则，当你切换分页时，DataTables已经没有这个搜索函数了，会用原始的全部数据来计算分页，所以第一页是筛选后的结果，后面的页却显示未筛选的数据，看起来就像分页失效了。

修复方案 #

我们需要把搜索函数的生命周期和复选框的状态绑定在一起：当复选框勾选时添加搜索函数，取消勾选时移除它，并且每次状态变化后重新绘制表格。这样分页操作时，筛选规则会一直生效，直到你取消勾选复选框。

步骤1：独立定义自定义搜索函数

先把筛选逻辑抽成一个单独的函数，方便后续添加和移除：

// 定义自定义筛选函数
function filterDistributedRows(settings, data, dataIndex) {
  // 获取复选框的当前状态（替换成你的复选框选择器）
  const isChecked = $('#your-distributed-checkbox').is(':checked');
  
  if (isChecked) {
    // 这里如果你的distributed值可以从data数组中获取（比如对应某一列），优先用data，不用操作DOM
    // 比如假设distributed对应第7列（索引6，对应status列），可以改成return data[6] == 0;
    const row = table.row(dataIndex).node();
    return $(row).data('distributed') == 0;
  } else {
    // 未勾选时显示所有行
    return true;
  }
}

步骤2：给复选框绑定状态变化事件

在复选框的change事件中动态管理搜索函数，并重新绘制表格：

// 替换成你的复选框选择器
$('#your-distributed-checkbox').on('change', function() {
  const isChecked = $(this).is(':checked');
  
  if (isChecked) {
    // 勾选时添加筛选函数
    $.fn.dataTable.ext.search.push(filterDistributedRows);
  } else {
    // 取消勾选时移除对应的筛选函数（避免误删其他自定义搜索）
    const filterIndex = $.fn.dataTable.ext.search.indexOf(filterDistributedRows);
    if (filterIndex !== -1) {
      $.fn.dataTable.ext.search.splice(filterIndex, 1);
    }
  }
  
  // 重新绘制表格，应用筛选规则
  table.draw();
});

优化建议

如果你的distributed值可以通过DataTables的data参数直接获取（比如在后端返回的JSON里有这个字段，只是没在columns里显示），建议优先使用data数组里的值，而不是操作DOM节点。这样不仅效率更高，还能避免deferRender: true带来的部分行未渲染、DOM节点不存在的问题。

比如假设后端返回的数据里有distributed字段，你可以修改筛选函数：

function filterDistributedRows(settings, data, dataIndex) {
  const isChecked = $('#your-distributed-checkbox').is(':checked');
  // 假设data里的distributed对应第7个元素（根据实际结构调整索引）
  return isChecked ? data[6] == 0 : true;
}

为什么原来的代码会失效？ #

你之前的代码在执行table.draw()后立刻用pop()移除了搜索函数，导致DataTables后续的分页、排序等操作都不再应用这个筛选规则。而我们现在的方案是根据复选框状态动态维护搜索函数的存在，只要复选框处于勾选状态，筛选规则就会一直生效，分页自然就正常了。

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