Print this page
Setelah kamu download dan ekstrak, kamu akan menemukan lima folder, tapi saya pakai satu folder saja, yauitu folder media, karena didalam folder itu terdapat JQuery/Javascript dan style yang adalah inti dari plugin dataTables.
Ok sudah cukup pengenalannya, langsung saja
So what we need?
Pertama, tentu saja script Jquery, JS dan style yang sebelumnya telah saya download
Kedua, membuat database, table dan field yang gunanya adalah menyimpan data data yang akan ditampilkan pada web. Bgai yang pernah mengikuti dan mendownload tutorial sebelumnya yaitu Tutorial Membuat Pagination dengan PHP dan MySQLi, tidak perlu membuat database baru lagi, karena saya menggunakan database yang sama.
Ketiga buat script untuk pagiationnya , saya akan buat scriptnya dengan nama paging_jquery.php
script paging_jquery.php
<!DOCTYPE html>
<html>
<head>
<title>Plugin dataTables</title>
<style type="text/css">
@import "dataTables/media/css/demo_table_jui.css";
@import "dataTables/media/themes/sunny/jquery-ui-1.8.4.custom.css";
</style>
<script src="dataTables/media/js/jquery.js"></script>
<script src="dataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#datatables').dataTable({
"oLanguage": {
"sLengthMenu": "Tampilan _MENU_ data",
"sSearch": "Cari: ",
"sZeroRecords": "Tidak ditemukan data yang sesuai",
"sInfo": "_START_ sampai _END_ dari _TOTAL_ data",
"sInfoEmpty": "0 hingga 0 dari 0 entri",
"sInfoFiltered": "(disaring dari _MAX_ entri keseluruhan)",
"oPaginate": {
"sFirst": "<<",
"sLast": ">>",
"sPrevious": "<",
"sNext": ">"
},
"sPaginationType":"full_numbers",
"bJQueryUI":true
});
})
</script>
</head>
<body>
<table id="datatables" class="display">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<?php
$konek = mysqli_connect("localhost","root","","paging");
$query = "SELECT * FROM anggota ORDER BY id_anggota";
$tampil = mysqli_query($konek, $query);
$no = 1;
while ($r = mysqli_fetch_array($tampil)) {
echo "<tr>
<td width=\"10\">$no</td>
<td>$r[nama]</td>
<td>$r[alamat]</td>
</tr>";
$no++;
}
?>
</tbody>
</table>
</body>
</html>
saat saya jalankan script pahing_jquery.php maka hasilnya akan seperti ini :
bagus bukan?
menurut saya sendiri, jquery paging ini mempunyai banyak kelebihan seperti:
- Searching atau filtering yang cepat.
- Tidak memerlukan banyak coding untuk membuatnya.
- Dapat menentukan jumlah data yang ingin ditampilkan dengan combo box.
- Didukung berbagain bahasa (oLanguage), sehingga bahasa indonesia bisa tampil pada tabel.
- Dapat melakukan sorting dengan mengklik tanda panah ke atas/ke bawah pada kolom header judul tabel.
- Theme atau skin yang disediakan beragama dan penggantiannya sangat mudah, di dalam folder theme terdapat tiga theme atau skin yang dapat di coba , cara menggantinya sangan mudah, caranya tingga rubah sedikit script
@import "dataTables/media/themes/sunny/jquery-ui-1.8.4.custom.css";
misal ganti dengan
@import "dataTables/media/themes/smoothness/jquery-ui-1.8.4.custom.css";
Ternyata untuk membuat fitur secanggih ini tidaklah teralu sulit kan
ok semoga tutorial ini dapat bermanfaat.
gan yang pertama saya tanya, maaf ya koq tutorialnya sama persis dengan isi buku dari pak Lukmanul Hakim (Rahasia Master PHP & MySQLI) ... apa ini juga situs beliau ?
ReplyDeletegimana cara paging di atas klo dimasukkan di web utama, cos dah coba berkali2 gak bisa jalan untuk halaman berikutya (tetap nampilkan 10 data awal aja) ..
makasih, ditunggu jawabannya
gan yang pertama saya tanya, maaf ya koq tutorialnya sama persis dengan isi buku dari pak Lukmanul Hakim (Rahasia Master PHP & MySQLI) ... apa ini juga situs beliau ?
ReplyDeletegimana cara paging di atas klo dimasukkan di web utama, cos dah coba berkali2 gak bisa jalan untuk halaman berikutya (tetap nampilkan 10 data awal aja) ..
makasih, ditunggu jawabannya
maaf responnya lama
Deleteiya gan , ini tutorial dasarnya memang dari buku pak Lukmanul Hakim dan sedikit saya kembangkan dengan versi saya
coba sertakan errornya seperti apa , nanti coba saya bantu
assalamulaykum bang, file nya sdh ga bs didonlot lagi, mohon upload ulang..
ReplyDelete