如何在 react-bootstrap 分页中使用省略号答案

【问题标题】：How to use Ellipsis in react-bootstrap pagination如何在 react-bootstrap 分页中使用省略号
【发布时间】：2021-12-30 16:18:06
【问题描述】：

您好，我正在使用反应分页，它工作正常，并使用 api 分页。但没有得到正确的方式。当我使用 {paginationItems} 时，它会在一行中显示所有页面，我想在省略号中使用它

我得到了这个结果

我想要这个结果

我的代码

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;

【问题讨论】：

标签： reactjs pagination react-bootstrap

【解决方案1】：

我重构了循环和添加分页项的逻辑，以使用辅助函数创建分页项：

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));

请参阅this StackBlitz 以获得工作演示。

【讨论】：