jQuery表格实时搜索后结果分页问题求助，不使用dataTable插件

问题核心原因 #

1. 每次搜索后调用$('table tbody').empty()清空了全量原始行数据，仅保留当前搜索匹配的行，清空搜索框时无原始数据可恢复，导致无法回到全量展示状态
2. 重复调用paginathing插件前未销毁旧的分页实例，会出现分页控件重复、配置不生效的问题
3. 所有表格行使用相同id="sbrow"不符合HTML规范（id需全局唯一），会导致选择器匹配异常
4. 若.searchNumber是普通文本元素，使用val()无法获取文本内容，需改为text()，仅输入框元素可用val()取值

修复代码 #

第一步：调整HTML属性 #

将所有表格行的id="sbrow"修改为class="sbrow"，避免id重复导致的匹配错误。

第二步：替换JS逻辑 #

// 全局缓存全量原始表格行，页面加载完成后赋值，后续不会修改该缓存
let originalTableRows = [];

$(function () {
  // 页面加载完成后缓存所有原始行数据
  originalTableRows = $('table tbody tr.sbrow').clone();
  // 初始化全量数据分页，替换你原有默认分页逻辑
  initTablePagination(originalTableRows);
  // 你原有隐藏默认分页的逻辑保留
  $('.pagination').hide();
})

// 搜索事件
$("#MySearch").keyup(function () {
  const searchKeyword = $(this).val().toLowerCase().trim();
  // 从全量原始数据中过滤匹配行
  const matchedRows = originalTableRows.filter(function () {
    // 如果.searchNumber是输入框，可把text()改回val()
    const content = $(this).find('.searchNumber').text().toLowerCase();
    return content.includes(searchKeyword);
  })
  // 销毁旧分页控件，避免重复
  $('.pagination').remove();
  // 重新初始化分页
  initTablePagination(matchedRows);
})

// 公共分页初始化函数，抽离重复逻辑
function initTablePagination(rows) {
  const totalCount = rows.length;
  // 清空tbody后插入匹配行
  $('table tbody').empty().append(rows);
  // 无匹配数据时可自行添加空状态提示
  if (totalCount === 0) return;
  // 动态计算分页数量，最多展示6页
  const pageCount = Math.ceil(totalCount / 10);
  // 初始化分页
  $('table tbody').paginathing({
    perPage: 10,
    limitPagination: pageCount > 6 ? 6 : pageCount,
    insertAfter: '#myForm',
    pageNumbers: true
  })
}

优化说明 #

• 抽离了公共分页初始化函数，删除了冗余的多分支if判断，可自动适配不同数量的搜索结果
• 每次搜索都基于全量原始数据过滤，不会丢失原始数据，清空搜索框时可自动恢复全量数据展示
• 每次初始化分页前都会清理旧的分页控件，不会出现重复分页的问题

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