Design search functionality for table data using jQuery as a heavy page with a search option at the top will definitely improve the ease of accessing the page.
Required HTML
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Search Functionality for table data</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="wrapper">
<input type="search" placeholder="search" id="groups" />
<table id="groups-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Designation</th>
<th scope="col">Working at</th>
</tr>
</thead>
<tbody>
<tr class="table-data">
<td>Lakshmi</td>
<td>I'm a Drupal BackEnd Developer</td>
<td>I'm Working in Volkotech Solutions</td>
</tr>
<tr class="table-data">
<td>Naveen</td>
<td>I'm a Drupal UI Developer</td>
<td>I'm Working in Volkotech Solutions</td>
</tr>
<tr class="table-data">
<td>Navya</td>
<td>I'm a Drupal UI Developer</td>
<td>I'm Working in Volkotech Solutions</td>
</tr>
<tr class="table-data">
<td>Keerthi</td>
<td>QA resource</td>
<td>I'm Working in HCL</td>
</tr>
</tbody>
</table>
</div>
<script src="./script.js"></script>
</body>
</html>Styling our search page
style.css
input {
margin: 1rem 0;
padding: 10px;
border: 1px solid #00000052;
border-radius: 7px;
}
input:focus {
outline: 0;
}
body {
max-width: 70%;
margin: 5rem auto;
font-size: 20px;
}
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.wrapper {
background: #4d4b4b0a;
padding: 5rem;
border: 67px solid skyblue;
}
.wrapper h1 {
text-align: center;
}jQuery Functionality
script.js
jQuery("#groups").on("keyup", function () {
var value = jQuery(this).val().toLowerCase();
jQuery("#groups-table .table-data").filter(function () {
jQuery(this).toggle(jQuery(this).text().toLowerCase().indexOf(value) > -1);
});
});
Results
Here is the result of our functionality.
Conclusion:
Finally, we have achieved the search functionality with the help of jQuery. In this example we are filtering the table rows, we can filter table columns and entire data. So, guys go and get started on implementing this simple search functionality. Happy coding! 😉
Â
21 likes
Add to read list
Comments