Membuat Sorting Data dengan Menggunakan Jquery Data Tables Part 1
Hallo teman-teman, balik lagi di panduan Source Code Aplikasi, di artikel ini kita akan membahas bagaimana cara Membangun Sorting Data Dengan Menggunakan Jquery Data Tables, atau lebih tepatnya merancang guna pencarian data.
Pada dunia developer pasti telah tak asing lagi dengan kata merancang guna search, nah untuk teman-teman yang acap kali merancang suatu program atau program menggunakan php, pasti sering sekali merancang guna search ini dengan menggunakan fungsi-fungsi php dengan step by stepnya, nah kali ini saya akan mengajarkan cara gampangnya merancang guna search data ini dengan menggunakan jquery data table yang pastinya akan lebih gampang.
oke dari di bingung kita seketika saja praktekan, silahkan teman-teman bikin sebuah file di editor masing-masing, dan coba ketikan script HTML berikut:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Data Table Sampel</title>
</head>
<body>
<div class=container tes>
<div class=row>
<div class=col-md-12>
<table id=contoh-tabel class=table table-striped table-borderedcellspacing=0>
<thead>
<tr>
<th>Nama</th>
<th>Domisili</th>
<th>Jenis Kelamin</th>
<th>Usia</th>
<th>Tanggal Lahir</th>
<th>Gaji</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nama</th>
<th>Domisili</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 merancang table dengan banyak data, silahkan teman-teman isikan datanya terserah, lalu sekarang ini 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 mesti terkoneksi dengan internet ya, oke utuk pembahasan berikutnya mengenai pemasangan pluginnya kita bahas di panduan berikutnya, terimakasih.
Sumber https://kursuswebsite.org
