HTML:
< input type = " text " id = " searchInput " onkeyup = " searchTable () "
placeholder = " Search... " >
Javascript:
function searchTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById(" searchInput ");
filter = input.value.toUpperCase();
table = document.getElementById(" myTable ");
tr = table.getElementsByTagName(" tr ");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName(" td ")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase(). indexOf (filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = " none ";
}
}
}
}
In this example:
- Page links (< a href = " # " >) allow users to navigate to different pages.
- Clicking on a page link typically loads a new set of data or displays a different portion of the content.
Sorting
Users can utilize the sorting feature to rearrange the rows of a table according to the data in a specific column. By clicking on the headers of the columns, users can switch between ascending and descending order, depending on whether the values are alphabetical or numerical in nature.
An illustration of arranging rows in a table using JavaScript is shown below:
HTML:
< th onclick = " sortTable(0) " > Name < /th >
< th onclick = "sortTable(1)" > Age < /th >
Javascript:
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
The integration of these functionalities enhances user experience by offering a more intuitive and engaging way to interact with extensive datasets showcased in HTML tables. This integration enables users to effectively explore, search, and assess the displayed data, ultimately improving the usability of the webpage.
Below is a detailed illustration of an HTML table that includes features for pagination, search, and sorting, all integrated through HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Pagination, Search, and Sorting</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
cursor: pointer;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
< /style >
< /head >
< body >
<h2>Table with Pagination, Search, and Sorting</h2>
<input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Search for names..">
<table id="myTable">
<thead>
<tr>
<th onclick=" sortTable(0) "> Name </th>
< th onclick=" sortTable(1) "> Age < /th >
< /tr >
< /thead >
< tbody >
< tr >< td > John < /td > < td > 25 < /td > < /tr >
< tr >< td > Doe < /td > < td > 30 < /td > < /tr >
< tr >< td > Smith < /td > < td > 20 < /td >< /tr >
< ! - - Add more rows as needed - - >
< /tbody >
< /table >
< div class = " pagination " id = " pagination " >< /div >
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
function searchTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
// Pagination function
function loadPagination() {
var table = document.getElementById("myTable");
var rows = table.rows.length;
var perPage = 3; // Change this to set number of rows per page
var pageCount = Math.ceil(rows / perPage);
var pagination = document.getElementById("pagination");
var pageLinks = "";
for (var i = 0; i < pageCount; i++) {
pageLinks += "<a href='#' onclick='changePage(" + i + ")'>" + (i + 1) + "</a> ";
}
pagination.innerHTML = pageLinks;
}
function changePage(page) {
var table = document.getElementById("myTable");
var rows = table.rows.length;
var perPage = 3; // Change this to set number of rows per page
var start = page * perPage + 1;
var end = start + perPage - 1;
for (var i = 1; i < rows; i++) {
if (i >= start && i <= end) {
table.rows[i].style.display = "";
} else {
table.rows[i].style.display = "none";
}
}
}
// Initializations
window.onload = function() {
loadPagination();
changePage(0); // Show the first page initially
};
< /script >
< /body >
< /html >
Conclusion
In conclusion, creating an HTML table with pagination, search, and sorting functionalities enhances the usability and accessibility of data presentation on web pages.
- HTML Table: Tables provide a structured format for displaying data, with rows and columns defining the layout.
- Pagination: Dividing content into multiple pages improves user experience by managing large datasets effectively and reducing page load times.
- Search Functionality: Allowing users to search for specific data within the table enhances usability and accessibility, especially for large datasets.
- Sorting: Enabling users to sort table rows based on column values facilitates data analysis and comprehension.
Through the integration of these functionalities, developers have the ability to craft dynamic and engaging table interfaces that enable users to efficiently browse, search, and evaluate data. This contributes to improving the general usability and user experience of web-based applications.
HTML Table with Pagination and Search and Sorting
In this section, we will explore the process of generating an HTML table with pagination, search functionality, and sorting capabilities. Let's delve into each component individually:
HTML Table
HTML tables serve as a means to exhibit information in a structured layout, comprising rows and columns where each cell holds data or additional HTML components. They are widely employed for showcasing organized data sets, item lists, or comparative diagrams.
Tables in HTML are used to structure data in a tabular format with rows and columns. Every cell within a table can hold various types of content such as text, images, hyperlinks, or any other HTML components.
Here's a basic example of an HTML table:
< table >
< tr >
< th > Name < /th >
< th > Age < /th >
< /tr >
< tr >
< td > John < /td >
< td > 25 < /td >
< /tr >
< tr >
< td > Doe < /td >
< td > 30 < /td >
< /tr >
< ! - - Add more rows as needed - - >
< /table >
In this example:
- The < table > element defines the table.
- Each row (< tr >) contains table data cells (< td >) or table header cells (< th >).
- Table headers (< th >) are used for column headings.
- Table data cells (< td >) contain the actual data.
Pagination
Pagination involves splitting content into distinct pages to enhance user experience and loading speed, especially when managing extensive datasets. In the scenario of an HTML table, pagination empowers users to browse various segments of the table by exhibiting only a portion of rows per page. This feature enables users to access more data within a single page.
Here's an example of pagination in HTML:
< div class = " pagination " >
< a href = " # " > 1 < /a >
< a href = " # " > 2 < /a >
< a href = " # " > 3 < /a >
< ! - - Add more page links as needed - - >
< /div >
In this example:
- Page links (< a href = " # " >) allow users to navigate to different pages.
- Clicking on a page link typically loads a new set of data or displays a different portion of the content.
Search Functionality
Integrating a search feature enables users to refine the table data according to particular requirements. In this instance, a search bar is positioned above the table, allowing users to input search terms. As the user inputs text, the table instantly adjusts to show only rows that correspond to the search term, simplifying the process of locating pertinent data.
Below is a demonstration of a search input field that utilizes JavaScript to filter rows within a table: