Tutorial Menggunakan Datatables Pada PHP

21.34

Pada tutorial kali ini kita akan membahas cara menggunakan plugin datatables pada PHP. Plugin datatables sendiri berfungsi untuk membuat mengintegrasikan tabel dengan fitur pagination, search, multi column ordering seperti yang dijelaskan pada official website datatables. Plugin ini bersifat open-source jadi kita tinggal download source code dari plugin ini di official website / disini.

Cara Menggunakan Plugin Datatables

Pertama coba buat tables dengan nama class coba seperti pada script dibawah ini 
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Datatables</title>
</head>
<body>
<center>
<h1>Tutorial Datatables | N - Tech</h1>
</center>
<br/>
<br/>
<div class="container">
<table class="table table-striped table-bordered coba">
<thead>
<tr>
<th>Nama</th>
<th>NIS</th>
<th>KELAS</th>
<th>ALAMAT</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Ardi</td>
<td>13312</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Ardi</td>
<td>13312</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Maka akan muncil tampilan seperti dibawah ini
Setelah muncul tabel dan data yang telah ditulis selanjutnya tambahkan script sehingga script seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Datatables</title>
<!--Tambahkan Script Dibawah Ini-->
<script type="text/javascript" src="assets/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" src="assets/DataTables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/dataTables.bootstrap.css">
</head>
<body>
<center>
<h1>Tutorial Datatables | N - Tech</h1>
</center>
<br/>
<br/>
<div class="container">
<table class="table table-striped table-bordered data">
<thead>
<tr>
<th>Nama</th>
<th>NIS</th>
<th>KELAS</th>
<th>ALAMAT</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Ardi</td>
<td>13312</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Ardi</td>
<td>13312</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
<tr>
<td>Putra</td>
<td>13311</td>
<td>1A</td>
<td>Malang</td>
<td>Aktif</td>
</tr>
</tbody>
</table>
</div>
</body>
<!--Tambahkan Script Dibawah Ini-->
<script type="text/javascript">
$(document).ready(function(){
$('.data').DataTable();
});
</script>
</html>
view raw index.html hosted with ❤ by GitHub

Maka tampilan akan berubah menjadi seperti gambar dibawah ini

Untuk full sourcodenya dapat didownload di link ini. Terima kasih. Semoga bermanfaat

Post a Comment

Tidak ada komentar

Langganan: Posting Komentar ( Atom )
Diberdayakan oleh Blogger.