Pagination is a common feature in web applications, especially when dealing with large datasets. It helps in dividing the data into manageable chunks, improving the user experience by reducing the amount of data displayed at once and speeding up page loading times. In this article, we will discuss the approach to add pagination to an HTML table using JavaScript.
Add Pagination in HTML Table using JavaScript
We will create a basic HTML table and add pagination functionality using JavaScript.
Example:
HTML
<!DOCTYPE html> <html>
<head>
<title>Pagination with JavaScript</title>
<style>
table {
margin: auto;
}
#pagination {
text-align: center;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>City</th>
</tr>
<!-- Table rows will be added dynamically -->
</table>
<div id="pagination"></div>
<script>
const data = [
{ name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" },
{ name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" }
];
const rowsPerPage = 5;
let currentPage = 1;
function displayTable(page) {
const table = document.getElementById("myTable");
const startIndex = (page - 1) * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
const slicedData = data.slice(startIndex, endIndex);
// Clear existing table rows
table.innerHTML = `
<tr>
<th>Name</th>
<th>Email</th>
<th>City</th>
</tr>
`;
// Add new rows to the table
slicedData.forEach(item => {
const row = table.insertRow();
const nameCell = row.insertCell(0);
const emailCell = row.insertCell(1);
const cityCell = row.insertCell(2);
nameCell.innerHTML = item.name;
emailCell.innerHTML = item.email;
cityCell.innerHTML = item.city;
});
// Update pagination
updatePagination(page);
}
function updatePagination(currentPage) {
const pageCount = Math.ceil(data.length / rowsPerPage);
const paginationContainer = document.getElementById("pagination");
paginationContainer.innerHTML = "";
for (let i = 1; i <= pageCount; i++) {
const pageLink = document.createElement("a");
pageLink.href = "#";
pageLink.innerText = i;
pageLink.onclick = function () {
displayTable(i);
};
if (i === currentPage) {
pageLink.style.fontWeight = "bold";
}
paginationContainer.appendChild(pageLink);
paginationContainer.appendChild(document.createTextNode(" "));
}
}
// Initial display
displayTable(currentPage);
</script>
</body>
</html>
|
Output
Explanation
- The displayTable function takes the current page number as a parameter, calculates the start and end indices for slicing the data, and then dynamically creates table rows for the sliced data.
- The updatePagination function generates pagination links based on the total number of pages and updates the current page link to be bold.
- We call displayTable initially with the first page to display the table and pagination links.