HTML Table Pagination Filtering JavaScript
As websites and applications get more complex, displaying large amounts of data in a user-friendly way becomes a challenging task. One way to deal with this problem is by using HTML tables. However, tables with many rows and columns can be overwhelming to users and can slow down the performance of the web page. To solve this issue, developers can implement pagination and filtering functionality using JavaScript.
In this article, we’ll explore how to add pagination and filtering to an HTML table using JavaScript. We’ll also discuss some best practices for implementing this functionality to create a fast and responsive user experience.
What is HTML Table Pagination and Filtering?
Pagination is the practice of dividing data into smaller chunks, typically by splitting it into pages. When implementing pagination for an HTML table, we break the table into smaller tables, each containing a specific number of rows. By doing this, we can make the table more manageable for users and speed up the performance of the web page.
Filtering, on the other hand, is the practice of narrowing down the data displayed on the web page based on user-defined criteria. For example, if we have a table of customer data, we might allow users to filter the data based on location, age, or gender. This helps users find the data they need quickly and efficiently.
Implementing Pagination and Filtering with JavaScript
To implement pagination and filtering with JavaScript, we first need to understand the structure of an HTML table. A table consists of rows and columns, with each cell containing data. We can use JavaScript to access and manipulate the table’s elements to add pagination and filtering functionality.
Pagination
To implement pagination, we need to split the table into smaller tables, each containing a specific number of rows. We can do this using JavaScript by creating a new table and copying the relevant rows from the original table.
First, we need to calculate the number of pages we’ll need based on the total number of rows and the desired number of rows per page. We can then create a new table for each page and copy the relevant rows from the original table to the new table. We can use event listeners to detect when the user clicks on the next or previous page buttons and update the table accordingly.
// Calculate the number of pages and rows per page
var rowsPerPage = 10;
var totalRows = document.getElementsByTagName('tr').length;
var totalPages = Math.ceil(totalRows / rowsPerPage);
// Create a new table for each page and copy the relevant rows
for (var i = 0; i < totalPages; i++) {
var newTable = document.createElement('table');
var startIndex = i * rowsPerPage;
var endIndex = startIndex + rowsPerPage;
var rowsToCopy = Array.prototype.slice.call(document.getElementsByTagName('tr'), startIndex, endIndex);
rowsToCopy.forEach(function(row) {
var newRow = document.createElement('tr');
var cells = row.getElementsByTagName('td');
Array.prototype.forEach.call(cells, function(cell) {
var newCell = document.createElement('td');
newCell.innerHTML = cell.innerHTML;
newRow.appendChild(newCell);
});
newTable.appendChild(newRow);
});
}
Filtering
To implement filtering, we need to allow users to select criteria that determine which rows should be displayed in the table. We can use JavaScript to filter the table’s rows based on the user’s selections.
First, we need to create an input field or dropdown menu that allows users to select the criteria to filter by. We can then add an event listener that listens for changes to the input field or dropdown menu and filters the table accordingly.
Here’s an example code for implementing filtering in an HTML table using JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Filtering an HTML Table with JavaScript</title>
</head>
<body>
<input type="text" id="filterInput" placeholder="Search...">
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Bob Smith</td>
<td>45</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Alice Johnson</td>
<td>20</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
<script>
// Get the input field and table
var filterInput = document.getElementById('filterInput');
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName('tr');
// Add event listener to input field
filterInput.addEventListener('keyup', function() {
var filterValue = filterInput.value.toUpperCase();
// Loop through all table rows
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');
var showRow = false;
// Loop through all table cells in a row
for (var j = 0; j < cells.length; j++) {
var cell = cells[j];
if (cell.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
showRow = true;
break;
}
}
// Show or hide the row based on the filter value
if (showRow) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
}
});
</script>
</body>
</html>
In this example, we have an HTML table with four rows of data. We also have an input field that allows users to enter search criteria to filter the table.
When the user types in the input field, the JavaScript code loops through all the rows and cells in the table to find any cells that contain the filter value. If a cell contains the filter value, the corresponding row is shown; otherwise, the row is hidden using the style.display property.
This code will filter the table as the user types in the input field, allowing them to quickly find the data they need.
- How to Transfer From WordPress Com to WordPress Org
- Is Bluehost the Best for WordPress?
- Is Wp Engine Owned by WordPress?
- Is WordPress Headless CMS?
- How to implement HTML Table Pagination Filtering in JavaScript
