Key Takeaways
- Pagination is a method of dividing large content into smaller, more manageable pieces or “pages” using HTML, CSS and JavaScript. This tutorial uses a table of student names as an example.
- The tutorial first demonstrates how to create a basic HTML structure for the content to be displayed, and then how to use JavaScript to divide this content into different pages. It also shows how to add button functionality for navigating through these pages.
- The tutorial explains how to create a function that divides the table into separate pages, calculates the range of items to be displayed on each page, and hides or shows items depending on their index in the range. It also shows how to add navigation buttons and highlight the currently active button.
- The tutorial demonstrates how to adapt the pagination code for different types of content, such as section elements and unordered lists. This involves changing the targeted tag name, adjusting the number of items per page, and altering the slice() function.
- The tutorial concludes that this method of implementing pagination is accessible to screen readers, keyboard-friendly, and does not require a framework. It suggests that the method could be further improved by adding descriptive ARIA labels and attributes.
On the Web, pagination is a way to break up large pieces of content into more bite-sized pieces. In this article, we’ll look at a simple way to divide content into a series of “pages” using HTML, CSS and vanilla JavaScript.
Although pagination can be implemented using frameworks such as React and Angular, the aim of this article is to provide a straightforward, step-by-step guide to setting up pagination, so that we can understand the basic concepts involved.
Creating Our Base Web Page
Before implementing our pagination system, let’s create an HTML structure that stores the content we want to display. This can be any kind of content, but for this tutorial, we’ll use a table of five columns and 15 rows that stores the names of students in different grades. Here’s a snippet of our HTML:
Grade 1
Grade 2
Grade 3
Grade 4
Grade 5
Faith Andrew
Angela Christopher`
David Elias
Samuel Thomas
Richard Elias
⋮
We’ve wrapped the table in a container element (). While we don’t strictly need a container element, it’s handy to have it, especially if there are other elements on our page. (It gives a useful context for the pagination buttons that we’ll be adding.)
You can view our full HTML code, along with some styling, on CodePen.
Implementing the Pagination Functionality with JavaScript
With our HTML and CSS in place, the next step is to implement pagination. We’ll firstly use JavaScript to divide the table into different “pages” and to add button functionality for navigating through those pages.
Creating a function that divides the table into pages
Here’s our code for dividing the table into separate pieces:
document.addEventListener('DOMContentLoaded', function () {
const content = document.querySelector('.content');
const itemsPerPage = 5;
let currentPage = 0;
const items = Array.from(content.getElementsByTagName('tr')).slice(1);
The first line creates an event listener that ensures that the JavaScript code runs after the HTML content has been fully loaded and parsed. This is to prevent any manipulation or interaction with elements before the content becomes available in the DOM.
With document.querySelector('.content'), we’re selecting the wrapper and initializing it as a variable.
With const itemsPerPage = 5;, we’re setting the number of rows to display on each page.
With let currentPage = 0;, we’re creating a variable that keeps track of the current page number. It starts at 0, which represents the first page. (The first index in JavaScript is 0, so it counts from 0 instead of 1.)
The last line uses the This means that the heading will remain in place as we switch pages. Next, let’s work on the code for showing pages: We start by creating a Next, we calculate the By doing this, we’re creating a range of items to be displayed. For example, let’s say we have ten items and we want to display five items per page. If we’re on the first page (page = 0), With Our Let’s now look at how to add our navigation buttons. In the code below, we’ll create and add the button functionality based on the content of the table: Firstly, we create a Next, we create a div to contain our dynamically generated page buttons ( The next step is to create buttons for each page, using a loop to iterate through each possible page index: The Within each page iteration, a new individual page button is created using the Next, we create a click event listener and attach it to the page buttons. When a button is clicked, the event listener’s callback function gets executed. Here’s an explanation of the callback function: To finish off our button creation code, we end with this: We append our button container to the end of our To make our buttons more user-friendly, we’ll add a distinctive style to the currently “active” button. Let’s create a function that applies the styles of the First, we retrieve all the pagination buttons using the The Next, we use the conditional If the button’s index doesn’t match the current page, the To implement this feature, we call the Our pagination script ends with the following two lines: We call the Our script now calculates the appropriate range of items to display for each page, listens for button clicks, and updates the page display. The following Pen shows the final result.
See the Pen The script we’ve created is handy for breaking up a table into a series of pages. But what if our content is something other than a table? Instead of table content, let’s try our script with some other kinds of content. Instead of a table element, let’s place some We only need to make three very simple changes to our script: The changes are: The following CodePen demo shows this in action.
See the Pen We can easily adapt the demo above to work with a list of items. In the example below, we change the wrapping element from an In our JavaScript, we’ll just make two changes: After some minor CSS changes to account for the unordered list, we end up with the result below.
See the Pen In this tutorial, we learned how to implement pagination using HTML, CSS and JavaScript. For those without JavaScript enabled (for whatever reason), the full content is still available — just without pagination. By using semantic We could go further by adding descriptive ARIA labels and attributes to convey the purpose and role of elements such as pagination buttons to screen readers. I hope this demo will get you thinking about simple pagination functionality without needing to reach for a framework. Adding page numbers to an HTML document involves using JavaScript to create a pagination system. First, you need to create a list in your HTML where the page numbers will be displayed. Then, in your JavaScript, you will create a function that generates the page numbers based on the total number of items you want to display and how many items you want per page. This function will then be called whenever the page loads or the content changes. Yes, you can customize the look of your page numbers using CSS. You can change the color, size, font, and even the shape of your page numbers. You can also add hover effects to make your page numbers more interactive. To do this, you simply need to target the HTML element that contains your page numbers in your CSS and apply the desired styles. Making your page numbers responsive involves using CSS media queries to adjust the size and layout of your page numbers based on the size of the user’s screen. You can also use JavaScript to adjust the number of page numbers displayed based on the screen size. This ensures that your page numbers look good and are easy to use on all devices. Starting page numbering from a specific page can be achieved by adjusting your JavaScript function that generates the page numbers. You would need to add a parameter to this function that specifies the starting page number. Then, when generating the page numbers, you would start from this number instead of starting from 1. Yes, you can add page numbers to a Word document. This is usually done through the ‘Insert’ tab in the Word interface. However, this process is different from adding page numbers to an HTML document and requires a different set of skills. Adding page numbers in LaTeX involves using the \pagenumbering command. This command allows you to specify the style of the page numbers and where they should start. However, this process is different from adding page numbers to an HTML document and requires a different set of skills. Page numbering has been used for centuries to help readers navigate books and documents. It originated in the times of hand-written manuscripts and has evolved over time with the development of printing and digital technologies. Today, page numbering is used in a variety of formats, including books, PDFs, and web pages. Yes, you can use pagination with a database. This involves querying the database to retrieve a specific number of records for each page and then using JavaScript to generate the page numbers. This allows you to display large amounts of data in a user-friendly way. Adding previous and next buttons to your page numbers involves adding two additional elements to your HTML for the buttons and then updating your JavaScript function to change the current page when these buttons are clicked. You can also add styles to these buttons using CSS to make them stand out. Yes, you can use pagination with AJAX. This involves using AJAX to load the content for each page without refreshing the entire page. This can make your website faster and more responsive, as only the necessary content is loaded. Yemi is a software developer and technical writer. She enjoys explaining technical concepts related to programming and software in understandable terms. You can read more of her blog posts at dev.to/hyemiie.getElementsByTagName method to select all the elements with a tag within the table. We create an array ( items) of all the child elements and used the slice(1) to exclude the first row (header) and create an array of the remaining rows.
Working out the showPage() functionality
function showPage(page) {
const startIndex = page * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
items.forEach((item, index) => {
item.classList.toggle('hidden', index < startIndex || index >= endIndex);
});
updateActiveButtonStates();
}
showPage() function that accepts a page parameter. This function is responsible for displaying the items connected to that specific page when it’s called.startIndex, which is the first item that should be displayed on the current page by multiplying the page parameter with the itemsPerPage. We also calculate the endIndex that comes immediately after the last item that should be displayed on the current page. startIndex will be 0, and endIndex will be 0 + 5 = 5. This range ([0, 5]) includes the first five items. On the next page (page = 1), startIndex will be 5, and endIndex will be 5 + 5 = 10. This range ([5, 10]) includes the remaining items.items.forEach(), we create a loop that iterates through each row and checks if its index falls within the range of items to be displayed on the current page — that is, if it’s either before the startIndex or after/equal to the endIndex. If the index is within the range, the toggle keyword applies the hidden class (which we’ll define in our CSS code) to the item, effectively hiding it. If the index doesn’t meet either condition, the hidden class is removed, making the item visible.hidden class moves the items off screen, hiding them from view but still allowing them to be accessible to those using screen readers:.hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
Adding buttons
function createPageButtons() {
const totalPages = Math.ceil(items.length / itemsPerPage);
const paginationContainer = document.createElement('div');
const paginationDiv = document.body.appendChild(paginationContainer);
paginationContainer.classList.add('pagination');
createPageButtons() function that will store the logic to create our buttons. Then we calculate the total pages we’ll need to display our table. We do this by dividing the total number of items by the desired number of items per page. The result is rounded up using the Math.ceil() function. This ensures that all the rows of our table items are covered by the available pages.document.createElement('div')). Then we appended the document.body.appendChild(paginationDiv). (We haven’t actually told it where to sit in the HTML structure yes. We’ll do that shortly.) Lastly, we add a class of pagination to that button container so that we can target it with styles.
for (let i = 0; i < totalPages; i++) {
const pageButton = document.createElement('button');
pageButton.textContent = i + 1;
pageButton.addEventListener('click', () => {
currentPage = i;
showPage(currentPage);
updateActiveButtonStates();
});
for loop ranges from 0 (which is the first page) to the total number of pages minus 1.document.createElement() method, increasing the page number by 1 each time it loops.
currentPage variable is updated to the current value of i, which corresponds to the index of the clicked page.showPage() function is called with the updated currentPage value, causing the content of the clicked page to be displayed.content.appendChild(paginationContainer);
paginationDiv.appendChild(pageButton);
.content wrapper, and then place our buttons inside the button container.Highlighting active buttons
active CSS class to a button once its page is active:function updateActiveButtonStates() {
const pageButtons = document.querySelectorAll('.pagination button');
pageButtons.forEach((button, index) => {
if (index === currentPage) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
}
document.querySelectorAll and assign them to the pageButtons variable.updateActiveButtonStates() function then goes through each of these buttons one by one, using a forEach loop, and compares its index with the value of the currentPage variable.if statement to assign the styles of the active class if the button’s index matches the current page.active class is removed. This ensures that the other buttons don’t retain the active class. updateActiveButtonStates() function whenever a page is changed or displayed.Calling on the script
createPageButtons();
showPage(currentPage);
createPageButtons() function before the showPage() function. This ensures that the buttons are created once the page loads.The final result
Pagination with HTML, CSS and JS, Step 2: Adding the JavaScript by SitePoint (@SitePoint)
on CodePen.
Adapting Our Code to Other Scenarios
Pagination for section elements
elements inside our container and see how to adapt our script. Here’s our basic HTML:document.addEventListener('DOMContentLoaded', function () {
const content = document.querySelector('.content');
const itemsPerPage = 1;
let currentPage = 0;
const items = Array.from(content.getElementsByTagName('section')).slice(0);
itemsPerPage to 1, so that only one section appears per pagesection, as we’re now looping through elements rather than elements
slice() to 0, which limits the selection to the first section element (which has index 0)
CodePen Home Pagination with HTML, CSS and JS: sections by SitePoint (@SitePoint)
on CodePen.
Pagination for an unordered list
to a elements to elements:
getElementsByTagName('section') becomes getElementsByTagName('li')const itemsPerPage to 2 to show two list items per page
Pagination with HTML, CSS and JS: unordered list by SitePoint (@SitePoint)
on CodePen.
Conclusion
elements, the page is still keyboard accessible. We’ve also hidden our non-active content by moving it off screen, rather than using display: none, so that it’s still accessible to screen readers.Frequently Asked Questions (FAQs) about Simple Pagination in HTML, CSS, and JavaScript
How Can I Add Page Numbers to My HTML Document?
Can I Customize the Look of My Page Numbers with CSS?
How Can I Make My Page Numbers Responsive?
How Can I Start Page Numbering from a Specific Page?
Can I Add Page Numbers to a Word Document?
How Can I Add Page Numbers in LaTeX?
What is the History of Page Numbering?
Can I Use Pagination with a Database?
How Can I Add Previous and Next Buttons to My Page Numbers?
Can I Use Pagination with AJAX?
Yemi Ojedapo