NPM Package & CDN for Pagination in Javascript / Nodejs

Hello, I am someone who dislikes repetitive tasks, so to streamline the process of implementing pagination, I developed an npm package named paginationx for the backend use and a CDN for frontend integration. These tools simplify pagination setup and save time by eliminating the need to write the same code repeatedly.

In this article will be doing only 2 steps,

1. To setup the npm package for the nodejs backend.
2. To setup the cdn for pagination in the ejs template frontend.

1. NPM Package Implementation
To use the paginationx npm package for Node.js, follow these steps:

Step 1: Install Paginationx npm package

npm i paginationx

Step 2: Import the module and use them in your controller.

const pagination = require("paginationx")

const users = async (req, res) => {
  try {
    const paginate = await pagination(User, 2, req.query)

    res.render("admin/user", {
      users: paginate.data,
      totalPages: paginate.totalPages,

    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
};

In the code above, we are passing three arguments to the pagination function:

1. First argument: The model name representing the data that we need to apply pagination to.
2. Second argument: Number of items to be shown on a single page.
3. Third argument (optional): Pass the req.query data. Use req.query only if you are using the pagination CDN to handle pagination on the frontend.

The pagination function (const paginate = await pagination(User, 2, req.query)) returns paginated data and total pages:

• To access the paginated data, use pagination.data.
• To access the total number of pages, use pagination.totalPages.

Step 3: Pass the paginated data and total pages count to the ejs.

{
      users: paginate.data,
      totalPages: paginate.totalPages,
}

Note: Key for passing total pages should exactly be totalPages.

---

2. Pagination CDN Implementation

To implement pagination in the ejs template engine, follow these steps.

Step 1: Include the Pagination CDN
Add the following script at the bottom of your EJS file:

<script src="https://cdn.jsdelivr.net/gh/SujithVSuresh/pagination-cdn@master/pagination.js"></script>

Step 2: Add Pagination Controls to Your Template
Add the following code where you want the pagination buttons to appear:

          <div class="d-flex justify-content-center">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li class="page-item" id="prevBtn"><a class="page-link text-black" href="#">Previous</a></li>
                <% for(let i=1; i<= totalPages; i++){ %>
                <li class="page-item pagenationBtn" data-page-no="<%= i %>"><a class="page-link text-black"><%= i %></a></li>
                <% } %>
                <li class="page-item" total-pages="<%= totalPages %>" id="nxtBtn"><a class="page-link text-black" href="#">Next</a></li>
              </ul>
            </nav>
          </div>

The above code provides the interface for pagination. Ensure that you align and style the content properly according to your application's design.

How to customise the pagination button?
You can give custom styles to the pagination button, but you have to strictly include some of the class, id and properties, inorder to make that pagination works properly in the frontend.
Here we have three kinds of button:

1. Previous button
2. Collection of page number button
3. Next button

Next lets look what all id, class and properties should be included in each of these button to make it work well.

• Previous button:

<li id="prevBtn"><a>Previous</a></li>

The above code can be considered as the base cod for the previous button section. Inside the li tag an id with name 'prevBtn' should be provided.

• Page number button:

<% for(let i=1; i<= totalPages; i++){ %>
     <li class="pagenationBtn" data-page-no="<%= i %>">
     <a><%= i %></a>
     </li>
<% } %>

The above code can be considered as the base code for the page number button section. li tag should be inside the for loop to show all the page number available. In the li tag you should include the class named 'pagenationBtn' and the data-page-no="<%= i %>" attribute.

• Next button: The below code can be considered as the base code for the next button. In the li tag you should include the id named 'nxtBtn' and the total-pages="<%= totalPages %>" attribute.

<li total-pages="<%= totalPages %>" id="nxtBtn"><a>Next</a></li>

---

Comments

[Adhnan P]

How can i change pagination button style is there any inbuilt class to do this

[Sujith V S]

You can give the custom style for your paginatin button, but the only thing is you have to specify the same class and id name that has been given in the demo code of the button for that cdn to work properly.

[Sujith V S]

guide for customizing the pagination button code is included at the bottom of this blog post.