Site icon Learn Web Development & Programming, Artificial Intelligence, WordPress, Shopify Articles

How to Create Pagination with Node.js, MongoDB, Express and EJS Step by Step

Create Pagination with Node.js, MongoDB, Express and EJS Step by Step

In this article, I’ll show you how to create pagination with node js , MongoDB, Express.js, EJS, and Bootstrap. We will generate a new database, define data collection, fill this collection with information and display contents to the page using pagination.

Suppose we have a database that includes a lot of information (e.g. items) and we want to see everything on the website. We can only output items on the page, but it doesn’t look so good. We need pagination in such cases to display the results as a good format.

This post is generally designed for beginners who are involved in web development, so I will try to create all the explanations very detailed. But maybe this article will be helpful to an experienced developer.

Before start, you need to have Node.js, express.js, and MongoDB installed to read this post. You can download it from official websites and install it:

Node.js – https://nodejs.org/en/

See: How to Setup Environment to run node js code

See: How to install express

See: How to use mongoose with node.js

Get started by creating a fresh folder for this task and name it whatever you like. Then create additional folders and files within that directory to match the following structure:

Open models/add_password.js file and copy and paste the following code to create schema and mongoose connection:

 In this file we create a connection to MongoDB, PMS is a database name and password_details is a collection name.

Open routes/index.js file and copy and paste the following code to create POST route and a new page with HTML form :

Let’s create views/add-new-password.ejs page with form to send a POST request to our POST route.

Open views/add-new-password.ejs file and paste following HTML:

Now you can run your MongoDB, then run a server with node index.js command and go to 

http://localhost:3000/add-new-password

For easy viewing and editing of MongoDB content on your desktop, suggested to use MongoDB Compass

Add a new Password Details:

View in MongoDB Compass:

Output Password Details to Page with Pagination

First we need to create new route to render view-all-password page and output some necessary data to create pagination. Open routes/index.js file and paste following code:

Let me explain:

perPage variable contains max number of items on each page, page variable contains the current page number.

For each page, we need to skip ((perPage * page) – perPage) values (on the first page the value of the skip should be 0). output only perPage items as a limit.

Count all items in the collection with count() (we will use this value to calculate the number of pages

then render view-all-password page and send necessary data.

Create pagination with node js page:

Open views/view-all-password.ejs and paste following EJS:

Let me explain:

you will show pagination only if the number of pages more than 0:

Here check number of current page and if this value less than 5 we are output pagination links from 1 to current_page + 4:

and if this value more than 5 we will start output pagination link from current_page - 4 to current_page + 4, thus previous links on current_step - 5 will be hide.

Save HTML Form Record into MongoDB Database Using Express js and Mongoose js

Render Mongodb Data Records in HTML using EJS View Engine and express js

Conclusion:

This is How to Create Pagination with Node js, MongoDB, Express and EJS. You can use and customize this code according to your requirements.  Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Exit mobile version