Pada postingan PHP sebelumnya kita pernah membuat sistem paginasi (selanjutnya / sebelumnya), tampilan paginasi seharusnya memiliki daftar angka yang mewakili sebuah halaman. Pada post kali ini kita akan membahas tampilan paginasi / pagination yang tersedia di Bootstrap. Ada 4 hal yang dapat dimanfaatkan ketika membuat paginasi menggunakan Bootstrap.
Basic Pagination
Ini merupakan paginasi dasar dari Bootstrap, sebelum membahas yang lain, setidaknya kita harus mengetahui basinya terlebih dahulu. Ini adalah tampilan basic pagination:
Pada dasarnya paginasi adalah deretan angka yang dimaksudkan untuk berpindah dari halaman satu ke halaman lainnya dengan lebih mudah, ini biasanya ditemukan pada halaman hasil pencarian, halaman feed seperti kategori, tag, dll. Untuk membuat basic paginasi Bootstrap cukup terapkan kode berikut:
Baca Juga:
<h2>Paginasi Bootstrap - Posciety</h2> <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> </ul>
Berikan link ke halaman-halaman yang mewakili angka tersebut, misalnya ke halaman 2, halaman 3, halaman 4, dst.
Ukuran Paginasi
Pada umumnya paginasi ditampilkan dalam ukuran sederhana atau kecil, tapi tidak sedikit juga situs web yang menampilkan dalam ukuran besar. Ini tergantung selera dan desain masing-masing situs.
Seperti yang pernah dibahas pada postingan Bootstrap sebelumnya, Bootstrap memiliki ukuran besar (lg), sedang (md), kecil (sm), dan super kecil (xs). Ini bisa kamu manfaatkan juga dalam pembuatan paginasi. Contoh:
<h2>Ukuran Pagination Bootstrap - Posciety</h2>
<p>lg</p>
<ul class="pagination pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<p>sm</p>
<ul class="pagination pagination-sm">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Pada kodingan di atas terlihat ukuran lg dan sm, artinya paginasi yang atas memiliki ukuran besar sedangkan paginasi yang bawah memiliki ukuran yang kecil. Maka hasilnya akan terlihat seperti ini:
Gambar ini menampilkan hasil dari ukuran lg dan sm, sedangkan gambar pertama di atas itu menampilkan ukuran default pagination.
Pagination States
Bootstrap memiliki status aktif, tidak aktif, dilarang, dsb, sama seperti ketika membuat tombol dan elemen lainnya. Ketika membuat Paginationpun kamu dapat menerapkan state ke dalamnya, misalnya menandakan nomor 2 sebagai aktif dan biasanya diberikan warna yang berbeda. Contoh:
Agar terlihat lebih menarik dan tidak membingungkan para pengunjung, sebuah situs web tentu harus dirancang sedemikian rupa termasuk tampilan paginasi. Biasanya, ketika pengunjung sedang membuka halaman ke 3 maka angka 3 di paginasi akan terlihat berbeda warna yang menandakan bahwa ia sedang aktif. Untuk membuat status aktif seperti pada gambar di atas, cukup gunakan class active seperti ini:
<h2>Pagination States - Posciety</h2> <ul class="pagination"> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>
Gunakan class active pada nomor 2 jika ingin menandakan angka 2 sebagai sedang aktif, terapkan di nomor lainnya jika ingin mengganti halaman nomor berapa yang sedang aktif.
Disabled Pagination
Pada beberapa kasus, menonaktifkan tombol paginasi adalah penting. Misalnya dari sekian angka paginasi yang ada, kamu ingin mematikan angka nomor 4 sehingga tidak dapat di klik, cukup gunakan class disabled di dalamnya. Contoh:
<h2>Disable Pagination Bootstrap - Posciety</h2> <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li> </ul>
Jika strukutr kodenya seperti ini, artinya angka 4 pada paginasi tidak dapat di klik dan biasanya warna angkanya juga berbeda dari angka-angka lainnya.
Gambar ini menunjukkan hasil dari kodingan di atas, mungkin tidak akan terlihat apakah angka 4 ini bisa di klik atau tidak karena ini hanya berupa gambar. Salin kode dan terapkan di situs Bootstrapmu, lihat hasilnya !
Pagination menjadi solusi terbaik ketika situs web / blog memiliki banyak postingan, kurang bagus jika menampilkan ribuan posts dalam satu halaman, ini akan memberatkan dan proses loading menjadi lebih lama.