Oke teman-teman kita lanjut belajarnya, pada tutorial sebelumnya kita sudah sampai pada membuat html dan cssnya, nah bagi teman-teman yang ingin review tutorial sebelumnya bisa klik link berikut :KLIK.
Nah, sekarang kita akan coba untuk memasang plugin dari jquerynya, sekarang silahkan tambahkan script berikut di antara tag head pada 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 buat untuk menghubungkan library jquery yang kita butuhkan yaitu corenya, jquery data tablenya dan jquery dari bootstraptnya.
Nah sekarang kita buat fungsi 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 adalah sebagai berikut :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Data Table Sample</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-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, jika sudah coba teman-teman save dan jalankan pada browser masing-masing, jika benar maka hasilnya akan seperti berikut :
Gimana? lebih mudah bukan dengan menggunakan jquery data table ini? lebih cepat karna tidak perlu reload page, oke teman-teman sekian dulu tutorial kali ini, semoga bermanfaat.
Terimakasih.