Cara Menggunakan Pagination Bootstrap

Komponen paging bootstrap boleh memancarkan set data yang panjang, yang membolehkan pengguna melayari halaman dengan mudah. Cara Menggunakan: 1. Buat senarai paging; 2. Tambah item paging dan sertakan pautan; 3. Tentukan nombor halaman; 4. Tandakan item aktif; 5. Gunakan pengendali acara paging. Kod Contoh: html

<li> 1 <li>

Cara Menggunakan Pagination Bootstrap

Komponen paging bootstrap menyediakan kaedah untuk menuding dataset besar. Ia menyediakan cara yang mudah dan elegan untuk memproses senarai data yang panjang sambil membolehkan pengguna melayari halaman dengan mudah.

Cara Menggunakan:

Untuk menggunakan paging bootstrap, ikuti langkah -langkah ini:

<li> Buat senarai paging: Buat senarai yang tidak teratur menggunakan elemen <ul></ul> . <li> Tambah item paging: Tambah elemen <li> ke senarai <ul></ul> untuk mewakili setiap item paging. <li> Tambah pautan paging: Tambah elemen <a></a> ke elemen <li> , yang mengandungi pautan paging. <li> Tentukan Nombor Halaman: Gunakan atribut data-page dalam elemen <a></a> untuk menentukan nombor halaman. <li> Tandakan item aktif sebagai status aktif: Gunakan kelas active untuk menandakan item halaman aktif semasa. <li> Gunakan Pengendali Acara Pagination: Tambah pengendali acara click dan mengendalikan peristiwa apabila pengguna mengklik item penomboran.

Contoh:

 <code class="html"><ul class="pagination"> <li class="page-item"><a class="page-link" data-page="1">1</a></li> <li class="page-item"><a class="page-link" data-page="2">2</a></li> <li class="page-item"><a class="page-link" data-page="3">3</a></li> <li class="page-item active"><a class="page-link" data-page="4">4</a></li> <li class="page-item"><a class="page-link" data-page="5">5</a></li> </ul></code>

Pengendali Acara Pagination:

Untuk mengendalikan acara paging, gunakan kod JavaScript berikut:

 <code class="javascript">$(".pagination").on("click", ".page-link", function(e) { e.preventDefault(); var page = $(this).data("page"); // 在这里处理分页逻辑});</code>

Pilihan lain:

Komponen paging bootstrap juga menyediakan pilihan lain, seperti:

<li> Item kurang upaya (kelas disabled ) <li> Menarik dan menyelaraskan ( justify-content-* kelas) <li> Tema Gaya ( pagination-* kelas)

Atas ialah kandungan terperinci Cara Menggunakan Pagination Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!