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
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 :
Simpan dalam folder Tabel Search dengan nama style.css
Simpan dalam folder Tabel Search dengan nama script.js
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
Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD
Tidak ada komentar:
Posting Komentar