Javascript 如何限制分页中显示的页数

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

我最不懂逻辑的就是这个

如果（页数>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; ```

常量分页=（{numberOfPages，page，setPage}:any）=>{
常量页码=（numberOfPages:number）=>{
让pages=[]；
for（设i=1；i
{i}
);
//如果（页数>20）{
//返回
// }
}
返回页面；
};
返回(
（第===1？{}：设置页面（第1页））}
className={page==1？“已禁用”：“”}
>
&拉阔；
{页码（页数）}
（第===页数？{}：设置页（第+1页））}
className={page==numberOfPages？“已禁用”：“}
>
&拉阔；
);
};
导出默认分页```

---

我不知道你的问题的答案，但这里有一个npm包，它自己进行分页

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

注意：pageIndex是当前的pageIndex，以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]

const getLastPageIndex=函数（totalNumberOfItems，pageSize）{
返回数学楼层（（totalNumberOfItems+pageSize-1）/pageSize-1；
}
const getPageIndexOptions=函数（totalNumberOfItems、maxNumberOfOptions、pageSize、pageIndex）{
常量选项=[]；
const pivot=Math.ceil（maxNumberOfOptions/2）；
const lastPageIndex=getLastPageIndex（totalNumberOfItems，pageSize）；
if（lastPageIndex（lastPageIndex-pivot））{
while（options.length

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。非常感谢。尽量避免使用软件包，因为我使用了太多的软件包。试着看看我是否能利用Math.ceil。至今仍在挣扎