实现全局搜索与分页联动的 HTML 表格（支持跨页搜索与动态页脚统计）-html教程-PHP中文网

实现全局搜索与分页联动的 HTML 表格（支持跨页搜索与动态页脚统计）

本文详解如何改造现有带分页的 html 表格，使其搜索功能作用于全部数据而非仅当前页，并同步更新分页逻辑与底部“显示 x 到 y 条，共 z 条”的实时统计，确保搜索结果也具备相同分页限制。

本文详解如何改造现有带分页的 html 表格，使其搜索功能作用于全部数据而非仅当前页，并同步更新分页逻辑与底部“显示 x 到 y 条，共 z 条”的实时统计，确保搜索结果也具备相同分页限制。

在实际开发中，常见误区是将搜索（display: none/block）与分页（.hidden 类控制）逻辑分离甚至冲突——原代码中 myFunction() 仅隐藏/显示

元素，而分页脚本则依赖 .hidden 类控制可见性，二者互不感知，导致搜索后分页仍作用于原始全量数据，无法反映筛选结果。

要实现真正的全局搜索 + 分页联动，核心思路是：
✅ 统一数据源管理：不再直接操作 DOM 显示/隐藏，而是维护两个独立的数据视图：

listItems：原始全部表格行（用于常规分页）
searchArray：搜索匹配后的行数组（用于搜索分页）
✅ 状态隔离：用 searching 标志位区分当前处于“全量浏览”还是“搜索模式”，并据此切换分页行为。
✅ 动态页脚更新：#currpagecount 和 #totalrowscount 需根据当前模式实时重写文本，支持两种格式：
常规模式：Showing 1 to 2 of 8
搜索模式：Showing search results 1 to 2 of 5

以下是关键改造点与完整可运行代码：

✅ 1. 搜索逻辑重构：收集匹配行，而非仅显隐

let searching = false;
let searchArray = [];

function myFunction() {
  const filter = document.getElementById("myInput").value.toLowerCase();
  const table = document.getElementById("paginated-list");
  const trs = table.querySelectorAll("tbody tr"); // 仅遍历 tbody 行，避免误操作 thead
  searchArray = [];

  trs.forEach(row => {
    const cells = row.querySelectorAll("td");
    let isMatch = false;
    cells.forEach(cell => {
      const text = cell.textContent?.trim().toLowerCase() || "";
      if (text.includes(filter)) isMatch = true;
    });
    if (isMatch) searchArray.push(row);
  });

  searching = searchArray.length > 0 && filter.length > 0;
  setCurrentSearchPage(1); // 重置到第 1 页
}

⚠️ 注意：原 getElementsByTagName("tr") 会包含行，易引发索引错乱；改用 querySelectorAll("tbody tr") 更精准。
✅ 2. 双模式分页控制器

定义两套分页函数，根据 searching 状态调用对应逻辑：

HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载
// 常规模分页（显示全部数据）
const setCurrentPage = (pageNum) => {
  currentPage = pageNum;
  const start = (pageNum - 1) * paginationLimit;
  const end = pageNum * paginationLimit;

  // 更新页脚：显示范围 & 总数
  const from = start + 1;
  const to = Math.min(end, listItems.length);
  document.getElementById("currpagecount").textContent = `Showing ${from} to ${to} of `;
  document.getElementById("totalrowscount").textContent = listItems.length;

  // 应用 .hidden 类
  listItems.forEach((item, index) => {
    item.classList.toggle("hidden", index = end);
  });
};

// 搜索分页（仅显示匹配结果）
const setCurrentSearchPage = (pageNum) => {
  currentPage = pageNum;
  const start = (pageNum - 1) * searchPaginationLimit;
  const end = pageNum * searchPaginationLimit;

  const totalMatches = searchArray.length;
  const from = start + 1;
  const to = totalMatches === 0 ? 0 : Math.min(end, totalMatches);

  document.getElementById("currpagecount").textContent = 
    totalMatches === 0 
      ? "No results found" 
      : `Showing search results ${from} to ${to} of `;
  document.getElementById("totalrowscount").textContent = totalMatches;

  searchArray.forEach((item, index) => {
    item.classList.toggle("hidden", index = end);
  });
};
✅ 3. 按钮事件智能路由

为「上一页」「下一页」按钮绑定条件逻辑：
prevButton.addEventListener("click", () => {
  if (searching) {
    const newPage = Math.max(1, currentPage - 1);
    setCurrentSearchPage(newPage);
  } else {
    const newPage = Math.max(1, currentPage - 1);
    setCurrentPage(newPage);
  }
});

nextButton.addEventListener("click", () => {
  const maxPage = searching 
    ? Math.ceil(searchArray.length / searchPaginationLimit) || 1 
    : pageCount;
  if (currentPage <h3>✅ 4. 页面加载与初始化</h3><pre class="brush:php;toolbar:false;">window.addEventListener("load", () => {
  // 初始化全量分页
  setCurrentPage(1);
  document.getElementById("pageCount").textContent = pageCount;
  document.getElementById("currentPage").textContent = 1;

  // 绑定搜索输入（推荐改用 addEventListener 替代 onkeyup 内联）
  document.getElementById("myInput").addEventListener("input", myFunction);
});
? 关键注意事项
CSS 优先级：确保 .hidden { display: none; } 规则不被其他样式覆盖，且高于内联 style.display（原搜索逻辑设置的 display="" 会干扰 .hidden）。因此必须移除所有 tr[i].style.display = "" 或 "none" 的操作，完全交由 CSS 类控制。
空搜索处理：当输入框清空时，应自动退出搜索模式（searching = false），并恢复全量分页。可在 myFunction() 开头添加：
if (!filter.trim()) {
  searching = false;
  searchArray = [];
  setCurrentPage(1);
  return;
}
响应式兼容性：当前方案不影响原有媒体查询逻辑，所有移动端适配（如 data-title 属性渲染）保持生效。

性能提示：对于超大数据集（>1000 行），建议引入防抖（debounce）和虚拟滚动优化，但本文聚焦基础逻辑闭环。
通过以上改造，你的表格将真正实现「搜索即全局、分页即上下文」——用户输入关键词，系统自动筛选全部数据、重新分页，并实时更新页脚统计，体验专业且健壮。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！