如何在 react-bootstrap 分頁中使用省略號

Question

嗨，我正在使用反應分頁及其工作正常，並使用 api 分頁。 但沒有得到正確的方式。 當我使用{paginationItems}時，它會在一行中顯示所有頁面，我想在 Ellipsis 中使用它

我得到的這個結果

我想要這個結果

我的代碼

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);
    
      useEffect(() => {
        if (total > 0 && itemsPerPage > 0)
          setTotalPages(Math.ceil(total / itemsPerPage));
      }, [total, itemsPerPage]);
    
      const paginationItems = useMemo(() => {
        const pages: any = [];
    
        for (let i = 1; i <= totalPages; i++) {
          pages.push(
            <Pagination.Item
              key={i}
              active={i === currentPage}
              onClick={() => onPageChange(i)}
            >
              {i}
            </Pagination.Item>
          );
        }
    
        return pages;
      }, [totalPages, currentPage]);
    
      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;

Answer 1

我重構了循環並添加分頁項的邏輯，以使用幫助程序 function 創建分頁項：

const createPaginationItem = (i) => {
    return <Pagination.Item
        key={i}
        active={i === currentPage}
        onClick={() => onPageChange(i)}
      >
        {i}
      </Pagination.Item>
};

要獲得你想要的布局，你有 2 很多省略號：

<< | < | 1 |...| 10 | 11 | 12 | 13 | 14 |...| 20 | > | >>

你可以改變你的循環如下：

const paginationItems = [];
// Add the first item (page 1)
paginationItems.push(createPaginationItem(1));
// Add the first ellipsis
paginationItems.push(<Pagination.Ellipsis />);
// Create page numbers in the middle (10-14)
const midpoint = totalPages/2;
for (let i = midpoint; i <= midpoint + 4; i++) {
  paginationItems.push(createPaginationItem(i));
}
// Add the second ellipsis
paginationItems.push(<Pagination.Ellipsis />);
// Add the last item (page 20)
paginationItems.push(createPaginationItem(totalPages));

有關工作演示，請參閱此 StackBlitz 。