Ant Design分页：实现跳页功能及指定页码省略显示

核心问题拆解 #

你需要实现两个效果+修复布局问题：

• 保留跳转到下一页的功能
• 总页数≤7时，页码显示为「1 2 3 4 ... 最后一页」的样式
• 解决当前UI折行的问题

具体解决方案 #

1. 移除showLessItems属性 #

这个属性是用来在页数较多时减少显示的页码数量，和你当前总页数≤7的需求不匹配，反而会挤压布局导致折行，直接移除即可。

2. 自定义页码渲染逻辑（实现目标样式） #

利用Ant Design Pagination的itemRender属性，自定义页码显示规则：

import { Pagination } from 'antd';
import React, { useState } from 'react';

const YourComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 10;
  const total = 64;
  const totalPages = Math.ceil(total / pageSize);

  const handlePaginationChange = (pageNumber: number) => {
    setCurrentPage(pageNumber);
    // 你的业务逻辑：更新列表索引
    // setMinIndex((pageNumber - 1) * pageSize);
    // setMaxIndex(pageNumber * pageSize);
  };

  // 自定义页码渲染函数
  const itemRender = (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', originalElement: React.ReactNode) => {
    if (totalPages <= 7) {
      // 总页数≤7时，只显示前4页和最后一页
      const visiblePages = [1, 2, 3, 4, totalPages];
      if (visiblePages.includes(page)) {
        return originalElement;
      }
      // 中间页码替换为省略号
      if (page > 4 && page < totalPages) {
        return <span style={{ margin: '0 8px' }}>...</span>;
      }
    }
    // 总页数>7时，使用默认渲染逻辑
    return originalElement;
  };

  return (
    <div style={{ minWidth: '320px' }}> {/* 给容器设置最小宽度，避免空间不足 */}
      <Pagination
        current={currentPage}
        pageSize={pageSize}
        total={total}
        onChange={handlePaginationChange}
        itemRender={itemRender}
        style={{ whiteSpace: 'nowrap' }} // 强制内部元素不折行
      />
    </div>
  );
};

export default YourComponent;

3. 修复UI折行问题 #

• 给Pagination组件添加style={{ whiteSpace: 'nowrap' }}，防止页码和按钮换行
• 给父容器设置minWidth（比如320px），确保有足够横向空间容纳所有元素

效果验证 #

• 总页数≤7时，会自动显示「1 2 3 4 ... N」（N为总页数）的样式
• 下一页按钮默认自动显示（只要当前页不是最后一页）
• 通过容器宽度和不折行样式，彻底解决UI折行问题

内容的提问来源于stack exchange，提问作者Rahul Kumar Singh