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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

extendslayout

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')

vardb=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);)

1

2

3

4

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 …