Membuat Sorting Data dengan Menggunakan Jquery Data Tables Part 2
Oke teman-teman kita lanjut belajarnya, di panduan sebelumnya kita telah hingga di membangun html dan cssnya, nah untuk teman-teman yang ingin review panduan sebelumnya dapat klik link berikut :KLIK.
Nah, sekarang ini kita akan coba bagi memasang plugin dari jquerynya, sekarang ini silahkan tambahkan script berikut di antara tag head di file html masing-masing:
<script src=https://code.jquery.com/jquery-1.12.3.js></script>
<script src=https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js></script>
<script src=https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js></script>
<script type=text/javascript>
Script diatas berfungsi saya bikin bagi menghubungkan library jquery yang kita butuhkan yaitu corenya, jquery data tablenya dan jquery dari bootstraptnya.
Nah sekarang ini kita bikin guna javascriptnya, silakan tambahkan script berikut :
<script type=text/javascript>
$(document).ready(function() {
$('#contoh-tabel').DataTable();
} );
</script>
Coba tambahkan sedikit internal css seperti berikut:
<style>
.tes{margin-top:30px;}
</style>
Sehingga keseluruhan scriptnya ialah selaku berikut :
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Data Table Sampel</title>
<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 />
<script src=https://code.jquery.com/jquery-1.12.3.js></script>
<script src=https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js></script>
<script src=https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js></script>
<script type=text/javascript>
$(document).ready(function() {
$('#contoh-tabel').DataTable();
} );
</script>
<style>
.tes{margin-top:30px;}
</style>
</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>Tempat tinggal</th>
<th>Jenis Kelamin</th>
<th>Usia</th>
<th>Tanggal Lahir</th>
<th>Gaji</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nama</th>
<th>Tempat tinggal</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, seandainya telah coba teman-teman save dan jalankan di browser masing-masing, seandainya benar karenanya hasilnya akan seperti berikut :
Gimana? lebih gampang bukan dengan menggunakan jquery data table ini? lebih cepat karna tak perlu reload page, oke teman-teman sekianlah dulu panduan kali ini, semoga bermanfaat.
Terimakasih.
Sumber https://kursuswebsite.org
