如何在React（Next.js）中实现带省略号的分页按钮

你需要修改Pagination.js组件的页码生成逻辑，替换掉原来生成全部页码的代码，改成按规则生成精简的页码列表。以下是具体修改方案：

修改后的Pagination.js代码 #

import _ from "lodash";
const Pagination = ({ items, pageSize, currentPage, onPageChange }) => {
  // 计算总页数，用Math.ceil确保向上取整，避免小数页数
  const pageCount = Math.ceil(items / pageSize);
  
  if (pageCount === 1) return null;

  // 生成要显示的页码/省略号列表
  let displayPages = [];
  if (pageCount <= 3) {
    // 总页数不超过3时，直接显示所有页码
    displayPages = _.range(1, pageCount + 1);
  } else {
    // 总页数超过3时，显示前2页 + 省略号 + 尾页
    displayPages = [1, 2, '...', pageCount];
  }

  return (
    <>
      <nav>
        <ul className="pagination">
          {displayPages.map((item, index) => (
            <li
              key={index}
              className={
                typeof item === 'number' && item === currentPage 
                  ? "page-item active" 
                  : "page-item"
              }
            >
              {typeof item === 'number' ? (
                <a
                  style={{ cursor: "pointer" }}
                  onClick={() => onPageChange(item)}
                  className="page-link"
                >
                  {item}
                </a>
              ) : (
                <span className="page-link" style={{ pointerEvents: 'none' }}>
                  {item}
                </span>
              )}
            </li>
          ))}
        </ul>
      </nav>
    </>
  );
};

export default Pagination;

关键修改说明 #

1. 总页数计算：用Math.ceil(items / pageSize)替代直接除法，确保总页数是向上取整的整数，避免出现非整数的页码范围。
2. 精简页码生成：
   • 总页数≤3时，直接显示所有页码，避免不必要的省略号；
   • 总页数>3时，固定生成1, 2, ..., 尾页的结构。
3. 省略号交互处理：用<span>标签渲染省略号，设置pointerEvents: 'none'让它不可点击，和可交互的页码按钮区分开。

可选优化（按需调整） #

如果希望当前页靠近尾页时显示更多附近页码（比如当前页是19时，显示1, 2, ..., 19, 20），可以调整displayPages的生成逻辑：

let displayPages = [];
if (pageCount <= 3) {
  displayPages = _.range(1, pageCount + 1);
} else if (currentPage >= pageCount - 1) {
  // 当前页是倒数第1或第2页时，显示前2页+省略号+最后2页
  displayPages = [1, 2, '...', pageCount - 1, pageCount];
} else {
  displayPages = [1, 2, '...', pageCount];
}

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