How to Use Pagination on HTML Tables

HTML tables are a convenient way to do this.

However, when the data size becomes large, it becomes difficult to handle the information and display it in a way that is easily accessible to the end-user.

This is where pagination comes into play.

Pagination allows us to break down large data into smaller, manageable chunks, making it easier for the user to access and understand the information.

In this tutorial, we will explore how to implement pagination on HTML tables in a comprehensive and easy-to-understand manner.


Introduction to Pagination

Pagination is the process of dividing a document into pages.

In web development, pagination refers to dividing large amounts of data into smaller, more manageable pages.

This makes it easier for the user to access and navigate the information.

Implementing Pagination on HTML Tables

There are several ways to implement pagination on HTML tables. Some of these methods include:

Server-side Pagination

In this method, the data is divided into pages on the server-side and only a portion of the data is sent to the client for display.

This is a great solution for large datasets as it reduces the amount of data that is sent to the client, thereby improving the overall performance of the application.

Client-side Pagination

In this method, all of the data is sent to the client, and the pagination is implemented on the client-side using JavaScript.

This method is suitable for small datasets as the amount of data sent to the client is small, and the performance impact is minimal.

How to Implement Client-side Pagination on HTML Tables

The following is a step-by-step guide to implement client-side pagination on HTML tables.

Create the HTML Table

The first step is to create the HTML table that will display the data.

The following is a sample HTML table that we will use in this example.

<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>[email protected]</td>
      <td>555-555-5555</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>[email protected]</td>
      <td>555-555-5556</td>
    </tr>
    <!-- Add more rows -->
  </tbody>
</table>
NameEmailPhone
John Doe[email protected]555-555-5555
Jane Doe[email protected]555-555-5556

Add the JavaScript Code

The next step is to add the JavaScript code that will implement the pagination. The following is the JavaScript code that we will use in this example.

// Get the table
var table = document.getElementById("table");

// Get the number of rows per page
var rowsPerPage = 5;

// Get the number of rows in the table
var numRows = table.rows.length;

// Calculate the number of pages
var numPages = Math.ceil(numRows / rowsPerPage);

// Set the current page to 1
var currentPage = 1;

// Function to display the rows of the current page
function displayRows() {
// Loop through all the rows in the table
for (var i = 0; i < numRows; i++) { // Check if the current row is on the current page if (i >= (currentPage - 1) * rowsPerPage && i < currentPage * rowsPerPage) {
// Display the row
table.rows[i].style.display = "table-row";
} else {
// Hide the row
table.rows[i].style.display = "none";
}
}
}

// Function to go to the next page
function nextPage() {
if (currentPage < numPages) {
currentPage++;
displayRows();
}
}

// Function to go to the previous page
function prevPage() {
if (currentPage > 1) {
currentPage--;
displayRows();
}
}

// Display the rows of the first page
displayRows();

Add the Pagination Buttons

The final step is to add the pagination buttons that will allow the user to navigate between the pages.

The following is the HTML code that adds the pagination buttons.

<button onclick="prevPage()">Prev</button>
<button onclick="nextPage()">Next</button>

Conclusion

In this blog post, we explored how to implement pagination on HTML tables in a client-side manner.

By breaking down the data into smaller, more manageable pages, pagination makes it easier for the end-user to access and understand the information.

We hope that this tutorial has been helpful and that you are now able to implement pagination on your own HTML tables.