|
We Move the DataTable Search Filter to a Different Row with jQuery. To achieve this functionality, you must know what is a Search filter and where we can use it, a search filter typically refers to a mechanism used to filter and display specific elements from a set of elements based on certain criteria.
This is often used in scenarios where you have a list of items and you want to narrow down the list based on user input or predefined conditions.
Preview Image: Output Approach- Create a HTML table template and provide a id in a <tbody> tag. Add a jQuery CDN link.
- Then write a code for waits for the document to be ready before executing the code inside the function.
- After that create a event listener which listens for the keyup event, which occurs when a key is released after being pressed down, inside the input field with id of the <tbody> tag.
- Then fetch the value which the user type in the textbox and convert it to lowecase.
- And also convert the current <tr> value in the lower case.
- Then if the match is found then show it , Otherwise show the message like “No matching records found”.
Example: This example shows the implementation of the above-explained appraoch.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td,
#customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {
background-color: #dbe0de;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #0ef61a;
color: white;
}
#searchRow {
margin-bottom: 1rem;
}
#noMatch {
color: red;
display: none;
}
</style>
</head>
<body>
<h1>How to Move DataTable Search Filter
to a Different Row with jQuery</h1>
<div id="searchRow">
<input type="text" id="myInput" placeholder="Search...">
</div>
<p id="noMatch">No matching records found.</p>
<table id="customers">
<thead>
<tr>
<th>Company</th>
<th>Contact No</th>
<th>Country</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Emp 1</td>
<td>8027801264</td>
<td>Germany</td>
</tr>
<tr>
<td>Emp 2</td>
<td>8027801265</td>
<td>Sweden</td>
</tr>
<tr>
<td>Emp 3</td>
<td>8027801266</td>
<td>Mexico</td>
</tr>
<tr>
<td>Emp 4</td>
<td>8027801267</td>
<td>Austria</td>
</tr>
<tr>
<td>Emp 5</td>
<td>8027801268</td>
<td>UK</td>
</tr>
<tr>
<td>Emp 6</td>
<td>8027801269</td>
<td>Germany</td>
</tr>
<tr>
<td>Emp 7</td>
<td>8027801270</td>
<td>Canada</td>
</tr>
<tr>
<td>Emp 8</td>
<td>8027801271</td>
<td>Italy</td>
</tr>
<tr>
<td>Emp 9</td>
<td>8027801272</td>
<td>UK</td>
</tr>
<tr>
<td>Emp 10</td>
<td>8027801273</td>
<td>France</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#myInput").on("keyup", function () {
let value = $(this).val().toLowerCase();
let matched = false;
$("#myTable tr").each(function () {
let rowText = $(this).text().toLowerCase();
if (rowText.includes(value)) {
$(this).show();
matched = true;
} else {
$(this).hide();
}
});
if (!matched) {
$("#noMatch").show();
} else {
$("#noMatch").hide();
}
});
});
</script>
</body>
</html>
Output:
|
