Author: | wpayze |
---|---|
Views Total: | 764 views |
Official Page: | Go to website |
Last Update: | August 18, 2022 |
License: | MIT |
Preview:

Description:
A simple, lightweight, and highly customizable pagination library that works with the latest Bootstrap 5 framework.
How to use it:
1. Load the easyPagination.js library in the document.
<script src="./easyPagination.js"></script>
2. Create a DIV placeholder for the content to be paginated.
<div id="list"> </div>
3. Create a container to hold the pagination buttons.
<div id="pagination"></div>
4. Define an array of items to be paginated.
const items = [ "item 1", "item 2", "item 3", // ... ];
5. Initialize the easyPagination.js.
const pagination = easyPagination({ // items items, // number of items per page rows: 5, // pagination container buttonsWrapper: "#pagination", // handle items here handlePaginatedItems: (items) => { const list = document.getElementById("list"); list.innerHTML = ""; items.forEach((item) => { list.innerHTML += `<li class="list-group-item">${item}</li>`; }); } });
6. Render the pagination buttons inside the container you just created.
pagination.paginate();
7. All default CSS classes.
const pagination = easyPagination({ buttonClass: "page-link", nextClass: "page-link", prevClass: "page-link", nextText: "next >", prevText: "< prev", activeClass: "active", });
8. Update the number of items per page.
pagination.changeRows(20);
9. Update the items.
pagination.changeItems(newItems);
10. Go to the next page.
pagination.next();
11. Back to the previous page.
pagination.prev();
Changelog:
08/18/2021
- bugfix
06/20/2021
- added the change page when changing items