Cách tạo Filter cho Table bằng JavaScript trên Website và Blogspot

Trong bài viết này, tôi xin chia sẻ với các bạn cách tạo một bộ lọc cho bảng dữ liệu nhiều dòng. Rất hữu ích cho việc tìm kiếm một ký tự, một từ hay một cụm từ nào đó trong bảng.

Ví dụ chúng ta có một bảng dữ liệu và một khung tìm kiếm như bên dưới. Khi người dùng gõ từ cần tìm kiếm thì bảng dữ liệu sẽ tìm hiển thị những kết quả tìm được. Các bạn có thể thử gõ vào khung tìm kiếm bên dưới để xem kết quả trực quan hơn nhé.

Name Start date Salary
Tiger Nixon 2011/04/25 $320,800
Garrett Winters 2011/07/25 $170,750
Ashton Cox 2009/01/12 $86,000
Cedric Kelly 2012/03/29 $433,060
Airi Satou 2008/11/28 $162,700
Brielle Williamson 2012/12/02 $372,000
Herrod Chandler 2012/08/06 $137,500
Rhona Davidson 2010/10/14 $327,900
Colleen Hurst 2009/09/15 $205,500
Sonya Frost 2008/12/13 $103,600
Jena Gaines 2008/12/19 $90,560
Quinn Flynn 2013/03/03 $342,000
Charde Marshall 2008/10/16 $470,600
Haley Kennedy 2012/12/18 $313,500
Tatyana Fitzpatrick 2010/03/17 $385,750
Michael Silva 2012/11/27 $198,500
Paul Byrd 2010/06/09 $725,000
Gloria Little 2009/04/10 $237,500
Bradley Greer 2012/10/13 $132,000
Dai Rios 2012/09/26 $217,500
Jenette Caldwell 2011/09/03 $345,000
Yuri Berry 2009/06/25 $675,000
Caesar Vance 2011/12/12 $106,450
Doris Wilder 2010/09/20 $85,600
Angelica Ramos 2009/10/09 $1,200,000
Gavin Joyce 2010/12/22 $92,575
Jennifer Chang 2010/11/14 $357,650
Brenden Wagner 2011/06/07 $206,850
Fiona Green 2010/03/11 $850,000
Shou Itou 2011/08/14 $163,000
Michelle House 2011/06/02 $95,400
Suki Burks 2009/10/22 $114,500
Prescott Bartlett 2011/05/07 $145,000
Gavin Cortez 2008/10/26 $235,500
Martena Mccray 2011/03/09 $324,050
Unity Butler 2009/12/09 $85,675
Howard Hatfield 2008/12/16 $164,500
Hope Fuentes 2010/02/12 $109,850
Vivian Harrell 2009/02/14 $452,500
Timothy Mooney 2008/12/11 $136,200
Jackson Bradshaw 2008/09/26 $645,750
Olivia Liang 2011/02/03 $234,500
Bruno Nash 2011/05/03 $163,500
Sakura Yamamoto 2009/08/19 $139,575
Thor Walton 2013/08/11 $98,540
Finn Camacho 2009/07/07 $87,500
Serge Baldwin 2012/04/09 $138,575
Zenaida Frank 2010/01/04 $125,250
Zorita Serrano 2012/06/01 $115,000
Jennifer Acosta 2013/02/01 $75,650
Cara Stevens 2011/12/06 $145,600
Hermione Butler 2011/03/21 $356,250
Lael Greer 2009/02/27 $103,500
Jonas Alexander 2010/07/14 $86,500
Shad Decker 2008/11/13 $183,000
Michael Bruce 2011/06/27 $183,000
Donna Snider 2011/01/25 $112,000

{tocify} $title = {Table of Contents}

Thiết kế khung tìm kiếm và bảng dữ liệu

Trước tiên các bạn cần có một bảng dữ liệu. Bảng dữ liệu được gán một ID, sẽ dễ dàng cho việc viết code javascript. Ví dụ tôi có một khung tìm kiếm và một bảng dữ liệu như sau:

<input type="text" id="myInput" onkeyup="myFilter()" placeholder="Search..." autocomplete="off">
<div class="table-responsive">
	<table class="display" id="example" style="width: 100%;">
  	<thead>
      <tr  class="header">
        <th>Name</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
  	</thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    ...
  </tbody>
</table>
</div>

Để định dạng khung tìm kiếm có icon và bảng dữ liệu thanh trượt dọc như đầu bài viết. Ta sử dụng đoạn code CSS sau:

<style>
  	.table-responsive {
    	max-height: 600px;
        height: auto;
    	overflow: hidden;
    	overflow-y: scroll;
	}
  	#myInput {
  		background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYFitaxaef3Jny9Bt3VLcqD2Q3dfaxwGzV6ZowVje-iEatF9TZhxnxXeHiep3hlFaoMy_4ym_eosCZN3CifeNzK9Ys6-6wpIA53twYGvgsmA-o7fE5bKSEJNa38skej0p-DSKxTmQH53_0/s16000/search_icon.png'); 
  		background-position: 10px 10px;
  		background-repeat: no-repeat;
  		width: 100%; 
  		font-size: 16px; 
  		padding: 7px 10px 7px 40px; 
  		border: 1px solid #ddd;
  		margin-bottom: 12px; 
      	border-radius: 20px;
	}
  	#example thead tr.header, #example tr:hover {
  		background-color: #f1f1f1;
	}
</style>


Tạo hàm lọc dữ liệu bằng JavaScript

Để hiểu và xây dựng được hàm tìm kiếm cho bảng dữ liệu thì các bạn xem qua nguyên lý của quá trình tìm kiếm như sau:

Khi người dùng vừa gõ xong một ký tự, sự kiện keyup của Input sẽ được thực thi thông qua hàm myFilter(). Trong hàm myFilter(), sẽ chạy vòng lặp từ dòng đầu đến dòng cuối cùng của bảng. Trên mỗi dòng, sẽ dò tìm ký tự của bạn đã gõ. Nếu kết quả trả về là không có, thì dòng đó sẽ được ẩn đi bằng cách đặt thuộc tính display="none", ngược lại thì đặt dispplay="".

Chi tiết cú pháp của hàm myFilter() như sau:

<script>
function myFilter() {

  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("example");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

2 Comments

Previous Post Next Post

Comments