Cara Membuat Tabel Search Dengan Bootstrap dan Javascript

Cara Membuat Tabel Search Dengan Bootstrap dan Javascript - Tabel search adalah sebuah tabel yang ditambahkan fitur search yang berfungsi secara otomatis mencari di dalam baris dari tabel ketika memasukan kata kunci pencariannya. Hal ini akan memudahkan anda dalam memfilter dan mencari data yang terdapat dalam tabel. Fitur ini juga sangatlah ringat sehigga tidak memberikan load page yang berat ketika dalam proses pencarian, hasil akan otomatis muncul seketika. Untuk lebih jelasnya langsung saja kita membuatnya dengan menggunakan Bootstrap dan Javascript.

Baca Juga : Cara Membuat Tabel Sorting Dengan Bootstrap dan Javascript

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Tabel Search, sekarang untuk mempercantik bentuk tabel buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

h2 {
  margin-bottom: 50px;
}

.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
}

.container table {
  width: 100%;
}

.container td, .container th {
  padding: 10px;
}

.container td:first-child, .container th:first-child {
  padding-left: 20px;
}

.container td:last-child, .container th:last-child {
  padding-right: 20px;
}

.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
}

Simpan dalam folder Tabel Search dengan nama style.css

Javascript

Sekarang untuk sortingnya kita tambahkan javascript, buatlah sebuah file baru di Notepad++ kemudian ketikan script berikut :

(function(document) {
 'use strict';

 var LightTableFilter = (function(Arr) {

  var _input;

  function _onInputEvent(e) {
   _input = e.target;
   var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
   Arr.forEach.call(tables, function(table) {
    Arr.forEach.call(table.tBodies, function(tbody) {
     Arr.forEach.call(tbody.rows, _filter);
    });
   });
  }

  function _filter(row) {
   var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
   row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
  }

  return {
   init: function() {
    var inputs = document.getElementsByClassName('light-table-filter');
    Arr.forEach.call(inputs, function(input) {
     input.oninput = _onInputEvent;
    });
   }
  };
 })(Array.prototype);

 document.addEventListener('readystatechange', function() {
  if (document.readyState === 'complete') {
   LightTableFilter.init();
  }
 });

})(document);

Simpan dalam folder Tabel Search dengan nama script.js

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
<title>Tabel Search Bootstrap dan Javascript</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script type="text/javascript" async="" src="script.js"></script>
 </head>
 <body>
<section class="container">

 <h2>Tabel Search Bootstrap dan Javascript</h2>

 <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filtrer" />

 <table class="order-table">
  <thead>
   <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Price</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Jin Toples</td>
    <td>jin.doe@gmail.com</td>
    <td>0123456789</td>
    <td>99</td>
   </tr>
   <tr>
    <td>Jane Toples</td>
    <td>jane@toples.org</td>
    <td>9876543210</td>
    <td>349</td>
   </tr>
   <tr>
    <td>Rengo Kolas</td>
    <td>begi@batman.com</td>
    <td>6754328901</td>
    <td>199</td>
   </tr>
  </tbody>
 </table>

</section>

 </body>
</html>

Simpan dalam folder Tabel Search dengan nama index.html

Sekarang Tabel Search anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD