Pagination sederhana dengan PHP, SQLite, dan JQuery
Hari ini gw mau sharing bagaimana melakukan pagination dengan bantuan JQuery
Kalau googling “php pagination with jquery” akan kita temukan beberapa hasil pencarian, tapi sepanjang yang gw lihat tidak ada satupun yang mudah untuk di_copy-paste_ (hahaha..), ntah file-nya lebih dari satu lah, kode yang rumit lah, dan lain-lain.
Nah, untuk itu marilah kita buat bersama cara mudahnya ber_pagination_-ria dengan PHP, SQLite, dan JQuery.
Tentunya sudah faham dong bagaimana melakukan pagination dengan PHP dan SQLite (atau database SQL lainnya), inti pagination pada database SQL (setidaknya yang gw tau dengan MySQL dan SQLite) terletak pada perintah LIMIT, sedangkan cara penghitungan jumlah halaman dilakukan oleh PHP dengan berbagai macam cara.
Yang kita pakai kali ini adalah cara paling sederhana, yaitu dengan CEIL :
$total_halaman = ceil($jumlah_konten / $maksimal);
$jumlah_konten kita dapatkan dari total row database, sedangakan $maksimal berupa bilangan (integer) dengan fungsi agar database hanya menampilkan jumlah row yang kita inginkan. Bingung? Sama! Kita lihat kode lengkapnya :
$halaman = $_GET[‘halaman’]; // Dapatkan nilai ‘halaman’
$limit = 15; // Tampilkan hanya 15 row
$start = $limit * ($halaman – 1); // Hitung posisi row yang ingin ditampilkan
$jumlah_konten = numrows(); // Ambil jumlah total row dari database
$total_halaman = ceil($jumlah_konten / $limit); // Hitung total halaman
$row_database = query(“SELECT * FROM database LIMIT $start, $limit”); // Ambil row yang diinginkan dari database
Setelah variabel – variabel yang dibutuhkan lengkap, kita lanjutkan dengan menampilkan halaman :
for ($i = 1; $i <= $total_halaman; $i++) // Buat list <li> berdasarkan total halaman
echo “<li><a href=’?halaman=$i’ rev=’$i’>$i</a></li>”; // beri nilai ‘halaman’
Untuk menampilkan data row lakukan seperti biasa (gw biasanya menggunakan foreach)
Setelah sisi PHP dan database selesai, saatnya peng_ajax_an dengan JQuery.
Fungsi JQuery yang dipakai adalah (tentu saja) $.ajax dengan metode POST, kenapa? Karena kita menginginkan agar pagination tetap bekerja apabila JavaScript tidak diaktifkan (oleh browser).
$.ajax({
type: ‘POST’,
data: ‘halaman=’ + $(this).attr(‘rev’),
success: function(data){
$(this).empty().append(data);
}
});
Yang harus diperhatikan adalah di opsi data,maksud disitu adalah kita mengirimkan POST bernama halaman dengan nilai yang diambil dari tag rev.
Prosesnya kira-kira seperti ini :
- JQuery mengirim POST dengan nama halaman
- PHP menerima nilai halaman lalu memprosesnya
- JQuery menampilkan proses yang dihasilkan oleh PHP kedalam objek yang ditentukan
Selesai!
Untuk lebih jelasnya download source dibawah atau lihat di github
[Download Source Pagination (zip)]