Pagination merupakan hal yang penting dalam sebuah website, tujuannya untuk membagi sebuah halaman atau category dalam sebuah web. Pagination sangat membantu kita dalam membagi sebuah halaman, banyang jika Anda mempunyai halam artikel dengan jumlah ribuan dan harus menggunkan scroll tanpa bantuan pagination maka itu akan sangat menyulitkan pembaca artikel Anda. 

Dalam tutorial ini, saya akan membuat contoh pagination sederhana menggunakan jQuery AJAX dan PHP. Saya akan membaginya menjadi empat bagian, silahkan Anda simak berikut ini;

Langkah-langkah untuk mengimplementasikan pagination jQuery AJAX,

  1. Mengirim permintaan halaman melalui AJAX.
  2. Menghitung batas kueri untuk mengambil data.
  3. membuat links pagination.
  4. Menampilkan links  pagination.

Mengirim Permintaan Halaman melalui AJAX

Dalam script di bawah ini, saya mengirim permintaan awal untuk halaman getresult.php. Halaman ini akan melakukan semua fungsi sisi server dan menanggapi permintaan pagination. AJAX handlers memasukkan data respons ini ke dalam selectors target.

Menghitung batas kueri untuk mengambil data

Dalam setiap menampilkan semua data dari server membutuhkan banyak waktu maka dari itu kita membutuhkan queri limit, pagination  sangat membantu kita dalam menampilakn data dengan cepat. Di sini kita harus menghitung batas awal dan akhir berdasarkan permintaan halaman. lihat script berikut,

membuat links pagination

Untuk membuat jumlah total links halaman, kita harus melewati jumlah hasil database yang sudah kita tampilkan sebelumnya. lihat caranya di bawah ini;

Fungsi perpage akan membuat semua links pagination dan menerapkan style berdasarkan status halaman apakah itu aktif atau tidak aktif.

Menampilkan links  pagination

Setelah script PHP di atas berhasil kita buat maka script PHP akan menghasilkan output dari database dalam bentuk HTML, kemudian akan membentuk links pagination untuk pindah halaman selanjutnya atau sebelumnya.

Data yang dicetak di atas akan dibaca sebagai respons AJAX dan dimasukkan ke selector target.

Di bawah ini hasil dari script kita di atas tadi,

Cara Membuat jQuery Ajax Pagination