如何在react-bootstrap Pagination中使用Ellipsis实现分页省略号效果

实现思路 #

• 原代码直接遍历生成了全部页码，总页数较多时就会出现平铺溢出的问题
• 我们需要调整paginationItems的生成逻辑，按规则控制显示的页码范围，间隔区域用react-bootstrap自带的Pagination.Ellipsis组件渲染省略号
• 通用分页折叠规则：始终展示首页、尾页，当前页前后展示N个相邻页码，首尾和相邻页码之间有间隔时插入省略号

完整修改后代码 #

import React, { useEffect, useState, useMemo } from "react";
import Pagination from "react-bootstrap/Pagination";

const PaginationComponent = ({
  total = 0,
  itemsPerPage = 10,
  currentPage = 1,
  onPageChange,
}) => {
  const [totalPages, setTotalPages] = useState(0);
  // 可自定义：当前页前后显示的相邻页码数量
  const SIBLING_COUNT = 2;

  useEffect(() => {
    if (total > 0 && itemsPerPage > 0)
      setTotalPages(Math.ceil(total / itemsPerPage));
  }, [total, itemsPerPage]);

  const paginationItems = useMemo(() => {
    const pages = [];
    // 总页数较少时直接展示全部页码，不需要折叠
    if (totalPages <= SIBLING_COUNT * 2 + 3) {
      for (let i = 1; i <= totalPages; i++) {
        pages.push(
          <Pagination.Item
            key={i}
            active={i === currentPage}
            onClick={() => onPageChange(i)}
          >
            {i}
          </Pagination.Item>
        );
      }
      return pages;
    }

    // 判断是否靠近首页
    const isNearStart = currentPage <= SIBLING_COUNT + 2;
    // 判断是否靠近尾页
    const isNearEnd = currentPage >= totalPages - (SIBLING_COUNT + 1);

    // 始终渲染第一页
    pages.push(
      <Pagination.Item
        key={1}
        active={1 === currentPage}
        onClick={() => onPageChange(1)}
      >
        1
      </Pagination.Item>
    );

    if (isNearStart) {
      // 靠近首页：渲染前N页+后省略号
      for (let i = 2; i <= SIBLING_COUNT * 2 + 2; i++) {
        pages.push(
          <Pagination.Item
            key={i}
            active={i === currentPage}
            onClick={() => onPageChange(i)}
          >
            {i}
          </Pagination.Item>
        );
      }
      pages.push(<Pagination.Ellipsis key="end-ellipsis" disabled />);
    } else if (isNearEnd) {
      // 靠近尾页：前省略号+后N页
      pages.push(<Pagination.Ellipsis key="start-ellipsis" disabled />);
      for (let i = totalPages - (SIBLING_COUNT * 2 + 1); i <= totalPages -1; i++) {
        pages.push(
          <Pagination.Item
            key={i}
            active={i === currentPage}
            onClick={() => onPageChange(i)}
          >
            {i}
          </Pagination.Item>
        );
      }
    } else {
      // 中间区域：前后都加省略号，渲染当前页+相邻页
      pages.push(<Pagination.Ellipsis key="start-ellipsis" disabled />);
      for (let i = currentPage - SIBLING_COUNT; i <= currentPage + SIBLING_COUNT; i++) {
        pages.push(
          <Pagination.Item
            key={i}
            active={i === currentPage}
            onClick={() => onPageChange(i)}
          >
            {i}
          </Pagination.Item>
        );
      }
      pages.push(<Pagination.Ellipsis key="end-ellipsis" disabled />);
    }

    // 始终渲染最后一页
    pages.push(
      <Pagination.Item
        key={totalPages}
        active={totalPages === currentPage}
        onClick={() => onPageChange(totalPages)}
      >
        {totalPages}
      </Pagination.Item>
    );

    return pages;
  }, [totalPages, currentPage, SIBLING_COUNT, onPageChange]);

  if (totalPages === 0) return null;

  return (
    <Pagination className="paginationInfo">  
      <Pagination.Prev
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage === 1}
      />
      {paginationItems}
      <Pagination.Next
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
      />
    </Pagination>
  );
};

export default PaginationComponent;

可自定义调整项 #

• 修改SIBLING_COUNT的数值可以控制当前页前后显示的相邻页码数量，比如设为1的话分页会更紧凑
• 如果需要点击省略号跳转到指定区间，可以移除Pagination.Ellipsis的disabled属性，添加对应的点击跳转逻辑

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