Penggunaan Plugin Data Tables Untuk Membuat Tabel
PENGERTIAN
DataTables adalah plug-in untuk jQuery perpustakaan Javascript. Ini adalah alat yang sangat fleksibel, berdasarkan dasar-dasar peningkatan progresif, yang akan menambah kontrol interaksi canggih untuk setiap tabel HTML
LATAR BELAKANG
Agar menampilkan data jadi lebih efisien dan dapat lebih cepat mencari data melalui tools yang di sediakan oleh DataTables.
MAKSUD & TUJUAN
Tujuan penggunaan DataTables ini adalah agar data dapat tampil lebih efisien dan data juga pencarian data lebih cepat serta agar mengerti cara penggunaan DataTables.
ALAT & BAHAN
- PC / Laptop
- Text Editor
- File Framworks DataTables
E. LANGKAH PENGERJAAN
1. Tahap awal yang harus kita lakukan untuk mulai menggunakan plugin datatables adalah download dulu plugin datatables di situs resminya di sini. karena plugin jquery datatables di bangun menggunakan jquery maka kita juga memerlukan library jquery. tapi kita tidak perlu lagi mendownload jquery nya. karena library jquery nya sudah di sediakan juga di dalam folder js pada directory datatables.
Untuk bisa menggunakan plugin datatables kita harus menghubungkan dulu dengan file library jquery dan plugin datatables nya. ohya di tutorial ini saya juga menggunakan bootstrap agar tampilan dari table yang kita buat lebih menarik.
2. Sebagai contoh saya membuat file bernama aindex.html dan disebelahnya ada file datatable yang sudah di download tadi. Lalu dimana letak css dan javascriptnya ? letaknya ada di DataTables/media/ . Nah lalu untuk langkah pertama kita hubungkan terlebih dahulu file html dengan datatable
<link rel="stylesheet" href="DataTables/media/css/bootstrap.min.css"/>3. Setelah selesai menghubungkan file-file yang kita perlukan seperti bootstrap, jquery dan plugin jquery datatables. kemudian kita tinggal membuat table yang berisi data. data nya di sini saya buat asal-asalan aja asal udah berbentuk. format struktur penulisan element table html yang di baca oleh datatables harus menggunakan tag <thead> untuk table bagian kepala. dan tag <tbody> untuk table bagian body.
<link rel="stylesheet" href="DataTables/media/css/dataTables.bootstrap.css"/>
<script src="DataTables/media/js/jquery.js"></script>
<script src="DataTables/media/js/jquery.dataTables.js"></script>
<script src="DataTables/media/js/dataTables.bootstrap.js"></script>
<!doctype html>
<html>
<head>
<title>Example Datatables</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="DataTables/media/images/favicon.ico">
<link rel="stylesheet" href="DataTables/media/css/bootstrap.min.css"/>
<link rel="stylesheet" href="DataTables/media/css/dataTables.bootstrap.css"/>
</head>
<body>
<div class="container">
<h2 style="text-align: center;font-weight: bold;">Contoh Penggunaan FrameWork Data Table</h2>
<table id="pegawai" class="display table table-bordered table-hover table-striped">
<thead>
<tr class="bg-primary">
<th width="1%">Nomor</th>
<th width="8%">Nama</th>
<th width="8%">Alamat</th>
<th width="8%">Gaji</th>
<th width="8%">Aksi</th>
</tr>
</thead>
<tbody>
<tr align='left'>
<td style="text-align: center;">1</td>
<td style="text-align: center;">Sukarmi jahim</td>
<td style="text-align: center;">Mexico</td>
<td style="text-align: center;">18000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">2</td>
<td style="text-align: center;">Yogi Prasetyawan</td>
<td style="text-align: center;">Surabaya</td>
<td style="text-align: center;">10000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">3</td>
<td style="text-align: center;">Aditya Priya</td>
<td style="text-align: center;">Malang</td>
<td style="text-align: center;">12000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">4</td>
<td style="text-align: center;">Inzhagi Dewan</td>
<td style="text-align: center;">Madiun</td>
<td style="text-align: center;">15000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">5</td>
<td style="text-align: center;">Bima Zainudin</td>
<td style="text-align: center;">Malang</td>
<td style="text-align: center;">17000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">6</td>
<td style="text-align: center;">Maulana Ridwan</td>
<td style="text-align: center;">Surabaya</td>
<td style="text-align: center;">20000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">7</td>
<td style="text-align: center;">Dimas Puguh</td>
<td style="text-align: center;">Keidiri</td>
<td style="text-align: center;">16000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">8</td>
<td style="text-align: center;">Dirga Yuda</td>
<td style="text-align: center;">Klaten</td>
<td style="text-align: center;">12000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">9</td>
<td style="text-align: center;">Yoga Wahyu</td>
<td style="text-align: center;">Bojonegoro</td>
<td style="text-align: center;">15000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">10</td>
<td style="text-align: center;">Revo Alderi</td>
<td style="text-align: center;">Karanganyar</td>
<td style="text-align: center;">16000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">11</td>
<td style="text-align: center;">Alif Sulthoni</td>
<td style="text-align: center;">Karanganyar</td>
<td style="text-align: center;">15000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">12</td>
<td style="text-align: center;">Amila Qomariah</td>
<td style="text-align: center;">Madiun</td>
<td style="text-align: center;">15000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
<tr align='left'>
<td style="text-align: center;">13</td>
<td style="text-align: center;">Sugeng Riyadi</td>
<td style="text-align: center;">Madiun</td>
<td style="text-align: center;">19000</td>
<td style="text-align: center;">
<a href="edit.php?id="><button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit"></span></button></a>
<a href="hapus.php?id="><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="DataTables/media/js/jquery.js"></script>
<script src="DataTables/media/js/jquery.dataTables.js"></script>
<script src="DataTables/media/js/dataTables.bootstrap.js">
</body>
</html>
<script type="text/javascript">Kita harus memerhatikan nama class pada tabel '.table' itu adalah tabel yang akan saya berikan plugin data table. Jadinya seperti ini dan datatable sudah siap untuk digunakan.
$(function() {
$(".table").DataTable();
});
</script>
KESIMPULAN
Jadi dengan menggunakan DataTable ini kita tidak perlu ribet - ribet membuat kotak pencarian atau yang lain tinggal includekan plugin lalu kita berikan fungsi datatable sesuai class yang dibuat, selesai ~ Sekian terima kasih
Tidak ada komentar :
Posting Komentar