Simple Pagination Pada Bootstrap 4 – hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas tentang bootstrap lagi dan pada kesempatan kali ini saya akan membahas tentang pagination. Setiap aplikasi pasti akan menampilkan suatu data dan jika data sangat banyak sangat tidak mungkin untuk menampilkan semua data dalam database sekaligus karena itu akan menjadikan aplikasi menjadi berat. Oleh karena itu kita perlu memisahnya menjadi bentuk pagination. Hal ini akan menjadikan aplikasi sobat lebih ringan.
Sebelum saya contohkan cara membuat pagination pada bootstrap, tentunya kita perlu memasukkan terlebih daulu librari css dari bootsrap seperti contoh dibawah yang dimasukkan pada tag <head>
|
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> |
Untuk contoh saya menggunakan css online namun jika untuk keperluan development sobat perlu mendownloadnya terlebih dahulu atau sobat bisa dowload bersama project ini di akhir postingan. Perlu saya tegaskan di postingan kali ini hanya berisi tentang macam-macam-pagination pada bootstrap jadi bukan menampilkan data dari database menjadi pagination, jika itu yang sobat ingin lihat maka sobat bisa kunjungi artikel dibawah :
Baca juga :
Cara Membuat Pagination dengan Database MySQL pada PHP
Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP
Berikut adalah macam-macam dari pagination pada Bootstrap :
1. Simple Pagination
Pada jenis ini, pada tombol Next dan Previous munculnya berupa teks, contoh penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 |
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> |
Hasilnya :
2. Pagination dengan Icon
Kita akan mengubah Next dan Previous menjadi sebuah icon, jika sobat mau maka sobat bisa juga menggantinya dengan icon fontawesome atau lainnya namun pada contoh ini saya menggunakan icon standar, contoh penggunaannya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> |
Hasilnya :
3. Pagination dengan class Active
Dengan menggunakan class active kita bisa menamdakan bahwa kita sedang di halaman tersebut. Kita juga bisa memberikan class lawan dari active yaitu .disabled, contoh penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<nav aria-label="example"> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link">Previous</span> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> <span class="page-link"> 2 <span class="sr-only">(current)</span> </span> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> |
Hasilnya :
3. Pagination Size
Bootstrap menyediakan berbagai macam besar dari pagination. Untuk yang standar seperti contoh sebelumnya adalah default yaitu ukuran sedang. Kita juga bisa membuat dengan ukuran besar atau kecil, contohnya yaitu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<nav aria-label="example3"> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item active" aria-current="page"> <span class="page-link"> 1 <span class="sr-only">(current)</span> </span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> <nav aria-label="example4"> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item active" aria-current="page"> <span class="page-link"> 1 <span class="sr-only">(current)</span> </span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> |
Hasilnya :
4. pagination Position Center
Untuk default posisi pagination ada di sebelah kiri namun kita juga bisa membuatnya ada di tengah, caranya yaitu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> |
Hasilnya :
5. Pagination Position Right
Jika kita bisa menampilkan pagination di kiri dan di tengah tentunya kita juga bisa menampilkan di sebelah kanan, caranya yaitu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<nav aria-label="Page navigation example"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> |
Hasilnya :
Pada contoh diatas hanya membahas tentang macam-macam pagination dan cara menampilkan pagination yang ada pada bootstrap saja. Untuk menampilkan data real dari database akan kita bahas pada postingan saya yang lainnya. Sekina postingan saya tentang Simple Pagination Pada Bootstrap 4. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Kunjungi juga postingan saya lainnya untuk menambah ilmu sobat.
Artikel Tentang Bootstrap Lainnya :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Membuat Alert pada HTML menggunakan Bootstrap 4
Mengenal Bootstrap Typography pada HTML dan Bootstrap 4
Menggunakan Tooltip pada HTML dan Bootstrap 4
Membuat Nested Media Object pada Bootstrap 4
Membuat Navbar dengan Bootstrap 4 dengan Mudah
Membuat Border Menggunakan Bootstrap 4
Membuat Progress Bar dengan Bootstrap 4
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :