Vanilla JavaScript实现分页按钮按需隐藏：仅展示当前页前后页码

要实现只显示当前页前后指定范围的分页按钮，你可以通过拆分渲染与状态更新逻辑，动态控制按钮的显隐，具体实现如下：

1. 定义核心控制变量 #

先添加两个关键变量，用来控制显示范围和记录总页数：

// 当前页前后各显示N个按钮，示例设为2，即当前页±2的范围
const visibleRange = 2;
// 总页数，后续会动态计算
let totalPages = 0;
// 确保pageIndex全局可访问，初始值设为0（对应第一页）
let pageIndex = 0;

2. 重构分页按钮逻辑 #

将按钮渲染与状态更新拆分为两个独立函数，方便复用和维护：

function loadPageNav() {
  // 清空旧按钮，避免重复渲染
  nav.innerHTML = '';
  // 计算总页数，向上取整确保最后一页不满100条也能显示
  totalPages = Math.ceil(items.length / itemsPerPage);

  // 循环生成所有页码按钮
  for (let i = 0; i < totalPages; i++) {
    const button = document.createElement('button');
    button.classList.add('btn');
    // 用data属性存储页码索引，避免innerHTML解析误差
    button.dataset.page = i;
    button.textContent = i + 1;

    button.addEventListener('click', (e) => {
      pageIndex = parseInt(e.target.dataset.page);
      loadItems();
      // 点击后立即更新按钮显示状态
      updatePageButtons();
    });

    nav.appendChild(button);
  }

  // 初始化页面时更新按钮状态
  updatePageButtons();
}

// 动态更新分页按钮显隐与高亮状态的函数
function updatePageButtons() {
  const allButtons = nav.querySelectorAll('.btn');

  allButtons.forEach((button, index) => {
    // 判断当前按钮是否在可见范围内，同时不超出总页数边界
    const shouldShow = index >= pageIndex - visibleRange && index <= pageIndex + visibleRange
                      && index >= 0 && index < totalPages;

    button.style.display = shouldShow ? 'inline-block' : 'none';

    // 给当前页按钮添加高亮样式（可选）
    if (index === pageIndex) {
      button.classList.add('active');
    } else {
      button.classList.remove('active');
    }
  });
}

3. 优化边界体验（可选） #

如果总页数很多，可以添加「首页」「上一页」「下一页」「尾页」按钮，避免用户在极端页无法快速跳转：

function loadPageNav() {
  nav.innerHTML = '';
  totalPages = Math.ceil(items.length / itemsPerPage);

  // 首页按钮
  const firstBtn = document.createElement('button');
  firstBtn.textContent = '首页';
  firstBtn.addEventListener('click', () => {
    pageIndex = 0;
    loadItems();
    updatePageButtons();
  });
  nav.appendChild(firstBtn);

  // 上一页按钮
  const prevBtn = document.createElement('button');
  prevBtn.textContent = '上一页';
  prevBtn.addEventListener('click', () => {
    if (pageIndex > 0) {
      pageIndex--;
      loadItems();
      updatePageButtons();
    }
  });
  nav.appendChild(prevBtn);

  // 生成页码按钮（原循环代码）
  for (let i = 0; i < totalPages; i++) {
    const button = document.createElement('button');
    button.classList.add('btn');
    button.dataset.page = i;
    button.textContent = i + 1;

    button.addEventListener('click', (e) => {
      pageIndex = parseInt(e.target.dataset.page);
      loadItems();
      updatePageButtons();
    });

    nav.appendChild(button);
  }

  // 下一页按钮
  const nextBtn = document.createElement('button');
  nextBtn.textContent = '下一页';
  nextBtn.addEventListener('click', () => {
    if (pageIndex < totalPages - 1) {
      pageIndex++;
      loadItems();
      updatePageButtons();
    }
  });
  nav.appendChild(nextBtn);

  // 尾页按钮
  const lastBtn = document.createElement('button');
  lastBtn.textContent = '尾页';
  lastBtn.addEventListener('click', () => {
    pageIndex = totalPages - 1;
    loadItems();
    updatePageButtons();
  });
  nav.appendChild(lastBtn);

  updatePageButtons();
}

4. 修复原代码小问题 #

• 原代码中i.name()存在错误，示例数组里的name是字符串属性，应改为i.name
• 确保items变量与products统一，避免变量名混淆

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