Table Terlalu Banyak Tampilkan Data ? Buatlah Sistem Search / Filter Seperti Ini !

a Simple Bootstrap Table Search with jQuery

0

Beberapa situs menampilkan table untuk berbagai macam keperluan, sayangnya ini akan sedikit menyulitkan jika nyatanya terdapat banyak sekali data dalam table tersebut. Sulit dimana ? Sulit ketika akan mencari hanya satu data saja pada table tersebut, misalnya terdapat ribuan data pada table tapi kita hanya ingin melihat satu data saja.

Maka dari itu, gunakanlah sistem filtering ! Sediakan kolom pencarian pada table tersebut (biasanya berada di bagian atas table), kemudian buatlah sistem filter pada kolom pencarian tersebut. Sehingga ketika ingin mencari 1 data dari ribuan data cukup mengetikkan kata kunci pada pencarian dan akan menampilkan data yang mirip dengna kata kunci.

Filter Tables Bootstrap – jQuery

ads by posciety

Perlu memahami setidaknya sedikit saja mengenai jQuery untuk membuat sistem filter ini atau cukup copy paste kode di bawah. Pada pos sebelumnya kita pernah membahas cara membuat table di Bootstrap, kita gunakan table tersebut dalam tutorial ini kemudian ditambahkan jQuery untuk filtering.

gambar 1 - contoh table bootstrap

Buatlah kolom pencarian di atas table seperti pada gambar di atas atau salin kode berikut:

<h2>Bootstrap Filter Table - jQuery</h2>
  <input class="form-control" id="posSearch" type="text" placeholder="Cari..">
  <br>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Nama</th>
        <th>Email</th>
        <th>No. HP</th>
      </tr>
    </thead>
    <tbody id="posTable">
      <tr>
        <td>Nama Anak Pertama</td>
        <td>emailpertama@posciety.com</td>
        <td>08xx xxxx xxxx</td>
      </tr>
      <tr>
        <td>Nama Anak Kedua</td>
        <td>emailkedua@posciety.com</td>
        <td>08xx xxxx xxxx</td>
      </tr>
      <tr>
        <td>Nama Anak Ketiga</td>
        <td>emailketiga@posciety.com</td>
        <td>08xx xxxx xxxx</td>
      </tr>
      <tr>
        <td>Nama Anak Keempat</td>
        <td>emailkeempat@posciety.com</td>
        <td>08xx xxxx xxxx</td>
      </tr>
            <tr>
        <td>Nama Anak Kelima</td>
        <td>emailkelima@posciety.com</td>
        <td>08xx xxxx xxxx</td>
      </tr>
            <tr>
        <td>Nama Anak Keenam</td>
        <td>emailkeenam@posciety.com</td>
        <td>08xx xxxx xxxx</td>
      </tr>
            <tr>
        <td>Nama Anak Ketujuh</td>
        <td>emailketujuh@posciety.com</td>
        <td>08xx xxxx xxxx</td>
      </tr>
    </tbody>
  </table>

Struktur kode ini akan membuat table dan kolom pencarian seperti yang ditunjukkan pada gambar di atas, ini belum bisa digunakan karena memerlukan jQuery untuk bisa filter / menyaring hasil pencarian. Seperti yang terlihat pada kode di atas, terdapat id pada kolom pencarian (input) dan tbody, id tersebut yang akan kita gunakan di jQuery nantinya.

Selanjutnya, tempelkan script berikut ini tepat sebelum penutup </body>:

<script>
$(document).ready(function(){
  $("#posSearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#posTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

Simpan dan lihat hasilnya !

gambar 2 gif bootstrap jquery table search

Pastikan untuk menempelkan id (data) pada tbody agar header (judul table) tidak dianggap sebagai keyword.

Sekarang, ketika melakukan pencarian di kolom pencarian table akan menampilkan hasil pencarian yang mirip dengan kata kunci tanpa memuat / reload halaman. Lebih cepat dan praktis !

Ini juga bisa dimanfaatkan ketika menampilkan data dari database di table (PHP), tambahkan kolom pencarian di bagian atas table kemudian buatlah jQuery seperti contoh di atas agar data pada table tersebut dapat di saring / di filter dengan mudah.

Artikel Lainnya
Berikan Komentar

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya