Как я могу ограничить количество страниц, отображаемых в нумерации страниц

Как я могу ограничить количество страниц, отображаемых в нумерации страниц?

Я создаю компонент разбивки на страницы, используя React, и после того, как я его использовал, я понял, что он показывает все страницы, и в результате расширил всю страницу, так что вам придется прокручивать их для просмотра остальных страниц. Как я могу ограничить это только 20 страницами и позволить количеству страниц увеличиваться каждый раз, не занимая место?

Дальнейшее, что я получил к логике, было это.

if (numberOfPages{amp}gt; 20) {return}

numberOfPages возвращает общее количество страниц.

Я не уверен, какой метод использовать для такой задачи.

Вот мой код

 const Pagination = ({ numberOfPages, page, setPage }: any) ={amp}gt; { const pageNumbers = (numberOfPages: number) ={amp}gt; { let pages = []; for (let i = 1; i {amp}lt;= numberOfPages; i  ) { pages.push( {amp}lt;span key={i} onClick={e ={amp}gt; setPage(i)} className={page === i ? "active" : ""} {amp}gt; {i} {amp}lt;/span{amp}gt; ); // if (numberOfPages {amp}gt; 20 ) { // return // } } return pages; }; return ( {amp}lt;div className="pagination"{amp}gt; {amp}lt;div className="page-numbers"{amp}gt; {amp}lt;span onClick={e ={amp}gt; (page === 1 ? {} : setPage(page - 1))} className={page === 1 ? "disabled" : ""} {amp}gt; {amp}amp;laquo; {amp}lt;/span{amp}gt; {pageNumbers(numberOfPages)} {amp}lt;span onClick={e ={amp}gt; (page === numberOfPages ? {} : setPage(page   1))} className={page === numberOfPages ? "disabled" : ""} {amp}gt; {amp}amp;raquo; {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); }; export default Pagination; ``` 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector