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

Question

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

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

if (numberOfPages> 20) {return}

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

Это не совсем 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]

Answer 2

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

У меня нет ответа на ваш вопрос, но вот пакет npm, который сам выполняет нумерацию страниц