- Pengertian Jquery
jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalahkumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.
jQuery dikembangkan pertama kali oleh John Resig di tahun 2006. Sejak saat itu, jQuery berkembang menjadi proyek opensource dan menjadi libary JavaScript paling populer di dunia. Untuk Menggunakan Jquery , silahkan download di jquery.com
- Pencarian Data dengan Jquery
Pertama-tama buat folder dengan nama filter . Lalu download file jquery di jquery.com . Kemudian simpan file jquery ke dalam folder filter. Lalu buat file dengan nama filter_jquery.html . Kemudian masukkan script di bawah ini ke dalam file filter_jquery.html
<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“#myInput”).on(“keyup”, function() {
var value = $(this).val().toLowerCase();
$(“#myTable tr”).filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Table Pencarian</h2>
<p>Ketikkan nama atau email untuk mencari data di dalam tabel</p>
<input id=”myInput” type=”text” placeholder=”cari..”>
<br><br>
<table>
<thead>
<tr>
<th>Nama Awal</th>
<th>Nama Akhir</th>
<th>Email</th>
</tr>
</thead>
<tbody id=”myTable”>
<tr>
<td>Muhammad</td>
<td>Bashir</td>
<td>bashir@example.com</td>
</tr>
<tr>
<td>Dodi</td>
<td>Novarian</td>
<td>dodi@mail.com</td>
</tr>
<tr>
<td>Dani</td>
<td>Eka</td>
<td>dani@greatstuff.com</td>
</tr>
<tr>
<td>Kiki</td>
<td>Nur</td>
<td>nur@test.com</td>
</tr>
</tbody>
</table>
<p>Catatan : Id Pencarian di mulai pada tag tbody , agar pencarian tidak mengarah pada theaders</p>
</body>
</html>
Maka tampilan dari script di atas seperti ini :
Maka ketika diketikkan kata pada pencarian data akan memilih secara otomatis sesuai dengan kata yang di masukkan
Created By : Muhammad Bashir