咨询：如何实现循环分页并保持Active Page居中显示

我之前正好实现过这种循环式的分页效果，核心就是让激活页始终保持在分页栏的中间位置，同时当页码到边界时自动从另一端补全。下面是具体的实现思路和可运行的代码示例：

核心思路 #

1. 先确定总页数和每页展示的页码数量（建议选奇数，这样激活页能严格居中）
2. 以激活页为中心，向左右各取等量的页码
3. 处理边界循环逻辑：如果向左取的页码小于1，就从总页数倒着补；如果向右取的页码大于总页数，就从1开始补

完整代码实现 #

CSS 样式

.active { 
  background: red !important; 
  color: white !important;
}
.w3-bar {
  margin: 1.5rem 0;
  display: flex;
  gap: 4px;
}
.w3-button {
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.w3-button:hover {
  background: #f5f5f5;
}

HTML 结构

<!-- 分页栏容器，后续通过JS动态生成内容 -->
<div id="pagination-container"></div>

JavaScript 逻辑

// 可配置参数
const totalPages = 5; // 总页数
const visiblePageCount = 5; // 分页栏展示的页码总数（奇数）
const sideOffset = Math.floor(visiblePageCount / 2); // 激活页左右各展示的页码数

// 生成指定激活页的分页HTML
function buildPagination(activePage) {
  let pageList = [];

  // 计算需要展示的页码序列，处理循环补全
  for (let i = -sideOffset; i <= sideOffset; i++) {
    let currentPage = activePage + i;
    // 边界循环处理
    if (currentPage < 1) {
      currentPage += totalPages;
    } else if (currentPage > totalPages) {
      currentPage -= totalPages;
    }
    pageList.push(currentPage);
  }

  // 拼接分页栏HTML
  let paginationHtml = `<div class="w3-bar">`;
  pageList.forEach(page => {
    const activeClass = page === activePage ? 'active' : '';
    paginationHtml += `<a href="#" class="w3-button ${activeClass}" data-page="${page}">${page}</a>`;
  });
  paginationHtml += `</div>`;

  return paginationHtml;
}

// 初始化：展示你提供的5种激活页场景
const container = document.getElementById('pagination-container');
for (let page = 1; page <= totalPages; page++) {
  container.innerHTML += buildPagination(page);
}

// 可选：添加点击切换激活页的交互逻辑
container.addEventListener('click', (e) => {
  if (e.target.classList.contains('w3-button')) {
    e.preventDefault();
    const targetPage = parseInt(e.target.dataset.page);
    container.innerHTML = buildPagination(targetPage);
  }
});

效果说明 #

运行代码后会生成你需要的5种分页效果：

• 激活页1：4 → 5 → 1(红) → 2 → 3
• 激活页2：5 → 1 → 2(红) → 3 → 4
• 激活页3：1 → 2 → 3(红) → 4 → 5
• 激活页4：2 → 3 → 4(红) → 5 → 1
• 激活页5：3 → 4 → 5(红) → 1 → 2

扩展提示 #

• 若要修改分页栏展示的页码数量，只需调整visiblePageCount参数（保持奇数才能保证激活页居中）
• 样式可以根据需求自定义，比如调整按钮尺寸、圆角、hover效果等
• 如果对接后端分页，把totalPages替换成后端返回的总页数即可

内容的提问来源于stack exchange，提问作者Marek Petrů