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.
Step 3: Install and setup paginationx npm package for nodejs. Follow this guide
Top comments (0)