Aplikasi web mengelola data dalam jumlah besar. Misalnya, aplikasi e-niaga menampilkan miliaran data dengan cara yang tertata dan menarik secara visual. Intinya, data perlu disajikan dengan cara yang mudah dipahami dan dinavigasi oleh pengguna.

Namun, merender semua data pada satu halaman dapat menyebabkan masalah kinerja, waktu pemuatan yang lebih lambat, dan pengalaman pengguna yang buruk. Untuk alasan ini, menerapkan logika pagination dapat mengatasi masalah ini secara signifikan.

Di React, Anda dapat memilih untuk menggunakan komponen bawaan yang disediakan oleh pustaka pagination, sebagai alternatif, Anda dapat membangun sistem pagination khusus menggunakan React hooks.

Menerapkan Penomoran Sisi Klien

Ada dua cara untuk mengimplementasikan paginasi dalam aplikasi: paginasi sisi klien dan sisi server. Meskipun demikian, terlepas dari format yang Anda pilih, konsep dasarnya tetap sama. Penomoran sisi klien melibatkan penanganan logika paginasi di sisi klien, di dalam browser pengguna.

Anda dapat menerapkan paginasi sisi klien menggunakan berbagai teknik. Teknik-teknik ini meliputi:

1. Penomoran berbasis halaman: Metode ini melibatkan pembagian data menjadi potongan atau halaman berukuran tetap, biasanya menampilkan sejumlah item tertentu per halaman. Pengguna dapat menavigasi halaman menggunakan tautan atau tombol navigasi, diberi label dengan nomor halaman atau tombol sebelumnya dan berikutnya. Ini adalah implementasi populer dengan mesin pencari dan aplikasi e-commerce.
2. Pengguliran tanpa batas: Metode ini melibatkan pemuatan dan rendering data baru secara dinamis saat pengguna menggulir halaman ke bawah, menciptakan pengalaman penelusuran yang mulus dan berkelanjutan. Teknik ini sangat berguna saat menangani kumpulan data besar yang terus berkembang, seperti umpan media sosial.

Menerapkan Paginasi Berbasis Halaman Menggunakan React Hooks

Untuk memulai, buat proyek React. Anda dapat menggunakan perintah JavaScript create-react-app untuk menyiapkan aplikasi React dasarlokal atau memanfaatkan Vite untuk merancah proyek React di mesin Anda.

Tutorial ini menggunakan Vite, Anda dapat menemukan kode proyek ini di sini repositori GitHub.

Setelah mengatur proyek React Anda, mari lanjutkan dengan mengimplementasikan paginasi berbasis halaman menggunakan React Hooks.

Mengonfigurasi Kumpulan Data

Idealnya, Anda biasanya mengambil dan menampilkan data dari database. Namun, untuk tutorial ini, Anda akan mengambil data dari dummy API JSONPlaceholder alih-alih.

Dalam src direktori, buat yang baru komponen/penomoran halaman file, dan tambahkan kode berikut.

1. Buat komponen fungsional React dan tentukan status berikut.

   impor Bereaksi, { useEffect, useState } dari"reaksi";
   impor"./style.component.css";
   fungsiPaginasi() {
   const [data, setData] = useState([]);
   const [HalamanArus, setHalamanArus] = useState(1);
   const [itemsPerPage, setitemsPerPage] = useState(5);
   const [pageNumberLimit, setpageNumberLimit] = useState(5);
   const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   kembali (
    <>
   
    Komponen Paginasi</h1> 
   >
   
    </>
    );
   }
   eksporbawaan Paginasi;

2. Terapkan logika untuk mengambil data dari API dummy. Di dalam Paginasi komponen, tambahkan di bawah ini.

    gunakanEfek(() => {
    mengambil(" https://jsonplaceholder.typicode.com/todos")
    .Kemudian((tanggapan) => respon.json())
    .Kemudian((json) => setData (json));
    }, []);
   const tampilanData = (data) => {
   kembali (
   
   
    {data.panjang > 0 &&
    data.peta((lakukan, indeks) => {
   kembali<likunci={indeks}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Kode di atas melayani dua tujuan utama. Pertama, setelah komponen dipasang, file useEffect kait pemicu untuk mengambil data dari titik akhir API eksternal yang kemudian dikonversi ke format JSON. Data JSON yang dihasilkan kemudian digunakan untuk memperbarui data variabel negara dengan data to-dos yang diambil. Kedua, displayData function akan mengambil data yang diambil sebagai argumen dan merender data sebagai daftar to-dos yang tidak diurutkan.
3. Di segmen kembali dari Paginasi komponen, termasuk displayData berfungsi untuk merender data yang diambil di browser. Berikut adalah versi kode yang diperbarui:

   kembali (
    <>
    Komponen Paginasi</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Dengan menyebut data tampilan (data) dalam elemen JSX dan melewati data variabel status sebagai parameter, fungsi kemudian akan merender data yang diambil sebagai daftar tidak berurutan di browser.

Dalam kasus khusus ini, daftar yang diberikan terdiri dari dua ratus to-dos. Namun, dalam skenario dunia nyata, aplikasi akan mengelola data dalam jumlah besar. Menampilkan semua data ini pada satu halaman web dapat mengakibatkan masalah kinerja, seperti waktu pemuatan yang lambat dan kinerja aplikasi yang buruk secara keseluruhan.

Untuk mengatasi hal ini, sebaiknya menggabungkan fungsionalitas paginasi untuk memastikan setiap halaman berisi item dalam jumlah terbatas yang dapat diakses pengguna secara terpisah dengan menggunakan tombol navigasi.

Pendekatan ini memungkinkan pengguna untuk menavigasi data dengan cara yang lebih mudah dikelola dan terorganisir, meningkatkan keseluruhan kinerja dan pengalaman pengguna aplikasi.

Menerapkan Logika Paginasi untuk Menampilkan Jumlah Item Per Halaman yang Terbatas

Untuk menentukan item agenda mana yang akan dirender di setiap halaman, kita perlu mengimplementasikan logika yang diperlukan. Namun, sebelum melanjutkan, penting untuk menentukan jumlah halaman yang diperlukan berdasarkan item tugas yang tersedia.

Untuk mencapai ini, Anda dapat menambahkan kode berikut ke file Paginasi komponen:

const halaman = [];
untuk (membiarkan saya = 1; saya <= Matematika.ceil (data.panjang / itemPerPage); saya++) {
 halaman.push (i);
 }

Cuplikan kode di atas, diulang melalui data array, menghitung jumlah halaman yang dibutuhkan dengan membagi panjang data array dengan jumlah item per halaman yang diinginkan—jumlah awal item per halaman diatur ke lima di item per halaman negara.

Meskipun demikian, Anda dapat memperbarui nomor ini sesuai kebutuhan untuk menguji logikanya. Terakhir, setiap nomor halaman kemudian ditambahkan ke halaman Himpunan. Sekarang, mari terapkan logika untuk menampilkan sejumlah item per halaman.

const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemPerPage;
const pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Kode ini menentukan to-dos untuk merender pada halaman browser berdasarkan halaman saat ini Dan item per halaman variabel—itu mengekstrak indeks yang sesuai untuk set to-dos dari larik data menggunakan metode slice. Indeks kemudian digunakan untuk mengambil to-dos tertentu milik halaman yang diinginkan.

Sekarang, untuk menampilkan to-dos, perbarui displayData berfungsi dengan melewati pageItems sebagai parameter. Berikut adalah versi kode yang diperbarui:

kembali (
 <>
 Komponen Paginasi</h1> 
>
 {displayData (pageItems)}
 </>
);

Dengan melakukan pembaruan ini, the displayData fungsi akan membuat sejumlah item tugas yang harus dilakukan dengan tepat, yang mencerminkan halaman saat ini.

Memperlancar Akses Halaman dan Navigasi Dengan Tombol Navigasi

Untuk memastikan pengguna dengan mudah menavigasi dan mengakses konten di halaman yang berbeda, Anda perlu menambahkan tombol sebelumnya dan berikutnya, serta tombol yang menentukan nomor halaman tertentu.

Pertama, mari terapkan logika untuk tombol nomor halaman. Dalam Paginasi komponen, tambahkan kode di bawah ini.

const handleClick = (peristiwa) => {
 set halaman saat ini(Nomor(event.target.id));
 };
const renderPageNumber = halaman.peta((nomor) => {
jika (angka < maxPageNumberLimit +1 && nomor > minPageNumberLimit) {
kembali (
 kunci={angka}
 id={angka}
 onClick={handleClick}
 className={currentPage == nomor? "aktif": batal}
 >
 {nomor}
 </li>
 );
 } kalau tidak {
kembalibatal;
 }
 });

Itu handleClick fungsi memicu ketika pengguna mengklik tombol nomor halaman. Tindakan ini kemudian memperbarui halaman saat ini variabel negara dengan nomor halaman yang dipilih.

Itu renderPageNumber variabel menggunakan peta metode untuk iterate selama halaman array dan secara dinamis menghasilkan item daftar yang mewakili setiap nomor halaman. Ini menerapkan logika bersyarat untuk menentukan nomor halaman mana yang akan dirender berdasarkan batas nomor halaman maksimum dan minimum yang ditentukan.

Terakhir, tambahkan kode untuk tombol selanjutnya dan sebelumnya.

const handleNextbtn = () => {
 setcurrentPage (Halamansaat ini + 1);
jika (Halaman saat ini + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
const handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
jika ((halaman saat ini - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Untuk merender tombol navigasi, perbarui elemen JSX sebagai berikut:

kembali (
 <>
 Komponen Paginasi</h1> 
>
 {displayData (pageItems)}
"nomor halaman">




 onClick={handlePrevbtn}
 dinonaktifkan={Halaman saat ini == halaman[0]? BENAR: PALSU}
 > Sebelumnya
 </button>
 </li>

 {renderPageNumber}


 onClick={handleNextbtn}
 dinonaktifkan={currentPage == halaman[halaman.panjang - 1]? BENAR: PALSU}
 > Selanjutnya
 </button>
 </li>
 </ul>
 </>
 );

Setelah komponen dirender, itu akan menampilkan nomor halaman, tombol sebelumnya dan berikutnya, dan item data yang sesuai untuk halaman saat ini.

Memilih Antara Pustaka Paginasi dan Sistem Paginasi Kustom

Saat harus memutuskan antara menggunakan perpustakaan pagination atau membangun sistem pagination khusus, pilihannya bergantung pada berbagai faktor. Pustaka pagination, seperti react-paginate, menyediakan komponen dan fungsionalitas bawaan, memungkinkan implementasi yang cepat dan mudah.

Di sisi lain, membangun sistem pagination khusus menggunakan React hooks menawarkan lebih banyak fleksibilitas dan kontrol atas logika pagination dan antarmuka pengguna. Keputusan pada akhirnya akan bergantung pada kebutuhan dan preferensi spesifik Anda.