Paging dengan maupun tanpa ajax pada dasarnya tidak jauh berbeda. Jika tanpa Ajax, link untuk ke halaman sebelumnya atau selanjutnya berisi link ke halaman yang sama dengan parameter halaman yang berbeda. Sementara jika dengan Ajax, link tersebut memanggil fungsi javascript untuk mengambil isi halaman lain, di mana proses pengambilannya dilakukan dengan Ajax.

Sebagai contoh, kita ingin menampilkan 88 data dari database, di mana setiap halaman berisi 10 record. Ini berarti nantinya kita akan punya 9 halaman. Pada halaman pertama, kita tampilkan record ke-1 sampai ke-10. Pada halaman kedua, kita tampilkan record ke-11 sampai ke-20. Begitu seterusnya sampai halaman terakhir.

Tanpa Ajax

Jika tanpa Ajax, halaman yang bertugas menampilkan record tersebut isinya kira-kira seperti ini:

<php
$halaman = (isset($_GET['halaman']) ? $_GET['halaman'] : 1);
$per_halaman = 10; // 10 adalah record per halaman
$awal = ($halaman - 1) * $per_halaman;

// dapatkan total record utk keperluan pembuatan link ke halaman selanjutnya
$hasil = mysql_query('SELECT COUNT(1) FROM tabel');
$record = mysql_fetch_array($hasil);
$total_record = $record[0];
$total_halaman = ceil($total_record / $per_halaman);

// tambahkan LIMIT X,Y di query MySQL
$sql = 'SELECT * FROM tabel LIMIT ' . $awal . ',' . $per_halaman;

// tampilkan hasil

// buat link ke halaman sebelumnya dan selanjutnya
if ($halaman > 1) {
    echo '<a href="?halaman=' . ($halaman - 1) . '">sebelumnya</a>';
}

if ($halaman < $total_halaman) {
    echo '<a href="?halaman=' . ($halaman + 1) . '">selanjutnya</a>';
}

Lihat contoh hasilnya di sini.

Perhatikan bahwa setiap kali kita mengklik link selanjutnya ataupun sebelumnya, halaman akan di-load ulang.

Dengan Ajax

Pertanyaan: Kenapa mesti dengan Ajax? Apa keuntungannya?

Read the rest of this entry »