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

02/10/2021

2

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>