Easy Pagination JS

A simple library for pagination, compatible with Bootstrap.

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 itemsToPaginate = [
  "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: itemsToPaginate,
  rows: 5,
  buttonsWrapper: "#pagination",
  handlePaginatedItems: (paginatedItems) => {
    //Filling the list with the paginated items.
    const list = document.getElementById("list");
    list.innerHTML = "";
    paginatedItems.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 changes current page to 1 and 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 are going to 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"