Диапазон нумерации страниц в Reactjs

#reactjs #pagination

#reactjs #разбивка на страницы

Вопрос:

Пожалуйста, я разбиваю свои данные на страницы с помощью кнопок next и prev. Как бы я ни хотел сказать, покажите мне первые 5 (1-5) на первой странице, но я не понимаю, как это сделать.

Это то, что у меня сейчас есть:
любая обратная связь.

 import React, { useState } from 'react'


const Pagination = ({ dataPerPage, totaldata, paginate }) => {
  const [currentPage, setCurrentPage] = useState(0)
  const pageNumbers = []

  const int = Math.ceil(totaldata / dataPerPage)
  if (int === 1) return null

  for (let i = 1; i <= int; i  ) {
    pageNumbers.push(i)
  }

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.includes(currentPage - 1) amp;amp; (
          <a
            onClick={() => {
              setCurrentPage(currentPage - 1)
              paginate(currentPage - 1)
            }}
            href="#"
            className="page-link"
          >
            Prev
          </a>
        )}
        {pageNumbers.map(number => (
          <li key={number} className="page-item">
            <a
              onClick={() => {
                setCurrentPage(number)
                paginate(number)
              }}
              href="#"
              className="page-link"
            >
              {number}
            </a>
          </li>
        ))}

        {pageNumbers.includes(currentPage   1) amp;amp; (
          <a
            onClick={() => {
              setCurrentPage(currentPage   1)
              paginate(currentPage   1)
            }}
            className="page-link"
            href="#"
          >
            Next
          </a>
        )}
      </ul>
    </nav>
  )
}

export default Pagination;
 

Ответ №1:

Проверьте этот пакет: react-js-разбивка на страницы

https://www.npmjs.com/package/react-js-pagination

Комментарии:

1. Спасибо, но я хочу сделать это с помощью чистого react @Mohamed Muhsin