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.
THÔNG TIN THANH TOÁN & DỊCH VỤ:
- Tên tài khoản: Nguyễn Anh Tuấn
- Số tài khoản: 0501000058467
- Ngân hàng TMCP Ngoại thương Việt Nam (Vietcombank) - Chi nhánh Bắc Sài Gòn
- Hỗ trợ cài đặt: fb.com/kequaduongvodanh
- Dịch vụ: Xem chi tiết >>
+ Nhận convert template từ Wordpress
+ Sửa lỗi, nâng cấp template
+ Thiết kế Form Liên hệ từ Google Form
