Hallo teman-teman, balik lagi pada tutorial dumet school, pada kesempatan ini kita akan membahas bagaimana cara Membuat Sorting Data Dengan Menggunakan Jquery Data Tables, atau lebih tepatnya membuat fungsi pencarian data.
Dalam dunia developer pasti sudah tidak asing lagi dengan kata membuat fungsi search, nah bagi teman-teman yang sering kali membuat suatu aplikasi atau sistem menggunakan php, pasti sering sekali membuat fungsi search ini dengan menggunakan fungsi-fungsi php dengan step by stepnya, nah kali ini saya akan mengajarkan cara gampangnya membuat fungsi search data ini dengan menggunakan jquery data table yang tentunya akan lebih mudah.
oke dari pada bingung kita langsung saja praktekan, silahkan teman-teman buat sebuah file di editor masing-masing, dan coba ketikan script HTML berikut:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Data Table Sample</title>
</head>
<body>
<div class="container tes">
<div class="row">
<div class="col-md-12">
<table id="contoh-tabel" class="table table-striped table-bordered"cellspacing="0">
<thead>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Jenis Kelamin</th>
<th>Usia</th>
<th>Tanggal Lahir</th>
<th>Gaji</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Jenis Kelamin</th>
<th>Usia</th>
<th>Tanggal Lahir</th>
<th>Gaji</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Adam</td>
<td>jakarta</td>
<td>laki-laki</td>
<td>61</td>
<td>2011/04/25</td>
<td>2 juta</td>
</tr>
<tr>
<td>bayu</td>
<td>jakarta</td>
<td>laki-laki</td>
<td>30</td>
<td>2011/03/25</td>
<td>3 juta</td>
</tr>
<tr>
<td>susi</td>
<td>depok</td>
<td>perempuan</td>
<td>19</td>
<td>2011/04/25</td>
<td>1 juta</td>
</tr>
<tr>
<td>rizal</td>
<td>jakarta</td>
<td>laki-laki</td>
<td>50</td>
<td>2011/04/25</td>
<td>7 juta</td>
</tr>
<tr>
<td>indah</td>
<td>bogor</td>
<td>perempuan</td>
<td>20</td>
<td>2011/04/25</td>
<td>3 juta</td>
</tr>
<tr>
<td>fatim</td>
<td>bogor</td>
<td>perempuan</td>
<td>20</td>
<td>2011/04/25</td>
<td>2 juta</td>
</tr>
<tr>
<td>zizah</td>
<td>bogor</td>
<td>perempuan</td>
<td>23</td>
<td>2011/04/25</td>
<td>4 juta</td>
</tr>
<tr>
<td>mulyani</td>
<td>bekasi</td>
<td>perempuan</td>
<td>26</td>
<td>2011/04/25</td>
<td>1 juta</td>
</tr>
<tr>
<td>arul</td>
<td>tanggerang</td>
<td>laki-laki</td>
<td>23</td>
<td>2011/04/25</td>
<td>5 juta</td>
</tr>
<tr>
<td>ekky</td>
<td>papua</td>
<td>laki-laki</td>
<td>27</td>
<td>2011/04/25</td>
<td>9 juta</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Nah script di atas saya membuat table dengan banyak data, silahkan teman-teman isikan datanya terserah, lalu sekarang kita akan memanggil CSS library dari bootstrap, coba tambahkan script berikut ini di antara tag head HTMLnya:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
Disini saya memanggil library CSS bootstrap secara online jadi teman-teman harus terkoneksi dengan internet ya, oke utuk pembahasan selanjutnya tentang pemasangan pluginnya kita bahas pada tutorial selanjutnya, terimakasih.