How To

Cara Membuat Filter Search Tabel

Di bawah ini kita akan mempelajar cara membuat filter search tabel dengan JavaScript.

Filter Tabel

Cara menggunakan JavaScript untuk mencari data tertentu dalam tabel.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Daftar Pelanggan</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Tulis nama di sini" title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Nama</th>
    <th style="width:40%;">Negara</th>
  </tr>
  <tr>
    <td>Agus Ilman</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Bagus Aryash</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Tony stark</td>
    <td>Amerika SErikat</td>
  </tr>
  <tr>
    <td>Eliison</td>
    <td>Tahiti</td>
  </tr>
  <tr>
    <td>Ibnu Ammar</td>
    <td>Arab</td>
  </tr>
  
</table>

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  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>

</body>
</html>

Buat Filter Tabel

Langkah 1) Tambahkan HTML:
Contoh

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Tulis nama di sini" title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Nama</th>
    <th style="width:40%;">Negara</th>
  </tr>
  <tr>
    <td>Agus Ilman</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Bagus Aryash</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Tony stark</td>
    <td>Amerika SErikat</td>
  </tr>
  <tr>
    <td>Eliison</td>
    <td>Tahiti</td>
  </tr>
  <tr>
    <td>Ibnu Ammar</td>
    <td>Arab</td>
  </tr>
  
</table>

Langkah 2) Tambahkan CSS:
Style pada elemen input dan tabel:
Contoh

#myInput {
  background-image: url('/css/searchicon.png'); /* Tambahakan ikon search icon ke field input */  background-position: 10px 12px; /* posisi ikon search  */  background-repeat: no-repeat; /* jagnan mengulangi gambar ikon */  width: 100%; /* lebar maksium */  font-size: 16px; /* naikkan font-size */  padding: 12px 20px 12px 40px; /* Tambahkan beberapa padding */  border: 1px solid #ddd; /* tambahkan warna abu pada border */  margin-bottom: 12px; /* tambahkan ruang di bawah field input */}

#myTable {
  border-collapse: collapse; /* Collapse borders */  width: 100%; /* lebar maksimum */  border: 1px solid #ddd; /* tambhakan border abu-abu */  font-size: 18px; /* naikkan font-size */}

#myTable th, #myTable td {
  text-align: left; /* teks rata kiri */  padding: 12px; /* Tambahkan padding */}

#myTable tr {
  /* Tambahkan border bawah ke semua baris tabel */  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  /* Tambahkan warna background abu-abu ke header tabel dan saat mengarahkan kursor */  background-color: #f1f1f1;
}

Langkah 3) Tambahkan JavaScript:
Contoh

<script>
function myFunction() {
  // Deklarasi variable
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Ulangi(looping) melalui semua baris tabel, dan sembunyikan mereka yang tidak cocok dengan kueri pencarian
  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>

Tip: Hapus toUpperCase() jika ingin melakukan pencarian case-sensitive.

Tip: Ubah tr[i] .getElementsByTagName ('td') [0] menjadi [1] jika ingin mencari “negara” (indeks 1) alih-alih mencari “Nama” (indeks 0).


Hanifah Nurbaeti

Share
Tags: filterHow To