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 = req.query.page we are writing page in the end because that's our query parameter.
Quarry parameter is the url what we have written
localhost:3000/?page=1
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.....