如何在ReactJS/JavaScript分页组件中添加页码间省略号

嘿，我来帮你搞定这个带省略号的分页逻辑，这是分页组件里超实用的功能，刚好完美匹配你给出的所有场景规则。咱们先理清楚核心思路，再上可直接用的代码。

核心逻辑梳理 #

我们要根据当前选中页和总页数动态生成展示的页码列表，列表里可以是数字页码，也可以用'...'代表省略区域。对应你的需求，规则可以拆解为：

• 总页数＜9时：直接显示全部页码，当前页高亮
• 总页数≥9时：
  • 当前页靠近开头（前3页）：展示「首页 + 当前页前后1页 + 省略号 + 最后3页」
  • 当前页在中间区域：展示「首页 + 省略号 + 当前页前后1页 + 省略号 + 末页」
  • 当前页靠近末尾（后3页）：展示「前3页 + 省略号 + 当前页前后1页 + 末页」

完整实现代码 #

第一步：写生成页码的工具函数 #

这个函数是核心，负责根据当前页和总页数输出要渲染的页码数组：

const generatePageNumbers = (currentPage, totalPages) => {
  const pages = [];
  
  // 场景1：总页数少于9，直接显示所有页码
  if (totalPages < 9) {
    for (let i = 1; i <= totalPages; i++) {
      pages.push(i);
    }
    return pages;
  }
  
  // 场景2：总页数≥9，分情况处理
  // 当前页是前3页（比如第1、2、3页）
  if (currentPage <= 3) {
    pages.push(1, 2, 3, 4, '...', totalPages - 2, totalPages - 1, totalPages);
  } 
  // 当前页是最后3页
  else if (currentPage >= totalPages - 2) {
    pages.push(1, 2, 3, '...', totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
  }
  // 当前页在中间区域
  else {
    pages.push(
      1,
      '...',
      currentPage - 1,
      currentPage,
      currentPage + 1,
      '...',
      totalPages
    );
  }
  
  return pages;
};

第二步：封装React分页组件 #

把工具函数整合到组件里，处理点击事件和状态：

import { useState } from 'react';

const Pagination = ({ totalPages, onPageChange }) => {
  const [currentPage, setCurrentPage] = useState(1);

  const handlePageClick = (page) => {
    if (page === '...') return; // 点击省略号不触发跳转
    setCurrentPage(page);
    onPageChange(page);
  };

  const pageNumbers = generatePageNumbers(currentPage, totalPages);

  return (
    <div className="pagination">
      {pageNumbers.map((page, index) => (
        <button
          key={index}
          onClick={() => handlePageClick(page)}
          className={`page-btn ${currentPage === page ? 'active' : ''}`}
          disabled={page === '...'}
        >
          {page}
        </button>
      ))}
    </div>
  );
};

export default Pagination;

第三步：添加基础样式（可选） #

给按钮加些样式让分页更直观：

.pagination {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 16px 0;
  justify-content: center;
}

.page-btn {
  padding: 8px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn.active {
  background: #2196f3;
  color: #fff;
  border-color: #2196f3;
}

.page-btn:disabled {
  cursor: default;
  color: #ccc;
  border-color: #f0f0f0;
}

.page-btn:hover:not(:disabled):not(.active) {
  background: #f5f5f5;
}

场景验证（匹配你的需求） #

咱们对应你给出的例子逐一验证：

• 总页数<9，选中第1页：[1,2,3,4,5,6,7,8] → 正确显示全部页码，1高亮
• 总页数<9，选中第5页：[1,2,3,4,5,6,7,8] → 正确显示全部页码，5高亮
• 总页数<9，选中第8页：[1,2,3,4,5,6,7,8] → 正确显示全部页码，8高亮
• 总页数=9，选中第2页：[1,2,3,4,'...',7,8,9] → 匹配你给出的f场景
• 总页数=9，选中第3页：[1,2,3,4,'...',7,8,9] → 匹配你给出的g场景
• 总页数=9，选中第4页：[1,'...',3,4,5,'...',9] → 中间区域显示省略号，符合预期

这样就完全覆盖了你需要的所有分页显示规则啦！

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