11-Apr-2023
.
Admin
Hi Guys,
In this blog, i will explain how to create live search on the html table with jquery example,We will show easy example of live search on the html table using jquery.which you are displaying in the HTML table. In this case, it’s better to allow the users to search text within the table.you can easily do this on your client-side with jquery.searching text within HTML table columns I am using .contains() method.
Here The Example Of search on The HTML Table With JQuery
Now In this example,I will create two textboxes for searching value and a <table> with some records. and the <table> added a <tr class=’notfound’> at the last which display when no record found while search.
Html
<!doctype html>
<html>
<head>
<title>Live search on the HTML table with jQuery Example - nicesnippets.com</title>
<script src='jquery-3.1.1.min.js' type='text/javascript'></script>
<style>
table th, table td
{
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: #fff;
}
.notfound{
display: none;
}
input{
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
border:2px solid #e0e0e0;
}
</style>
</head>
<body style="margin-left: 15%; background: #eee">
<h2>Live search on the HTML table with jQuery Example - nicesnippets.com</h2>
<input type='text' id='txt_searchall' placeholder='Enter search text'>
<br/>
<table width="40%">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Framework</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>PHP</td>
<td>Laravel</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>C++</td>
</tr>
<tr>
<td>3</td>
<td>Android</td>
<td>Webkit</td>
</tr>
<tr>
<td>4</td>
<td>Java</td>
<td>Meteor</td>
</tr>
<tr>
<td>5</td>
<td>C#</td>
<td>MuPDF</td>
</tr>
<tr class='notfound'>
<td colspan='4'>No record found</td>
</tr>
</tbody>
</table>
</body>
</html>
JQuery
here the live search on the html table for jquery code
<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){
// Search all columns
$('#txt_searchall').keyup(function(){
var search = $(this).val();
$('table tbody tr').hide();
var len = $('table tbody tr:not(.notfound) td:contains("'+search+'")').length;
if(len > 0){
$('table tbody tr:not(.notfound) td:contains("'+search+'")').each(function(){
$(this).closest('tr').show();
});
}else{
$('.notfound').show();
}
});
});
// Case-insensitive searching (Note - remove the below script for Case sensitive search )
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
</script>
It Will help you...
#Jquery
