[Contoh] Menyiasati Paging dengan JQuery JCarousel
http://bimosaurus.com/2012/04/11/contoh-menyiasati-paging-dengan-jquery-jcarousel/
Paging sering menjadi masalah tersendiri bagi para developer pemula. Dalam beberapa posting lalu, kita telah mempelajari Simple Advanced Paging PHP yaitu di posting http://bimosaurus.com/2011/09/13/simple-advanced-paging-php/. Namun saya mendapatkan request beberapa hal tentang bagaimana agar paging dapat disederhanakan lagi. Maka terbayanglah sebuah simple paging dengan menyiasati menggunakan JQuery JCarousel.
JCarousel memiliki fungsi untuk membuat tampilan bergeser muncul satu demi satu seperti pada contoh disini: http://bimosaurus.com/demo/paging_jq.php.
Mudah saja, dengan demikian kita bisa mengkreasikan paging dengan JCarousel ini. Kita akan memilih JCarousel model Lite yang ringan, dengan JQuery Minimal juga. Silakan dapat di download di http://www.gmarwaha.com/jquery/jcarousellite/#download, dan http://docs.jquery.com/Downloading_jQuery.
Saya memilih : jquery-1.7.1.min.js dan jcarousellite_0.4.0.min.js. Selanjutnya, anda dapat membuat script tampilan paging seperti berikut ini:
<?php //connect dan ambil parameter paging seperti biasa if(mysql_connect("localhost","root","")){ mysql_select_db("kepegawaian"); } $page = isset( $_GET['page'] ) ? $_GET['page'] : 1; //$page adalah yang masuk dari parameter page. Jika tidak ada dianggap 1 $item_per_page = 2; $offset = ($page - 1) * $item_per_page ; ?> <!--Tabling Data sesuai halaman--> <table border="1"> <tr><th>Nip</th><th>Nama</th><th>Honor</th><th>Status Ambil</th></tr> <?php $sql_ = "SELECT * FROM `pegawai` LIMIT $offset, $item_per_page"; $query_ = mysql_query( $sql_ ); while( $res=mysql_fetch_array( $query_ ) ){ ?> <tr><td><?php echo $res['nip'];?></td><td><?php echo $res['nama'];?></td><td><?php echo $res['honor'];?></td><td><?php echo $res['status_ambil'];?></td></tr> <?php } ?> </table><br /> <!--Akhir dari tabling--> <!--MULAI PAGING... tambahkan script ini, dan sesuaikan tempatnya ya--> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jcarousellite_0.4.0.min.js"></script> <script> $(function() { $(".anyClass").jCarouselLite({ btnNext: ".next", btnPrev: ".prev" }); }); </script> <button style="float:left;"><<</button> <div style="float:left"> <ul> <!--Silakan berquery data--> <?php $sql = "select * from `pegawai`"; $query = mysql_query($sql); $n = mysql_num_rows($query);//jumlah data $jumhal = ceil( $n / $item_per_page ); $i = 1; while( $i<=$jumhal ){ ?> <!--Jangan lupa sisipkan ini--> <li style="margin-left:30px; width:50px;"><a href="?page=<?php echo $i;?>"><?php echo $i;?></a></li> <!--Selesai penyisipan--> <?php $i++; } ?> <!--Akhir dari query--> </ul> </div> <button style="float:left">>></button> <div style="clear:both;"></div> <br /> Or Go To : <form action=""><input type="text" name="page"><input type="submit" value="Go" style="width:30px;"></form>
Saya masih memilih setia menggunakan database lama saya yang saya gunakan untuk contoh-contoh lalu, database kepegawaian. Dengan tabel pegawai seperti berikut:
nip | nama | honor | status_ambil |
---|---|---|---|
10001 | Susanto | Rp. 1000000 | Belum |
10002 | Susanti | Rp. 1000000 | Sudah |
10003 | Marwoto | Rp. 2000000 | Sudah |
10004 | Gunadi | Rp. 1500000 | Belum |
10005 | Nur Eko | Rp. 1000000 | Belum |
Nah, selamat mencoba, semoga sukses dan semoga bermanfaat
Thank u bgt nih infonya! –Rudyanto Lay