[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 class="prev" style="float:left;"><<</button>
 
 
<div class="anyClass" 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 class="next" 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