jqGrid工具栏搜索仅对前20行生效，如何实现全量600+行数据筛选？

你遇到的问题本质是jqGrid默认仅渲染当前页的DOM节点，直接通过hide()操作DOM只能处理已加载的当前页数据，未渲染的分页数据完全无法通过前端DOM操作触及，需要根据你的分页类型调整实现逻辑：

情况1：使用前端本地分页（全量600条数据已一次性加载到前端） #

这是成本最低的实现方案，不要手动编写DOM隐藏逻辑，直接使用jqGrid自带的本地数据集能力处理：

• 优先使用官方自带的工具栏筛选能力，只要配置正确默认就支持全量本地数据筛选，示例配置：

$("#你的表格ID").jqGrid("filterToolbar", {
  defaultSearch: "cn", // 模糊匹配规则，可按需调整为eq(完全匹配)、bw(开头匹配)等
  searchOnEnter: false, // 输入内容后自动触发搜索，无需按回车
  ignoreCase: true // 匹配时忽略大小写
});

• 如果你有自定义筛选规则，直接操作jqGrid的本地全量数据集，筛选后重载表格即可，示例逻辑：

// 提前存储初始化时的全量原始数据，用于重置筛选
const originAllData = $("#你的表格ID").jqGrid("getGridParam", "data");

// 自定义筛选触发逻辑
function customFilter(searchKey) {
  // 从全量数据里按规则过滤
  const filteredData = originAllData.filter(item => {
    // 此处替换为你自己的筛选匹配逻辑
    return item.对应列字段.includes(searchKey);
  });
  // 把过滤后的数据集更新到表格，重载后分页会自动基于筛选后的结果计算
  $("#你的表格ID").jqGrid("clearGridData")
    .jqGrid("setGridParam", { data: filteredData, page: 1 })
    .trigger("reloadGrid");
}

情况2：使用服务端分页（每次翻页才请求接口拉取对应页数据） #

这种场景前端本身没有存储全量数据，不可能实现前端侧全量筛选，必须调整为服务端筛选逻辑：

• 配置jqGrid的postData参数，把搜索关键词作为公共请求参数传给后端
• 搜索触发时调用$("#你的表格ID").trigger("reloadGrid")，自动携带搜索参数请求后端接口
• 后端接口接收搜索参数后，先基于全量库表数据做条件过滤，再对过滤后的结果集做分页计算，返回对应页的数据和总条数即可

避坑提示 #

• 不要再使用$(obj).find("#"+rowid).hide()这种DOM操作逻辑，jqGrid切换分页时会销毁旧DOM重新渲染新分页的内容，之前手动加的隐藏状态会直接失效。
• 600条数据量很小，完全可以一次性加载到前端用本地分页实现，改造成本远低于服务端改造。

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