Bootstrap Compatible Pagination Component – easyPagination.js

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