When it comes to navigating through web pages, users often find it helpful to know where they are in the sequence of pages. This is where display page numbers in HTML come into play. By implementing this feature, you can enhance user experience and accessibility. Let's explore how you can achieve this with the help of HTML, CSS, and JavaScript.
Before diving into the code, let's understand why displaying page numbers is crucial. It assists users in understanding how many pages they need to go through to find the information they need. It also helps them bookmark a specific page quickly. Now, let's jump into the steps to display page numbers in HTML.
Implementing Simple Pagination
We'll start with a simple example where we have an array of data, and we want to display 10 items per page. We'll use plain JavaScript and HTML for this.
First, let's create an array of data. We'll use the W3Schools' data for bicycle marks as an example:
Creating Data Array
In your JavaScript file, define your data array as follows:
let data = [['Bike', 1000], ['Car', 2000], ['Bicycle', 300], ['Railway', 500], ...];
Initializing Variables & DOM Elements
Next, initialize variables for current page and total pages. Also, select the elements where you'll display data and page numbers:
let currentPage = 1;
let totalPages = Math.ceil(data.length / 10);
let itemsPerPage = 10;
let dataTable = document.getElementById('data-table');
let pagination = document.getElementById('pagination');
Pagination using HTML, CSS, and JavaScript
Now, let's create a function to generate page numbers and display them. We'll useful flags to keep track of whether we're on the first or last page.
Inside your JavaScript file:
Generating Page Numbers
function generatePagination() {
pagination.innerHTML = '';
let li = document.createElement('li');
li.innerHTML = '< previous';
if(currentPage != 1){
li.setAttribute('onclick', 'currentPage -= 1; renderData(); generatePagination();');
} else {
li.classList.add('disabled');
}
pagination.appendChild(li);
for(let i = 1; i <= totalPages; i++){
li = document.createElement('li');
li.innerHTML = i;
if(i == currentPage){
li.classList.add('active');
} else {
li.setAttribute('onclick', 'currentPage = ' + i + '; renderData(); generatePagination();');
}
pagination.appendChild(li);
}
li = document.createElement('li');
li.innerHTML = 'next >';
if(currentPage != totalPages){
li.setAttribute('onclick', 'currentPage += 1; renderData(); generatePagination();');
} else {
li.classList.add('disabled');
}
pagination.appendChild(li);
}
Displaying Data on Each Page
Finally, create a function to render data based on the current page:
function renderData() {
dataTable.innerHTML = '';
let start = (currentPage * itemsPerPage) - itemsPerPage;
let end = start + itemsPerPage;
let tableData = data.slice(start, end);
for(let i = 0; i < tableData.length; i++){
let row = dataTable.insertRow();
for(let j = 0; j < tableData[i].length; j++){
row.insertCell().innerHTML = tableData[i][j];
}
}
}
Now, call these functions when your page loads:
generatePagination();
renderData();
With this implementation, users can now navigate through your pages easily. The display of page numbers not only improves user experience but also aids in accessibility, making your web pages more user-friendly.