Easy Pagination JS
A simple library for pagination, compatible with Bootstrap.
Check my website here.
Demo
Check this Demo here. 
Example
Import the file
<script src="./easyPagination.js"></script>
Add a div for the items, and one for the pagination buttons.
<div id="list"></div>
<div id="pagination"></div>
Create some example items.
const items = [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5",
"item 6",
"item 7",
"item 8",
"item 9",
"item 10",
];
Create the pagination object
const paginationOptions = {
items,
rows: 5,
buttonsWrapper: "#pagination",
handlePaginatedItems: (items) => {
const list = document.getElementById("list");
list.innerHTML = "";
items.forEach((item) => {
list.innerHTML += `<div>${item}</div>`;
});
},
};
Call easyPagination and execute paginate()
easyPagination(paginationOptions).paginate();
Or you can create a pagination object to call different methods.
const pagination = easyPagination(paginationOptions);
pagination.paginate();
pagination.changeRows(50);
Note: you can import Bootstrap CDN for pagination buttons to look nice.
Methods
| Syntax | Parameters | Description | Example |
|---|---|---|---|
paginate() |
page (default: 1), loadButtons (default: true) |
Paginates the items and creates the buttons (by default). | pagination.paginate() |
changeRows() |
newRows (default: 10) |
Updates the rows per page, also updates the buttons. | pagination.changeRows(25) |
changeItems() |
newItems |
Updates the items, also updates the buttons. | pagination.changeItems(items) |
next() |
Fires next > button behavior. |
pagination.next() |
|
prev() |
Fires the < prev button behavior. |
pagination.prev() |
Available Options
| Syntax | Description | Default Value |
|---|---|---|
items |
Items to paginate. (Array) | |
rows |
Rows per page. | 10 |
buttonsWrapper |
CSS Selector where the buttons where be injected. | |
handlePaginatedItems |
Function that receives the paginated items as parameter, if this is null paginate() will return the items. |
|
buttonsContainerClass |
CSS Class for the buttons container. | "pagination" |
buttonClass |
CSS Class for each button. | "page-link" |
nextClass |
CSS Class for the "Next" button. | "page-link" |
prevClass |
CSS Class for the "Prev" button. | "page-link" |
nextText |
Text for the "Next" button. | "next >" |
prevText |
Text for the "Prev" button. | "< prev" |
activeClass |
CSS Class for the current pagination button. | "active" |
3 May 18, 2022
138 Jan 2, 2023
4 May 3, 2022
14 Jan 3, 2023
14 Feb 10, 2022
2 Sep 21, 2022
2.6k Dec 28, 2022
2 Apr 21, 2022
5 Oct 21, 2022
45 Dec 19, 2022