[Contoh] Menyiasati Paging dengan JQuery JCarousel

Paging adalah cara memisahkan banyaknya data dalam halaman-halaman tertentu dengan satu halaman berisi sejumlah data. 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. Paging ini dapat menggunakan teknik PHP murni, dapat juga diakali dengan 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:

 

Nip Nama Honor Status Ambil

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

7 thoughts on “[Contoh] Menyiasati Paging dengan JQuery JCarousel

    1. Dikopi saja mas.. langsung taruh di komputer anda. Atau dengan cara : linknya diklik kanan, Save Link As, simpan di komputer anda.

      Atau kalau statusnya online langsung saja include scriptnya dari sana :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">