Tutorial
Pagination

Add Pagination

Add Pagination in Rest API

▶️ What is pagination

  • Page
  • Page Number
  • Limit
  • So basically pagination is a way to limit the number of results that are returned from the API. This is useful when you have a large number of results and you don't want to return all of them at once. You can also use pagination to return results in chunks, which is useful if you want to display results in a list or table.
  • For example, when you search for something on Google, you'll see a list of results. If you scroll to the bottom of the page, you'll see a link that says "Next". Clicking on that link will take you to the next page of results. This is pagination in action.

▶️ Problem

Suppose I do http://localhost:5000/api/tasks?page=4 I can't see the 4th page of the results.

▶️ Solution

  1. Create a variable page and limit and assign it to req.query.page and req.query.limit respectively.
controllers/task.js
 
  let page = Number(req.query.page) || 1;
  let limit = Number(req.query.limit) || 3;
  1. Add a formula to calculate the skip and totalPages and assign it to skip and totalPages respectively.
controllers/task.js
 
  let skip = (page - 1) * limit;

Let's understand the formula.

  • Let's say user say page = 2 & limit = 3
  • So skip = (2 - 1) * 3 = 3
  • This mean data will show three data but skip first three data and show next three data from 4th data.
  1. Add a formula to calculate the totalPages and assign it to totalPages respectively.

apiData we created in the previous chapter.

controllers/task.js
 
 apiData = apiData.skip(skip).limit(limit);

You can test the skip function also by adding skip let's test this on testing server.

image

image

  1. And now pass nbHits:myData.length
controllers/task.js
 
res.status(200).json({ myData , nbHits: myData.length});
  • nbHits is the total number of results that match the query. This is useful if you want to display the total number of results on the page.
  1. Let's test this on production server.

image

controllers/task.js <- entire code
 
const Task = require("../models/Task");
 
const getAllTasks = async (req, res) => {
  const { priority, status, description, sort, select } = req.query;
  const queryObject = {};
 
  if (priority) {
    queryObject.priority = { $regex: priority, $options: "i" };
  }
 
  if (status) {
    queryObject.status = { $regex: status, $options: "i" };
  }
 
  if (description) {
    queryObject.description = { $regex: description, $options: "i" };
  }
 
  let apiData = Task.find(queryObject);
 
  if (sort) {
    let sortProblem = sort.replace(",", " ");
    apiData = apiData.sort(sortProblem);
  }
 
  if (select) {
    let selectProblem = select.split(",").join(" ");
    apiData = apiData.select(selectProblem);
  }
 
  let page = Number(req.query.page) || 1;
  let limit = Number(req.query.limit) || 3;
 
  //formula for skipping
  let skip = (page - 1) * limit;
 
  apiData = apiData.skip(skip).limit(limit);
 
 
 
  console.log(queryObject);
 
  const myData = await apiData;
 
  res.status(200).json({ myData , nbHits: myData.length});
};
 
 
 
 
 
const getAllTasksTesting = async (req, res) => {
  const myData = await Task.find(req.query).skip(2);
 
  res.status(200).json({ myData });
};
 
module.exports = {
  getAllTasks,
  getAllTasksTesting,
};