For this tutorial we will be using Jade Templating, you can use other templating modules but I’m afraid I wont be able to provide you further support. Jade templating is easy to learn, if you know HTML then it should only take you a few minutes to learn Jade. One rule you have to take note when using Jade is to be very careful with the spaces, this tutorial make use of tabs for indention. Another thing to note when using Jade is you can only choose one kind of indention – spaces or tabs, but you can’t use both at the same time.

This tutorial make use of Express Module so you should have that setup before getting started. I would assume that you already have basic knowledge working with MongoDB and that you already have it set up in your computer.

Required Modules

• Express
• Async
• Monk
• MongoDB

Let’s Start Coding

We first create all the fields for our search, sort and filters as well as the container that we will be using for rendering the pagination. You can save the code bellow in a file named products.jade under your views folder

extends layout

block content
    .container.products-view-all
        form.post-list
            input(type='hidden', value='')
        .clearfix
            article.navbar-form.navbar-left.p-0.m-0.ml-b
                .form-group
                    label Per Page: 
                    select.form-control.post_max.m-b
                        option(value='20') 20
                        option(value='50') 50
                        option(value='100') 100
                label Search Keyword: 
                    input.form-control.post_search_text.m-b(type='text', placeholder='Enter a keyword')
                .form-group
                    label Order By: 
                    select.form-control.post_name.m-b
                        option(value='name') Title
                        option(value='price') Price
                        option(value='quantity') Quantity
                    select.form-control.post_sort.m-b
                        option(value='ASC') ASC
                        option(value='DESC') DESC
                input.btn.btn-primary.post_search_submit.m-b(type='submit', value='Filter')
        hr
            
        .clearfix
            .pagination-container.clearfix
            .pagination-nav

Include MongoDB Connection in your app.js

/* MongoDB connection */
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodetest1'); // 27017 is the default port for our MongoDB instance.

To make our DB accessible to our router, add the following lines in your app.js (just above app.use(‘/’, routes);)

app.use(function(req, res, next){
    req.db = db;
    next();
});

Client Side

The script bellow is the handler of all user clicks coming from the front-end. You can save it in a file called MyPaginationClass.js under public/javascripts. Make sure to include this script file in your layout.jade …

Click here to download the FULL TUTORIAL