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

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

本文详解如何改造现有带分页的 html 表格，使其搜索功能作用于全部数据（而非仅当前页），并同步更新分页逻辑与底部行数提示（如“showing 1 to 2 of 8”），确保搜索结果也遵循相同每页条数限制且实时响应。

本文详解如何改造现有带分页的 html 表格，使其搜索功能作用于全部数据（而非仅当前页），并同步更新分页逻辑与底部行数提示（如“showing 1 to 2 of 8”），确保搜索结果也遵循相同每页条数限制且实时响应。

在实际开发中，常见误区是将搜索（filtering）与分页（pagination）视为两个独立操作：搜索仅隐藏不匹配行，而分页仅控制可见行的显示范围。但这种分离会导致搜索后仍需手动翻页才能看到所有匹配项——本质上，搜索应先于分页执行：即先筛选出全部匹配行，再对结果集进行分页。

✅ 核心改造思路

统一数据源管理：不再直接操作 DOM 行元素（tr）的 display 属性，而是维护两个逻辑数组：

allItems: 所有原始元素（从 tbody 中预提取）；
filteredItems: 搜索匹配后的行数组（空搜索时等于 allItems）。
搜索触发重置分页状态：每次输入搜索关键词，立即执行全文匹配，生成 filteredItems，并将当前页重置为第 1 页。

Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载
双模式分页切换：
- 普通模式：分页基于 allItems，总页数 = Math.ceil(allItems.length / limit)；
- 搜索模式：分页基于 filteredItems，总页数 = Math.ceil(filteredItems.length / limit)；
- 通过一个布尔标志 isSearching 动态判断当前模式。
精准更新页脚文本：
底部提示（如 Showing 1 to 2 of 8）需根据当前模式动态计算：
- 普通模式：Showing ${start} to ${end} of ${allItems.length}
- 搜索模式：Showing ${start} to ${end} of ${filteredItems.length}
  其中 start = (currentPage - 1) * limit + 1，end = Math.min(currentPage * limit, total)。

✅ 关键代码实现（精简可复用版）

// 初始化数据源
const paginatedList = document.getElementById("paginated-list");
const allItems = Array.from(paginatedList.querySelectorAll("tbody tr")); // 预存所有行
const paginationLimit = 2;
let filteredItems = [...allItems]; // 初始为全部数据
let currentPage = 1;
let isSearching = false;

// 搜索函数（推荐改用事件监听，避免 inline onkeyup）
document.getElementById("myInput").addEventListener("input", function () {
  const filter = this.value.toLowerCase().trim();
  if (!filter) {
    filteredItems = [...allItems];
    isSearching = false;
  } else {
    filteredItems = allItems.filter(row => {
      const cells = row.querySelectorAll("td");
      return Array.from(cells).some(cell =>
        (cell.textContent || cell.innerText).toLowerCase().includes(filter)
      );
    });
    isSearching = true;
  }
  currentPage = 1; // 重置到第一页
  renderPage(); // 重新渲染当前页
});

// 渲染当前页内容
function renderPage() {
  const start = (currentPage - 1) * paginationLimit;
  const end = start + paginationLimit;
  const currentItems = filteredItems.slice(start, end);

  // 隐藏所有行
  allItems.forEach(tr => tr.classList.add("hidden"));
  // 显示当前页匹配行
  currentItems.forEach(tr => tr.classList.remove("hidden"));

  // 更新页脚文本
  const total = filteredItems.length;
  const startNum = start + 1;
  const endNum = Math.min(end, total);
  document.getElementById("currpagecount").textContent = 
    `Showing ${startNum} to ${endNum} of `;
  document.getElementById("totalrowscount").textContent = total;

  // 更新页码显示与按钮状态
  const pageCount = total === 0 ? 1 : Math.ceil(total / paginationLimit);
  document.getElementById("pageCount").textContent = pageCount;
  document.getElementById("currentPage").textContent = currentPage;

  // 启用/禁用 prev/next 按钮
  document.getElementById("prev-button").disabled = currentPage === 1;
  document.getElementById("next-button").disabled = currentPage === pageCount;
}

// 分页控制
document.getElementById("prev-button").addEventListener("click", () => {
  if (currentPage > 1) {
    currentPage--;
    renderPage();
  }
});

document.getElementById("next-button").addEventListener("click", () => {
  const pageCount = filteredItems.length === 0 ? 1 : Math.ceil(filteredItems.length / paginationLimit);
  if (currentPage  {
  renderPage();
});