Pagination patterns in Node.js - Step-by-Step Execution

Concept Flow - Pagination patterns

Start Request with page & limit

↓

Calculate offset = (page-1)*limit

↓

Query database with offset & limit

↓

Receive subset of data

↓

Send data + pagination info

↓

Client displays current page data

↓

User clicks next/prev page

↩Back to Start Request

This flow shows how pagination works by calculating which data slice to fetch and then displaying it, looping as user navigates pages.

Execution Sample

Node.js

const page = 2;
const limit = 3;
const offset = (page - 1) * limit;
const data = allItems.slice(offset, offset + limit);
console.log(data);

This code fetches the second page of data with 3 items per page from a list.

Execution Table

Step	Variable	Value	Action	Output
1	page	2	Set current page
2	limit	3	Set items per page
3	offset	(2-1)*3=3	Calculate offset
4	data	allItems.slice(3,6)	Slice data from index 3 to 5	[item4, item5, item6]
5	console.log		Print data	[item4, item5, item6]
6	-	-	End of pagination fetch	No more steps

💡 All steps done, data for page 2 with limit 3 fetched and displayed

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
page	undefined	2	2	2	2	2
limit	undefined	undefined	3	3	3	3
offset	undefined	undefined	undefined	3	3	3
data	undefined	undefined	undefined	undefined	[item4, item5, item6]	[item4, item5, item6]

Key Moments - 3 Insights

Why do we calculate offset as (page - 1) * limit?

Because pages start at 1, but array indexes start at 0, so offset shifts to correct start index. See execution_table step 3.

What happens if page is 1?

Offset becomes 0, so data slice starts from the beginning. This is shown by the formula in step 3.

Why do we slice from offset to offset + limit?

To get exactly 'limit' number of items starting at offset. See step 4 where slice(3,6) gets 3 items.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of offset at step 3?

A 3

B 2

C 6

D 0

💡 Hint

Check the 'Value' column in step 3 of execution_table

At which step is the data slice created?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for the action 'Slice data' in execution_table

If limit changes to 5, how does the slice range change at step 4?

A slice(3,6)

B slice(2,7)

C slice(3,8)

D slice(0,5)

💡 Hint

Offset stays 3, slice ends at offset + limit, see variable_tracker for limit

Concept Snapshot

Pagination fetches a subset of data by:
1. Setting page number and items per page (limit)
2. Calculating offset = (page-1)*limit
3. Slicing data from offset to offset+limit
4. Returning this slice for display
This pattern helps load data in chunks for better performance.

Full Transcript

Pagination patterns in Node.js involve calculating which part of a data list to show based on the current page and how many items per page. We start by setting the page number and limit. Then we calculate the offset by multiplying (page minus one) by the limit. This offset tells us where to start slicing the data array. We slice from offset to offset plus limit to get the current page's items. Finally, we send this slice to the client to display. This process repeats as the user navigates pages, fetching only the needed data each time.