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:
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 =
</ 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:
Article Tags :
Recommended Articles