如何为带JS过滤功能的列表添加分页，保证筛选可作用于全部跨页条目

核心思路 #

• 不拆分原有列表DOM结构，保留所有li元素在原ul节点下
• 过滤逻辑优先作用于全量列表条目，筛选出所有符合条件的条目集合
• 分页逻辑仅控制符合条件的条目的展示状态，单次仅渲染当前页对应数量的条目

步骤1：修改HTML代码 #

在原有列表下方新增分页控件即可，无需修改原有列表结构：

<section>
  <input type="text" id="barraBusqueda" onkeyup="buscar()" placeholder="Buscar artículos">
  <ul id="articulos">
    <li><a href="/es/blog/1.html">Article 1</a></li>
    <li><a href="/es/blog/2.html">Article 2</a></li>
    <li><a href="/es/blog/3.html">Article 3</a></li>
    <li><a href="/es/blog/4.html">Article 4</a></li>
    <li><a href="/es/blog/5.html">Article 5</a></li>
    <li><a href="/es/blog/6.html">Article 6</a></li>
    <li><a href="/es/blog/7.html">Article 7</a></li>
    <li><a href="/es/blog/8.html">Article 8</a></li>
    <li><a href="/es/blog/9.html">Article 9</a></li>
    <li><a href="/es/blog/10.html">Article 10</a></li>
  </ul>
  <!-- 新增分页控件 -->
  <div class="pagination">
    <button id="prevBtn" onclick="prevPage()" disabled>上一页</button>
    <span id="pageInfo">第 1 页 / 共 2 页</span>
    <button id="nextBtn" onclick="nextPage()">下一页</button>
  </div>
</section>

步骤2：替换原有JS代码 #

新代码保留了原有全量过滤逻辑，新增分页状态控制：

// 全局配置
const pageSize = 5; // 每页展示5条，可自行调整数值
let currentPage = 1;
let matchedItems = []; // 存储当前过滤匹配的所有条目

// 过滤函数
function buscar() {
  const input = document.getElementById("barraBusqueda");
  const filter = input.value.toUpperCase();
  const ul = document.getElementById("articulos");
  const liList = ul.getElementsByTagName("li");
  matchedItems = [];

  // 全量遍历筛选所有匹配条目
  for (let i = 0; i < liList.length; i++) {
    const a = liList[i].getElementsByTagName("a")[0];
    const txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      matchedItems.push(liList[i]);
    }
    // 先隐藏所有条目，后续分页渲染时再显示对应条目
    liList[i].style.display = "none";
  }

  // 过滤后重置到第一页，避免页码越界
  currentPage = 1;
  renderPage();
}

// 渲染当前页内容
function renderPage() {
  const totalPage = Math.ceil(matchedItems.length / pageSize);
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = Math.min(startIndex + pageSize, matchedItems.length);

  // 显示当前页的匹配条目
  for (let i = startIndex; i < endIndex; i++) {
    matchedItems[i].style.display = "";
  }

  // 更新分页控件状态
  document.getElementById("pageInfo").textContent = `第 ${currentPage} 页 / 共 ${totalPage} 页`;
  document.getElementById("prevBtn").disabled = currentPage === 1;
  document.getElementById("nextBtn").disabled = currentPage === totalPage || totalPage === 0;
}

// 上一页
function prevPage() {
  if (currentPage > 1) {
    currentPage--;
    // 先隐藏所有条目再渲染新页
    matchedItems.forEach(item => item.style.display = "none");
    renderPage();
  }
}

// 下一页
function nextPage() {
  const totalPage = Math.ceil(matchedItems.length / pageSize);
  if (currentPage < totalPage) {
    currentPage++;
    matchedItems.forEach(item => item.style.display = "none");
    renderPage();
  }
}

// 页面初始化时渲染第一页
window.onload = function() {
  buscar();
}

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