Pagination
Pagination is a common feature in web applications that allows users to navigate through a large set of data that is split into smaller, more manageable pages. Here’s an example of how to implement pagination using JavaScript:
// Define constants for page size and initial page number
const PAGE_SIZE = 10;
let currentPage = 1;
// Get a reference to the DOM elements we’ll be updating
const itemList = document.getElementById(‘item-list’);
const prevButton = document.getElementById(‘prev-button’);
const nextButton = document.getElementById(‘next-button’);
const totalPagesElement = document.getElementById(‘total-pages’);
// Define a function to render the current page of items
function renderItems() {
totalPagesElement.textContent = `Total Pages: ${totalPages}`;
// Calculate the start and end index of the current page
const startIndex = (currentPage – 1) * PAGE_SIZE;
const endIndex = startIndex + PAGE_SIZE;
// Get the items for the current page
const itemsForPage = items.slice(startIndex, endIndex);
// Clear the item list
itemList.innerHTML = ”;
// Render each item as a list item
itemsForPage.forEach((item) => {
const li = document.createElement(‘li’);
li.textContent = item;
itemList.appendChild(li);
});
// Disable/enable previous and next buttons based on current page number
if (currentPage === 1) {
prevButton.disabled = true;
} else {
prevButton.disabled = false;
}
if (currentPage === totalPages) {
nextButton.disabled = true;
} else {
nextButton.disabled = false;
}
}
// Define a function to handle clicking the previous button
function handlePrevClick() {
if (currentPage > 1) {
currentPage–;
renderItems();
}
}
// Define a function to handle clicking the next button
function handleNextClick() {
if (currentPage < totalPages) {
currentPage++;
renderItems();
}
}
// Attach event listeners to previous and next buttons
prevButton.addEventListener(‘click’, handlePrevClick);
nextButton.addEventListener(‘click’, handleNextClick);
// Call renderItems function to display initial page
renderItems();
Let’s break down what’s happening in this code:
We define a constant for the page size (the number of items to display on each page) and an initial current page number (1).
We get references to the DOM elements we’ll be updating: the item list, the previous button, and the next button.
We define a function to render the current page of items. This function calculates the start and end index of the current page, gets the items for the current page, clears the item list, and renders each item as a list item. It also disables/enables the previous and next buttons based on whether the current page is the first or last page.
We define functions to handle clicking the previous and next buttons. These functions update the current page number and call the renderItems function to display the updated page.
We attach event listeners to the previous and next buttons that call the corresponding click handler functions.
We call the renderItems function to display the initial page of items.
Note that in this example, we assume that the items to be paginated are stored in an array called items. If your data is stored in a different way, you’ll need to modify the renderItems function to retrieve the correct items for the current page.
Also note that in this example, we don’t handle cases where there are fewer items than the page size or where the number of items isn’t evenly divisible by the page size. Depending on your use case, you may need to add additional logic to handle these edge cases.
To use the JavaScript code for pagination, you’ll need to add some HTML elements to your web page. Here’s an example of what that HTML might look like:
<div id=”total-pages”></div>
<ul id=”item-list”></ul>
<button id=”prev-button” disabled>Previous</button>
<button id=”next-button”>Next</button>
In this example, we’ve added a ul element with an id of “item-list” that will display the paginated items. We’ve also added two button elements with ids of “prev-button” and “next-button” that will allow the user to navigate between pages. We’ve set the “disabled” attribute on the previous button initially, since there’s no previous page when we’re on the first page. The JavaScript code we provided in the previous answer assumes that these HTML elements exist and have the specified ids. You may need to adjust the ids in the HTML and JavaScript code to match your specific use case.
here’s an example of what the items array might look like in JSON format:
[
“Item 1”,
“Item 2”,
“Item 3”,
“Item 4”,
“Item 5”,
“Item 6”,
“Item 7”,
“Item 8”,
“Item 9”,
“Item 10”,
“Item 11”,
“Item 12”,
“Item 13”,
“Item 14”,
“Item 15”,
“Item 16”,
“Item 17”,
“Item 18”,
“Item 19”,
“Item 20”,
“Item 21”,
“Item 22”,
“Item 23”,
“Item 24”,
“Item 25”,
“Item 26”,
“Item 27”,
“Item 28”,
“Item 29”,
“Item 30”
]
This array contains 30 items, which is more than the page size of 10, so the items will be split into three pages when using the pagination code we provided earlier. You can use this JSON array in your JavaScript code by first parsing it using JSON.parse():
const itemsJson = ‘[ “Item 1”, “Item 2”, “Item 3”, … ]’;
const items = JSON.parse(itemsJson);
This will create the items array that can be used in the renderItems function to retrieve the correct items for the current page.