Pagination Bernomor

Kenapa Pagination?

Saat data mencapai ratusan item, menampilkannya sekaligus membuat halaman berat dan sulit dinavigasi. Pagination memecah data menjadi halaman-halaman kecil dengan nomor yang bisa diklik, pola klasik yang dipakai Google dan semua toko online.

Langkah Membangun

HTML: Daftar item (<div id="daftar">) dan bar navigasi halaman: tombol prev, nomor-nomor halaman, tombol next.

CSS: Tombol halaman berbentuk kotak dengan nomor. Halaman aktif berwarna ungu. Tombol prev/next nonaktif (disabled) di ujung.

JS: Konsep intinya adalah "mengiris" array:

1. State: halamanAktif dan perHalaman (misal 6).
2. Total halaman = Math.ceil(data.length / perHalaman).
3. Data tampil = data.slice((halamanAktif-1)*perHalaman, halamanAktif*perHalaman).
4. Render nomor halaman dinamis. Untuk banyak halaman, tampilkan pola "1 ... 4 5 6 ... 20" agar tidak ratusan tombol.

slice mengambil potongan array tanpa mengubah aslinya, sempurna untuk pagination.

Pagination vs Infinite Scroll

Pagination cocok saat pengguna perlu kembali ke posisi tertentu atau membagikan link halaman. Infinite scroll cocok untuk feed hiburan. Pilih sesuai kebutuhan, bukan tren.

Kesalahan Umum

• Halaman aktif tidak di-reset saat data berubah (misal setelah filter) sehingga tampil kosong.
• Nomor halaman dihitung dari 0 di tampilan (pengguna mengharapkan mulai dari 1).
• Tidak menonaktifkan tombol prev/next di ujung sehingga bisa ke halaman 0.