Question

我正在使用React构建一个分页组件，使用它后，我意识到它正在显示所有页面，因此扩展了整个页面，因此您必须滚动浏览才能查看其余页面。如何将其限制为仅20页，并允许每次增加页数而不占用空间？

我最了解逻辑的是这个。

如果（numberOfPages> 20）{ 返回 }

numberOfPages返回页面总数。

我不确定要使用哪种方法执行此类任务。

这是我的代码。


const Pagination = ({ numberOfPages, page, setPage }: any) => {
  const pageNumbers = (numberOfPages: number) => {
    let pages = [];
    for (let i = 1; i <= numberOfPages; i++) {
      pages.push(
        <span
          key={i}
          onClick={e => setPage(i)}
          className={page === i ? "active" : ""}
        >
          {i}
        </span>
      );
        // if (numberOfPages > 20 ) {
        //      return 
        // }
    }
    return pages;
  };

  return (
    <div className="pagination">
      <div className="page-numbers">
        <span
          onClick={e => (page === 1 ? {} : setPage(page - 1))}
          className={page === 1 ? "disabled" : ""}
        >
          &laquo;
        </span>
        {pageNumbers(numberOfPages)}
        <span
          onClick={e => (page === numberOfPages ? {} : setPage(page + 1))}
          className={page === numberOfPages ? "disabled" : ""}
        >
          &raquo;
        </span>
      </div>
    </div>
  );
};

export default Pagination; ```

Answer 1

https://www.npmjs.com/package/react-paginate

我没有您的问题的答案，但这是一个npm软件包，它可以自行进行分页

Answer 2

这不是真正的React，但是我相信您可以提取逻辑。我刚刚实现了一些与您最近需要的类似的东西。

注意：pageIndex是currentPageIndex，从0开始。数组中返回的页面从1开始，以提供更好的用户体验。

const getLastPageIndex = function (totalNumberOfItems, pageSize) {
    return Math.floor((totalNumberOfItems + pageSize - 1) / pageSize) - 1;
}

const getPageIndexOptions = function (totalNumberOfItems, maxNumberOfOptions, pageSize, pageIndex) {
    const options = [];
    const pivot = Math.ceil(maxNumberOfOptions/2);
    const lastPageIndex = getLastPageIndex(totalNumberOfItems, pageSize);

    if (lastPageIndex <= maxNumberOfOptions) {

      while(options.length < lastPageIndex) options.push(options.length + 1);
    } else if (pageIndex < pivot) {

      while(options.length < maxNumberOfOptions) options.push(options.length + 1);
    } else if (pageIndex > (lastPageIndex - pivot)) {

      while(options.length < maxNumberOfOptions) options.unshift(lastPageIndex - options.length + 1);
    } else {

      for (var i = pageIndex - (pivot - 1); options.length < maxNumberOfOptions; i++) {
        options.push(i + 1);
      }
    }

    return options;
}

getPageIndexOptions(100, 5, 15, 0) // returns [1, 2, 3, 4, 5]
getPageIndexOptions (100, 5, 15, 4) // returns [3, 4, 5, 6, 7]

如何限制分页中显示的页面数量

2 个答案: