Home

How to Create a Live Search Table with Jquery Updated

How to Create a Live Search Table with Jquery Updated

How to Create a Live Search Table with Jquery Updated
How to Create a Live Search Table with Jquery Updated

Live search in a certain table is quite convenient for you to discover the value you are looking for, with instant search results displayed so it is very good and handy for searchers. 


Usually, on the website, people use ctrl + f to find but if on the site there is a table with too many values ​​and many pages, how to search. 

Create a live search table with Jquery

For example, I will create a table like the following, simply use bootstrap to quickly create this. 

To make this table you need to add the following code 

<input type="text" class="form-control pull-right" style="width:20%" id="search" placeholder="Type to search table..."> </div>
<table class="table-bordered table pull-right" id="mytable" cellspacing="0" style="width: 100%;"> <thead>
<tr role="row">
<th>Hostname</th>
<th>Free Filesize Limit</th>
<th>Free Daily Trafic</th>
<th>Premium Account</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dailyuploads.net</td>
<td>2 GB</td>
<td>20 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Depfile.com</td>
<td>1 GB</td>
<td>10 GB</td>
<td>100 GB</td>
</tr>
<tr>
<td>Uploaded.net</td>
<td>2 GB</td>
<td>1 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>4shared.com</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>2shared.com</td>
<td>2 GB</td>
<td>20 GB</td>
<td>100 GB</td>
</tr>
<tr>
<td>Fshare.vn</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Firedown.co</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Share-online.biz</td>
<td>1 GB</td>
<td>2 GB</td>
<td>100 GB</td>
</tr>
<tr>
<td>Keep2share.cc</td>
<td>500 MB</td>
<td>2 GB</td>
<td>200 GB</td>
</tr>
</tbody>
</table>

Remember to add the following JS and bootstrap links to the head section of the website.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><br/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


Next, add the following Jquery code 

<script> // Write on keyup event of keyword input element $(document).ready(function(){ $("#search").keyup(function(){ _this = this; // Show only matching TR, hide rest of them $.each($("#mytable tbody tr"), function() { if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) $(this).hide(); else $(this).show(); }); }); }); </script>


How to Create a Live Search Table with Jquery Updated

How to Create a Live Search Table with Jquery Updated,  jquery, create search filter with jquery, live search in table jquery, jquery search,how to search jquery, 3 steps to develop jquery data table with search filter, jquery ajax live search, how to, live search,search table jquery,perform live search and filter on HTML table using jquery, live search jquery ajax,search with ajax jquery, live search jquery, HTML table search jquery, live search with ajax.
Newer post Older post

RELATED ARTICLES