Building an e-Commerce website with Node – Part 37 – Pagination in Node.js

We are going to add a pagination system to organize our products. First we need to create a new page under the views/main folder. Name the newly created file product-main.ejs.

We also need to upgade our home routes. Go to the routes folder and open the main.js file. Look for the home router (it should be above the “about” router. Replace the home router with the one shown below.

router.get('/', function(req, res, next) {

  if (req.user) {
    paginate(req, res, next);
  } else {
    res.render('main/home');
  }

});

router.get('/page/:page', function(req, res, next) {
  paginate(req,res,next);
});

The code includes the pagination code as well. The code says that if the user is registered then run the function paginate otherwise render the home page. Below is the function function paginate(req, res, next). I placed this code in the main.js file at the beginning of it.

function paginate(req, res, next) {

  var perPage = 9;
  var page = req.params.page;

  Product
    .find()
    .skip( perPage * page)
    .limit( perPage )
    .populate('category')
    .exec(function(err, products) {
      if (err) return next(err);
      Product.count().exec(function(err, count) {
        if (err) return next(err);
        res.render('main/product-main', {
          products: products,
          pages: count / perPage
        });
      });
    });

}

We don’t want to show all of the products at once. This will create a big problem for our database. That’s why we use .skip and .limit.

The .skip will skip the number of products equal to the number of products per page (9) multiplied by the number of the page (1 or 2 or 3 or ….).

The .limit limits the number of the products shown in a document.

The .count is another Mongoose method. We need it because we need to count how many pages we have by dividing the total number of products by the number of products per page.

Before going further open the navbar.ejs and look for this line of code (it is the 7th row), <a class="navbar-brand" href="#">Project name</a> and replace it with <a class="navbar-brand" href="/">MyEshop</a>.

Next step would be to acctually create the code for the product-main.ejs page. Type the following code into the product-main.ejs page.

<% layout('layout') -%>


<div class="jumbotron" id="navbar-gap">
  <div class="container">
    <h1 class="text-center"> Find your favourite Product</h1>
    <p class="text-center">Search many of Ecommerce's products</p>
    <div class= "row">
      <div class="col-md-6 col-md-offset-3">
        <div class="input-group col-md-12">
          <input type="text" id="search" class="form-control input-lg" name="search_term" placeholder="Search for a Product ...">
          <span class="input-group-btn">
          <button type="submit" class="btn btn-primary btn-lg"><i class="glyphicon glyphicon-search"></i></button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="container">

  <div class="row" id="searchResults">

    <% for (var i = 0; i < products.length; i++) { %>
    <div class="col-md-4">
      <a href="/product/<%= products[i]._id %>">
        <div class="thumbnail">
          <img src="<%= products[i].image %>">
          <div class="caption">
            <h3><%= products[i].name %></h3>
            <p><%= products[i].category.name %></h3>
            <p>$<%= products[i].price %></p>
          </div>
        </div>
      </a>
    </div>
    <% } %>

    <ul class="pagination text-center">
      <li>
        <% for(var i = 1; i <= pages; i++) { %>
          <% if (i === 1)  {  %>
            <li><a href="/"><%= i %></a></li>
          <% } else { %>
            <li><a href="/page/<%= i %>"><%= i %></a></li>
          <% } %>

        <% } %>
      </li>

    </ul>


  </div>
</div>

Start the node server and the elasticsearch server and go to http://localhost:3000. Login then go to your home page. You should see just nine products displayed on the page and the pagination at the bottom of the page.

Let’s explain what the code above does.
First is the Jumbotrone. It is selfexplanatory.
Second part loops all the products. This is the part we apply the pagination to.
The third adds the pagination.

Leave a Reply