Om paginering in de react-app te gebruiken, is er dit npm-pakket met de naam react-js-pagination, dat heel gemakkelijk te gebruiken en ook effectief is.
Eerste vereiste
-Maak-reageer-app
-Bootstrap
Ik zal niet leren hoe je een react-app maakt.
Installeer React-js-Pagination
Installeren met npm:
npm i react-js-pagination
OF Installeren met garen:
yarn add react-js-pagination
Paginering importeren
import Pagination from "react-js-pagination";
Actieve pagina instellen
const [activePage, setActivePage] = useState(1);
Pagineringcomponent maken
<Pagination
activePage={activePage}
itemsCountPerPage={10}
totalItemsCount={data.count}
pageRangeDisplayed={5}
onChange={onChangePaginate}
innerClass="pagination"
itemClass="page-item"
activeLinkClass="page-link active"
linkClass="page-link"
prevPageText="Previous"
nextPageText="Next"
/>
instelling aanwijzig functie
const onChangePaginate = (pageNumber) => {
setActivePage(pageNumber);
// to set offset
console.log(pageNumber * 10 - 10)
};
Bezoek React-JS-Pagination voor meer informatie.