top of page

Hard Coded Pagination in Node JS without 3rd party packages....

We have made a hard coded pagination its just the basic of pagination and it will look this

pagination which allows us to split our data across multiple pages, something we typically want to do when you work with a lot of data.

Adding Pagination Links

There are a lot of third Packages but we can do that without the help of any other third party application we will make pagination from scratch in our application.

How can we Implement pagination?

lets work on our application only

This is the index file where we show all our products in our e-commerce website

<%- include('../includes/head.ejs') %> <link rel="stylesheet" href="/css/product.css"> </head> <body> <%- include('../includes/navigation.ejs') %> <main> <% if (prods.length> 0) { %> <div class="grid"> <% for (let product of prods) { %> <article class="card product-item"> <header class="card__header"> <h1 class="product__title"> <%= product.title %> </h1> </header> <div class="card__image"> <img src="/<%= product.imageUrl %>" alt="<%= product.title %>"> </div> <div class="card__content"> <h2 class="product__price">$<%= product.price %> </h2> <p class="product__description"> <%= product.description %> </p> </div> <div class="card__actions"> <a href="/products/<%= product._id %>" class="btn">Details</a> <% if (isAuthenticated) { %> <%- include('../includes/add-to-cart.ejs', {product: product}) %> <% } %> </div> </article> <% } %> </div> <% } else { %> <h1>No Products Found!</h1> <% } %> </main> <%- include('../includes/end.ejs') %>

What we have to change in this is....

just before our if blocks ends add a class with links.

</div> <section class="pagination"> <a href="/?page=1">1</a> <a href="/?page=2">2</a> </section> <% } else { %> <h1>No Products Found!</h1> <% } %> </main> <%- include('../includes/end.ejs') %>

In the CSS we need to change few things soo that it will look better soo its better to add these

<section class="pagination">

So pagination is our class

In our Css we need to add this

.pagination { margin:2rem; text-align: center; } .pagination a { text-decoration: none; color: #00695c; padding : 0.5rem; border: 1px solid #00695c; margin: 0 1rem; } .pagination a:hover, .pagination a:active { background: #00695c; color: white; }

Now retrieving a chunk of data....

we can get query parameters on the query object provided by expressjs

In the main page where we are displaying all our products in Shop.js in our case

go to index and type

const page = we are writing page in the end because that's our query parameter.

Quarry parameter is the url what we have written


This is the query parameter ?page=1

Now with that, we just need to define how many items should be displayed per page

const ITEMS_PER_PAGE = 2;

Mongo Db find() give us all the items but we can actually control this too.

In mongodb also in mongoose there is a skip function, We can add this on a cursor and find does return a cursor to skip the first

const ITEMS_PER_PAGE = 2;

now use the limit method

The limit method as the name suggests limits the amount of data we fetch to the number we specify here and here I can pass items per page because that is my item limit per page.

Product.find() .skip((page - 1) * ITEMS_PER_PAGE) .limit(ITEMS_PER_PAGE) .then(products => { res.render('shop/index', { prods: products, pageTitle: 'Shop', path: '/' }); })

This one what we use earlier is a hard coded Pagination Now lets see how can we make a dynamic Pagination.....

0 views0 comments

Recent Posts

See All


SQL UNION Operator UNION operator is used to combine the results of two or more SELECT statements Every SELECT statement within UNION must have the same number of columns The columns must also have si


JOIN clause is used to combine rows from two or more tables. INNER JOIN === selects records that have matching values in both tables SELECT Orders.OrderID, Customers.CustomersID, Orders.OrdersDate FRO


bottom of page