Understanding and Implementing Pagination in Web Applications
Pagination is a crucial technique used in web applications to split large datasets into smaller, manageable chunks. This practice not only enhances the user experience but also significantly improves the search engine optimization (SEO) of your web application.
Dozens of Useful API Explanations with Code Snippets
API 1: Basic Pagination
This basic example demonstrates how to paginate an array of items.
function paginateArray(arr, page_size, page_number) {
return arr.slice((page_number - 1) * page_size, page_number * page_size);
}
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(paginateArray(items, 4, 1));
// Output: [1, 2, 3, 4]
API 2: Server-Side Pagination with Node.js and Express
This example demonstrates server-side pagination using Node.js and Express.
const express = require('express');
const app = express();
const items = Array.from({ length: 100 }).map((_, index) => `Item ${index + 1}`);
app.get('/items', (req, res) => {
const page = parseInt(req.query.page) || 1;
const limit = parseInt(req.query.limit) || 10;
const startIndex = (page - 1) * limit;
const endIndex = page * limit;
const results = {};
if (endIndex < items.length) {
results.next = {
page: page + 1,
limit: limit
};
}
if (startIndex > 0) {
results.previous = {
page: page - 1,
limit: limit
};
}
results.results = items.slice(startIndex, endIndex);
res.json(results);
});
app.listen(3000, () => console.log('Server running on port 3000'));
API 3: Client-Side Pagination
This example shows how to implement pagination on the client-side using JavaScript.
const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"];
const itemsPerPage = 2;
let currentPage = 1;
function displayItems() {
const start = (currentPage - 1) * itemsPerPage;
const end = start + itemsPerPage;
const paginatedItems = items.slice(start, end);
console.log(paginatedItems);
}
function goToPage(page) {
currentPage = page;
displayItems();
}
goToPage(1);
// Output: ["Item 1", "Item 2"]
App Example With Introduced APIs
Now, let’s build a simple app integrating the introduced APIs.
Example: Full-Stack Paginated App
// Backend (Node.js and Express)
const express = require('express');
const app = express();
const items = Array.from({ length: 50 }).map((_, index) => `Item ${index + 1}`);
app.get('/api/items', (req, res) => {
const page = parseInt(req.query.page) || 1;
const limit = parseInt(req.query.limit) || 10;
const startIndex = (page - 1) * limit;
const endIndex = page * limit;
const results = {};
if (endIndex < items.length) {
results.next = {
page: page + 1,
limit: limit
};
}
if (startIndex > 0) {
results.previous = {
page: page - 1,
limit: limit
};
}
results.results = items.slice(startIndex, endIndex);
res.json(results);
});
app.listen(3000, () => console.log('Server running on port 3000'));
// Frontend (HTML + JavaScript)
Paginated Items
With these examples, you now have the tools to implement effective and SEO-friendly pagination in your web applications.
