Node.js AJAX Pagination with MongoDB + Search + Sort + Filter [Tutorial]


Create a simple pagination that loads the content dynamically from NodeJs server. The Full Tutorial in PDF and HTML format will be available for download after purchasing. Designed and developed by Carl Victor C. Fontanos.

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

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
            input(type='hidden', value='')
                    label Per Page: 
                        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')
                    label Order By: 
                        option(value='name') Title
                        option(value='price') Price
                        option(value='quantity') Quantity
                        option(value='ASC') ASC
                        option(value='DESC') DESC
                input.btn.btn-primary.post_search_submit.m-b(type='submit', value='Filter')

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;

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 

Purchase now to reveal the rest of the tutorial



Do you need help with a project? or have a new project in mind that you need help with?

Contact Me