Skip to content

[Contoh] Menyiasati Paging dengan JQuery JCarousel

April 11, 2012

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

From → Tak Berkategori

One Comment
  1. Thank u bgt nih infonya! –Rudyanto Lay

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: