How to Implement Pagination with JavaScript

Pagination is the process of dividing a large set of data into smaller individual pages, making the information easier to process and digest when delivered to the user. In this tutorial, we are going to demonstrate how to implement a JavaScript pagination system in three different ways.

Why you need JavaScript pagination

Creating a pagination system has several benefits. Imagine you have a blog with thousands of articles. It would be impossible to list all of them on one page. Instead, you could create a pagination system where the user can navigate to different pages.

Pagination also reduces server load, as only a segment of the data needs to be transferred every time a request is made. This enhances your application's overall performance, delivers a better user experience, and, as a result, improves the website's SEO.

Project preparation

To get started, let’s initialize a fresh Node.js project. Go to your work directory and run the following command:

bash

1npm init

bash

1npm install express pug sqlite3 prisma @prisma/client

For this lesson, we are going to use Prisma.js as an example ORM, but you should remember that our focus is the logic behind pagination, not the tools.

Initialize Prisma with the following command:

bash

1npx prisma init

A schema.prisma file should be created. Open it and make the following edits.

text

1.
2├── .env
3├── index.js
4├── libs
5├── package-lock.json
6├── package.json
7├── prisma
8│   ├── database.sqlite
9│   ├── migrations
10│   ├── schema.prisma   <===
11│   └── seed.js
12├── statics
13│   └── js
14│       └── app.js
15└── views
16 └── list.pug

prisma

1generator client {
2  provider = "prisma-client-js"
3}
4
5datasource db {
6  provider = "sqlite"
7  url      = env("DATABASE_URL")
8}
9
10model Post {
11  id          Int      @id @default(autoincrement())
12  title       String
13  content     String?
14}

Line 5 to 8 specifies the type of database used, which is sqlite in this case, and url defines the connection string, which is pulled from the environmental variables stored in our .env file.

text

1.
2├── .env   <===
3├── index.js
4├── libs
5├── package-lock.json
6├── package.json
7├── prisma
8│   ├── database.sqlite
9│   ├── migrations
10│   ├── schema.prisma
11│   └── seed.js
12├── statics
13│   └── js
14│       └── app.js
15└── views
16 └── list.pug

.env

env

1DATABASE_URL = "file:database.sqlite";

And line 10 to 14 create a new Posts table with a title and content.

For this tutorial, we will have to create a lot of posts to demonstrate how pagination works in JavaScript. To make things easier, instead of manually creating so many posts, let’s create a seed for our database. This ensures that the database will be filled automatically when we run database migrations.

Create a seed.js file under the prisma directory.

text

1.
2├── .env   <===
3├── index.js
4├── libs
5├── package-lock.json
6├── package.json
7├── prisma
8│   ├── database.sqlite
9│   ├── migrations
10│   ├── schema.prisma
11│   └── seed.js   <===
12├── statics
13│   └── js
14│       └── app.js
15└── views
16 └── list.pug

seed.js

javascript

1const { PrismaClient } = require("@prisma/client");
2const prisma = new PrismaClient();
3
4async function main() {
5  for (i = 0; i <= 99; i++) {
6    await prisma.post.create({
7      data: {
8        title: `Post #${i}`,
9        content: `Lorem ipsum dolor sit amet...`,
10      },
11    });
12  }
13}
14
15main()
16  .then(async () => {
17    await prisma.$disconnect();
18  })
19  .catch(async (e) => {
20    console.error(e);
21    await prisma.$disconnect();
22    process.exit(1);
23  });

Then, you must tell Prisma where this seed.js file is located. Open the package.json file and add the following keys:

package.json

json

1{
2  "name": "pagination",
3  "type": "module", // Enables ES Modules, more info here: https://www.thedevspace.io/course/javascript-modules
4  "version": "1.0.0",
5  "description": "",
6  "main": "index.js",
7  "prisma": {
8    "seed": "node prisma/seed.js" // <===
9  },
10  "scripts": {
11    "test": "echo \"Error: no test specified\" && exit 1"
12  },
13  "author": "",
14  "license": "ISC",
15  "dependencies": {
16    "@prisma/client": "^5.16.1",
17    "express": "^4.19.2",
18    "prisma": "^5.16.1",
19    "pug": "^3.0.3",
20    "sqlite3": "^5.1.7"
21  }
22}

Finally, run the migration by executing the following command:

bash

1npx prisma migrate dev

How to implement JavaScript pagination - the easy way

When you think about dividing items into pages, what is the easiest logic that comes to mind?

For example, you could retrieve all articles from the database as a single array and then split them into smaller arrays based on a certain page size using the splice() method.

index.js

javascript

1import express from "express";
2import { PrismaClient } from "@prisma/client";
3
4const app = express();
5const port = 3001;
6
7const prisma = new PrismaClient();
8
9app.set("views", "./views");
10app.set("view engine", "pug");
11
12app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
13app.use(express.json());
14
15app.use("/statics", express.static("statics"));
16
17// The easy way
18// ===========================================================
19app.get("/pages/:page", async function (req, res) {
20  const pageSize = 5;
21  const page = Number(req.params.page);
22  const posts = await prisma.post.findMany({});
23
24  const pages = [];
25  while (posts.length) {
26    pages.push(posts.splice(0, pageSize));
27  }
28
29  const prev = page === 1 ? undefined : page - 1;
30  const next = page === pages.length ? undefined : page + 1;
31
32  res.render("list", {
33    posts: pages[page - 1],
34    prev: prev,
35    next: next,
36  });
37});
38
39app.listen(port, () => {
40  console.log(
41    `Blog application listening on port ${port}. Visit http://localhost:${port}.`
42  );
43});

In this example, the page size is set to 5, meaning there will be five posts on every page.

Line 21, page is the current page number.

Line 22, posts is an array of all posts stored in the database.

Line 24 to 27, we split the array based on the page size. The splice(index, count) method takes two parameters, index and count. It splices and returns count number of elements from the array, starting from index. The remaining part of the array will be assigned to posts.

Line 29 and 30 each point to the previous and next page based on the current page number.

javascript

1const prev = page === 1 ? undefined : page - 1;
2const next = page === pages.length ? undefined : page + 1;

If the current page is 1, prev will equal undefined because there is no previous page in this case. Otherwise, it equals page - 1.

next, on the other hand, will equal to undefined if the current page equals pages.length, meaning the current page is the last one. Otherwise it equals page + 1.

And lastly, the posts for the current page (pages[page - 1]), along with prev and next, will be sent to the corresponding view (list.pug).

list.pug

pug

1ul
2    each post in posts
3        li
4            a(href="#") #{post.title}
5    else
6        li No post found.
7
8if prev
9    a(href=`/pages/${prev}`) Prev
10
11if next
12    a(href=`/pages/${next}`) Next

As you probably have realized, this solution has one problem. You have to retrieve all the posts from the database before splitting them into individual pages. This is a huge waste of resources, and in practice, it will likely take a very long time for the server to process this amount of data.

How to implement offset-based pagination in JavaScript

So we need a better strategy. Instead of retrieving all the posts, we can first determine an offset based on the page size and the current page number. This way, we can skip these posts and only retrieve the ones we want.

In our example, the offset equals pageSize * (page - 1), and we are going to retrieve the pageSize number of posts after this offset.

The following example demonstrates how this can be done using Prisma. The skip specifies the offset, and take defines the number of posts to retrieve after that offset.

javascript

1// Offset pagination
2// ===========================================================
3app.get("/pages/:page", async function (req, res) {
4  const pageSize = 5;
5  const page = Number(req.params.page);
6  const posts = await prisma.post.findMany({
7    skip: pageSize * (page - 1),
8    take: pageSize,
9  });
10
11  const prev = page === 1 ? undefined : page - 1;
12  const next = page + 1;
13
14  res.render("list", {
15    posts: posts,
16    prev: prev,
17    next: next,
18  });
19});

The frontend remains the same in this case.

list.pug

pug

1ul
2    each post in posts
3        li
4            a(href="#") #{post.title}
5    else
6        li No post found.
7
8if prev
9    a(href=`/pages/${prev}`) Prev
10
11if next
12    a(href=`/pages/${next}`) Next

Of course, other ORM frameworks can achieve the same result, but the logic remains the same. At the end of this tutorial, we will provide some resources to help you create JavaScript pagination systems using other ORM frameworks.

How to implement infinite scroll in JavaScript

Besides the offset-based pagination, there is a popular alternative called cursor-based pagination. This strategy is often used to create infinite scroll or the Load More button.

As the name suggests, the cursor-based pagination requires a cursor. When the user first visits a list of posts, the cursor points to the last item in the array.

When the user clicks on the Load More button, a request is sent to the backend, which returns the next batch of posts. The frontend takes the transferred data and programmatically renders the new posts, and the corresponding cursor is updated to point to the last item of this new batch of posts.

When it comes to actually implementing this cursor-based pagination, things get a bit more complicated, as this strategy requires the frontend and the backend to work together. But don’t worry, we’ll go through this step by step.

First of all, let’s create the root route (/). When the user visits this page, the first ten posts will be retrieved, and the cursor will point to the id of the last post. Recall that at(-1) retrieves the last element of the array.

javascript

1//Cursor-based pagination (load more)
2// ===========================================================
3const pageSize = 10;
4
5app.get("/", async function (req, res) {
6  const posts = await prisma.post.findMany({
7    take: pageSize,
8  });
9  const last = posts.at(-1);
10  const cursor = last.id;
11
12  res.render("list", {
13    posts: posts,
14    cursor: cursor,
15  });
16});

Notice that the cursor will be transferred to the frontend as well. This is very important, and you must make sure that the cursor on both ends is always in sync.

list.pug

pug

1button(id="loadMore" data-cursor=`${cursor}`) Load More
2
3ul(id="postList")
4    each post in posts
5        li
6            a(href="#") #{post.title}
7    else
8        li No post found.
9
10script(src="/statics/js/app.js")

The initial value of the cursor will be saved in the attribute data-cursor of the Load More button, which can then be accessed by JavaScript in the frontend. In this example, we put all the frontend JavaScript code inside /statics/js/app.js.

/statics/js/app.js

javascript

1document.addEventListener("DOMContentLoaded", function () {
2  const loadMoreButton = document.getElementById("loadMore");
3  const postList = document.getElementById("postList");
4
5  let cursor = loadMoreButton.getAttribute("data-cursor");
6
7  loadMoreButton.addEventListener("click", function () {
8    fetch("/load", {
9      method: "POST",
10      headers: {
11        "Content-Type": "application/json",
12      },
13      body: JSON.stringify({
14        cursor: cursor,
15      }),
16    })
17      . . .
18  });
19});

When the Load More button is clicked, a POST request will be sent to /load to retrieve the next batch of posts. Again, notice that you need to send the cursor back to the server, making sure they are always in sync.

Next, create a route handler for /load. This route handler takes the cursor and retrieves the next ten posts from the database. Remember to skip one so the post that cursor is pointing at will not be duplicated.

javascript

1app.post("/load", async function (req, res) {
2  const { cursor } = req.body;
3
4  const posts = await prisma.post.findMany({
5    take: pageSize,
6    skip: 1,
7    cursor: {
8      id: Number(cursor),
9    },
10  });
11
12  const last = posts.at(-1);
13  const newCursor = last.id;
14
15  res.status(200).json({
16    posts: posts,
17    cursor: newCursor,
18  });
19});

This handler will send a 200OK response back to the frontend, along with the retrieved posts, which will again be picked up by the frontend JavaScript code.

/statics/js/app.js

javascript

1document.addEventListener("DOMContentLoaded", function () {
2  const loadMoreButton = document.getElementById("loadMore");
3  const postList = document.getElementById("postList");
4
5  let cursor = loadMoreButton.getAttribute("data-cursor");
6
7  loadMoreButton.addEventListener("click", function () {
8    fetch("/load", {
9      method: "POST",
10      headers: {
11        "Content-Type": "application/json",
12      },
13      body: JSON.stringify({
14        cursor: cursor,
15      }),
16    })
17      .then((response) => response.json())
18      .then((data) => {
19        if (data.posts && data.posts.length > 0) {
20          data.posts.forEach((post) => {
21            const li = document.createElement("li");
22            const a = document.createElement("a");
23
24            a.href = "#";
25            a.textContent = post.title;
26
27            li.appendChild(a);
28            postList.appendChild(li);
29          });
30          cursor = data.cursor;
31        } else {
32          loadMoreButton.textContent = "No more posts";
33          loadMoreButton.disabled = true;
34        }
35      })
36      .catch((error) => {
37        console.error("Error loading posts:", error);
38      });
39  });
40});

🔗 Download the demo project

Conclusion

Both the offset and cursor strategies have their pros and cons. For example, the offset strategy is the only option if you want to jump to any specific page.

However, this strategy does not scale at the database level. If you want to skip the first 1000 items and take the first 10, the database must traverse the first 1000 records before returning the ten requested items.

The cursor strategy is much easier to scale because the database can directly access the pointed item and return the next 10. However, you cannot jump to a specific page using a cursor.

Lastly, before we wrap up this tutorial, here are some resources you might find helpful if you are creating pagination systems with a different ORM framework.

Happy coding!

Interested in Learning Web Development?

Starting from HTML, CSS to JavaScript, from language syntaxes to frameworks, from the frontend to the backend, we'll guide you through every step of your coding journey.

Get started from here 🎉