Cách tạo live tìm kiếm table với Jquery

Live search trong 1 bảng nào đó khá thuận lợi để bạn có thể dò ra giá trị trị bạn cần tìm, với kết quả tìm kiếm sẻ hiển thị tức thì nên rất mê hoặc và tiện dụng cho người search.

Thường thì trong trang website người ta sử dụn ctrl+f để tìm nhưng nếu trên website có một cái table quá nhiều giá trị trị và nhiều trang thì làm thế nào để search.

Tạo live tìm kiếm table với Jquery

Ví dụ tôi sẻ tạo ra 1 table dạng như dưới đây, basic là sử dụng bootstrap để tạo Cấp Tốc cái này.

Để làm đc bảng này bạn cần thêm đoạn code sau

<input type="text" class="form-control pull-right" style="width:20%" id="search" placeholder="Type to tìm kiếm 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>

Tiếp theo thêm vào đoạn code Jquery sau

<script>// Write on keyup event of keywords 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>

Nhớ thêm JS và bootstrap links sau vào phần head của 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">

Xem demo trực tiếp tại đâyChúc thành công!