Different APIs use different pagination styles. Common ones:
Offset-based pagination Example: /products?limit=20&offset=40 You fetch the next page by increasing the offset.
Page-based pagination Example: /products?page=3&pageSize=20 You increment the page number.
Cursor-based pagination (recommended for large data) Example: /products?cursor=abc123 API returns a nextCursor to fetch the next batch.
Token-based / Continuation Token Used in cloud APIs (Azure, AWS). Example: ?continuationToken=xyz.
2. Handle Pagination Loop
Keep fetching data until there is no next page.
Example Logic:
var allItems = new List<Item>();
string nextPage = "1";
while (!string.IsNullOrEmpty(nextPage))
{
var response = await Api.GetData(nextPage);
allItems.AddRange(response.Items);
nextPage = response.NextPage; // could be page, offset, cursor, token
}
Here is how to handle API pagination using JavaScript, with clean, production-ready examples for all common pagination types.
1. Page-based Pagination (page=1,2,3...)
async function fetchAllPages() {
let page = 1;
let allData = [];
let hasMore = true;
while (hasMore) {
const res = await fetch(`/api/products?page=${page}&pageSize=20`);
const data = await res.json();
allData.push(...data.items);
hasMore = data.hasMore; // API flag
page++;
}
console.log(allData);
}
2. Offset-based Pagination (limit & offset)
async function fetchWithOffset() {
let offset = 0;
const limit = 20;
let allItems = [];
while (true) {
const res = await fetch(`/api/products?limit=${limit}&offset=${offset}`);
const data = await res.json();
allItems.push(...data.items);
if (data.items.length < limit) break; // No more pages
offset += limit;
}
console.log(allItems);
}
3. Cursor-based Pagination (most scalable)
API response example:
{
"items": [...],
"nextCursor": "abc123"
}
JavaScript code:
async function fetchCursorPagination() {
let cursor = null;
let allItems = [];
let url = "/api/list?limit=20";
while (true) {
const res = await fetch(cursor ? `${url}&cursor=${cursor}` : url);
const data = await res.json();
allItems.push(...data.items);
if (!data.nextCursor) break; // No more pages
cursor = data.nextCursor;
}
console.log(allItems);
}
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
Privacy Policy.
1. Understand the Pagination Type
Different APIs use different pagination styles. Common ones:
Example:
/products?limit=20&offset=40You fetch the next page by increasing the offset.
Example:
/products?page=3&pageSize=20You increment the page number.
Example:
/products?cursor=abc123API returns a
nextCursorto fetch the next batch.Used in cloud APIs (Azure, AWS).
Example:
?continuationToken=xyz.2. Handle Pagination Loop
Keep fetching data until there is no next page.
Example Logic:
3. Handle Limits and API Constraints
When implementing pagination:
4. Example JSON Response from a Paginated API
5. (Frontend UI)
Here is how to handle API pagination using JavaScript, with clean, production-ready examples for all common pagination types.
1. Page-based Pagination (page=1,2,3...)
2. Offset-based Pagination (limit & offset)
3. Cursor-based Pagination (most scalable)
API response example:
JavaScript code:
4. Pagination With Async/Await + Error Handling
5. Infinite Scroll (Frontend UI)
6. Best Practices
hasMoreornextCursor