Kali ini kita akan mencoba membuat paging data yang di ambil berdasarakn database pegawai. Data yang di tampilkan dibatasi 5 data dalam satu halaman, ok langsung saja cekibrot :)
Alurnya seperti ini, data ditampilkan sebanyak 5 kemudian di bawahnya ada button halaman ex: 1,2,3....
Jika button halaman di klik maka data akan diload sesuai dengan button halaman yang di pilih. (maap klo agak ga jelas, he...)
Untuk querydatabase nya silahkan jalankan perintah berikut
CREATE TABLE `tb_pegawai` ( `id_peg` int(2) NOT NULL auto_increment, `nama` varchar(50) collate latin1_general_ci NOT NULL, `jabatan` varchar(20) collate latin1_general_ci NOT NULL, `golongan` varchar(20) collate latin1_general_ci NOT NULL, PRIMARY KEY (`id_peg`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=13 ; INSERT INTO `tb_pegawai` VALUES (1, 'Budi', 'direktur', 'II'); INSERT INTO `tb_pegawai` VALUES (2, 'Santi', 'staf', 'III'); INSERT INTO `tb_pegawai` VALUES (3, 'Rani', 'manager', 'III'); INSERT INTO `tb_pegawai` VALUES (4, 'Dina', 'sales', 'I'); INSERT INTO `tb_pegawai` VALUES (5, 'Andi', 'marketing', 'II'); INSERT INTO `tb_pegawai` VALUES (6, 'Mulis', 'manager', 'III'); INSERT INTO `tb_pegawai` VALUES (7, 'Yanti', 'sales', 'I'); INSERT INTO `tb_pegawai` VALUES (8, 'Sulaiman', 'direktur', 'III'); INSERT INTO `tb_pegawai` VALUES (9, 'Sami', 'sales', 'II'); INSERT INTO `tb_pegawai` VALUES (10, 'Sandi', 'sales', 'I'); INSERT INTO `tb_pegawai` VALUES (11, 'Jaya', 'marketing', 'III'); INSERT INTO `tb_pegawai` VALUES (12, 'Mastur', 'sales', 'II');
Buat file dengan nama koneksi.php
<?php $server = "localhost"; $username = "nama_user"; $password = ""; $database = "nama_database"; // Koneksi dan memilih database di server mysql_connect($server,$username,$password) or die("Koneksi gagal"); mysql_select_db($database) or die("Database tidak bisa dibuka"); ?>
Buat file dengan nama index.php
Tulis file Html nya seperti ini
<?php include "koneksi.php"; $limit = 5; $query = mysql_query("SELECT * FROM tb_pegawai"); $count = mysql_num_rows($query); $pages = ceil($count/$limit); ?> <h1>Contoh Paging dengan Jquery</h1> <div class="loading"><img src="ajax-loader.gif" border="0" /></div> <div id="tampil_data"></div> <div id="paging_button"> <?php echo "<ul>"; for($i=1; $i<=$pages; $i++){ echo '<li id="'.$i.'">'.$i.'</li>'; } echo "</ul>"; ?> </div>
Pada bagian tag div class loading digunakan untuk menampilkan animasi "loading", pada tag div id "tampil_data" untuk menampilkan data-data nama pegawai, dan tag div id "paging_button" digunakan untuk menampilkan tombol2 halaman.
Sekarang pada index.php tadi kita tambah kan javascript untuk pertukaran data, script nya seperti ini
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ tampil_data(1); pilih_pages(); $("#1").css({'background-color' : '#006699'}); //agar paging button bagian pertama berubah warna, karena page 1 yang pertama di jalankan }); //untuk memunculkan animasi loading //sebulumnya properti class loading sudah di set display:none function show_loader(){ $(".loading").fadeIn(200); } //menghilangkan animasi loading function hide_loader(){ $(".loading").fadeOut(200); } //menampilkan data function tampil_data(pages){ show_loader(); $("#tampil_data").load("tampil_data.php?page=" + pages, hide_loader); } function pilih_pages(){ $("#paging_button li").click(function(){ var pages = this.id; tampil_data(pages); $("#paging_button li").css({'background-color' : ''}); $(this).css({'background-color' : '#006699'}); //ganti warna paging button yang di click return false; }); } </script>
Dan ini script lengkap untuk index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Paging dengan Jquery</title> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ tampil_data(1); pilih_pages(); $("#1").css({'background-color' : '#006699'}); //agar paging button bagian pertama berubah warna, karena page 1 yang pertama di jalankan }); //untuk memunculkan animasi loading //sebulumnya properti class loading sudah di set display:none function show_loader(){ $(".loading").fadeIn(200); } //menghilangkan animasi loading function hide_loader(){ $(".loading").fadeOut(200); } //menampilkan data function tampil_data(pages){ show_loader(); $("#tampil_data").load("tampil_data.php?page=" + pages, hide_loader); } function pilih_pages(){ $("#paging_button li").click(function(){ var pages = this.id; tampil_data(pages); $("#paging_button li").css({'background-color' : ''}); $(this).css({'background-color' : '#006699'}); //ganti warna paging button yang di click return false; }); } </script> </head> <body> <?php include "koneksi.php"; $limit = 5; $query = mysql_query("SELECT * FROM tb_pegawai"); $count = mysql_num_rows($query); $pages = ceil($count/$limit); ?> <h1>Contoh Paging dengan Jquery</h1> <div class="loading"><img src="ajax-loader.gif" border="0" /></div> <div id="tampil_data"></div> <div id="paging_button"> <?php echo "<ul>"; for($i=1; $i<=$pages; $i++){ echo '<li id="'.$i.'">'.$i.'</li>'; } echo "</ul>"; ?> </div> </body> </html>Agar function tampil_data pada javascript berjalan baik, kita perlu membuat file tampil_data.php yang merespon permintaan dari function tampil_data.
tampil_data.php
<?php sleep(1); //agar loading animasi kelihatan, di hapus juga ga apa2 include "koneksi.php"; $limit = 5; $pages = $_GET["page"]; $start = ($pages-1)*5; $query = mysql_query("SELECT * FROM tb_pegawai ORDER BY id_peg LIMIT $start, $limit"); $count = mysql_num_rows($query); echo "<table><tr><th>No</th><th>Nama Pegawai</th><th>Golongan</th><th>Jabatan</th></tr>"; $no = $start; while ($r = mysql_fetch_array($query)){ $no ++; echo "<tr><td>$no</td><td>$r[nama]</td><td>$r[golongan]</td><td>$r[jabatan]</td></tr>"; } echo "</table>"; ?>
Agar tampilan dapat lebih rapi dan cantik silahkan atur css nya masing-masing, he....
Silahkan lihat demonya
Download source code lengkap disini
mantep gan, izin nyimak :D
ReplyDeleteThanxs Gan
ReplyDeletematur thanks you gan..ngikut ngopi z
ReplyDeleteterima kasih infonya Gan.. :D
ReplyDeletethanks gan, kereeennn
Deletewah wah wah mas, keren banget...
ReplyDeleteini dia yg ane cari-cari...
dari lubuk hati terdalam ane ucapkan "i love you"
.
eh salah.... "makasih".. hehehehe
makasih source code nya
ReplyDeleteBagus gan, manfaat...namun ane punya kendala nih dikit....gimna caranya menambahkan kolom untuk edit dan hapus yah....???
ReplyDeleteKalo digabung java sama tampil data nya bisa ga gan ?
ReplyDeleteijin nyedot gan ...
ReplyDeleteterimakasih atas tutorialnya
sukses ane praketekin gan . Makasih ilmunya,gan :D
ReplyDeletemasih ada source kodenya gan?
ReplyDeleteane download sudah tidak aktif lagi link nya,
boleh emailkan ke email saya chenn0915@gmail.com