Live Search on The HTML Table With JQuery Example

jquery

Nicesnippets

531

26-02-2020


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

Example

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...


Recommended Posts