Pada Pembahasan kali ini kita akan membahas mengenai Pagination atau penomoran halaman . Pagination banyak digunakan pada website yang memiliki page atau halaman yang banyak seperti website penyedia informasi (pernah lihat portal berita yang untuk melihat berita selanjutnya kita harus menklik nomor 1/2/3 dibawah halaman ? itulah pagination), website penjualan (untuk melihat barang selanjutnya), dan banyak lagi.
Penggunaan pagination merupakan hal umum dalam website, Pagination dapat menegaskan bahwa halaman pada website kita ada banyak dan membatasi data yang tampil pada webuah website. Sehingga ketika ada banyak data tidak langsung ditampilkan sekaligus karena akan membuat tampilan website memanjang dan membosankan.
Pada bootstrap khususnya bootstrap versi 4 (yang saya gunakan untuk contoh) telah menyediakan class-class yang diperuntukan untuk membuat pagination pada website menjadi lebih cepat dan mudah. Langsung saja kita mulai.
Section Artikel
Basic Pagination
Untuk membuat basic pagination kita hanya memasukkan class .pagination kedalam element <ul>, dan kemudian pada setiap element <li> ditambahkan class .page-item . jika item dalam dari pagination berupa link ke halaman website lain maka class yang dipakai didalam element <a> (untuk membuat link) adalah .page-link.
contohnya:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Sebelumnya</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="#">Selanjutnya</a></li> </ul> </div> </body> </html>
Pagination dengan ikon
Kita juga bisa menggunakan ikon untuk penanda halaman sebelumnya atau selanjutnya agar tampilan lebih minimalis, cara nya dengan memasukkan entitas HTML (seperti « atau ») pada element <span>. atau lebih jelasnya lihat contoh dibawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span>«</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>»</span>
</a>
</li>
</ul>
</div>
</body>
</html>Status Disable dan Active
Pagination pada bootstrap dapat disesuaikan dalam berbagai macam keadaan. Teman – teman dapat menggunakan Class .disabled untuk item pagination yang ingin dinonaktifkan atau tidak dapat diklik. Sedangkan itu gunakan class .active untuk item pagination yang merujuk pada halaman saat ini user berada.
contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></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>
</div>
</body>
</html>Sizing
Pagination pada Bootstrap dapat diatur ukurannya yaitu dengan menggunakan class .pagination-lg untuk membuat pagination menjadi ukuran yang besar dan class .pagination-sm untuk membuat pagination dengan ukuran kecil. Lebih jelasnya silahkan lihat pada contoh dibawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination dengan class .pagination-lg </h2>
<nav aria-label="...">
<ul class="pagination pagination-lg"> <!--besar -->
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</ul>
</nav>
</div>
<div class="container">
<h2>Pagination dengan class .pagination-sm </h2>
<nav aria-label="...">
<ul class="pagination pagination-sm"> <!-- kecil -->
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</ul>
</nav>
</div>
</body>
</html>Perataan Pagination
Selain hal – hal diatas, Pagination pada bootstrap 4 dapat kita atur letak posisi nya dengan class utilitas dari flexbox. Contoh nya ketika menambahkan class .justify-content-center maka posisi dari pagination akan berubah menjadi di posisi tengah tampilan web. Ketika memakai class tambahan .justify-content-end akan menyebabkan pagination berada pada posisi kanan tampilan website. Tetapi secara default perataan pagination pada bootstrap adalah rata kiri.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination dengan class .justify-content-center </h2>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</div>
<div class="container">
<h2>Pagination dengan class .justify-content-end </h2>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</div>
<div class="container">
<h2>Pagination dengan tampilan default </h2>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</div>
</body>
</html>Sekian penjelasan mengenai pagination pada bootstrap semoga bermanfaat dan dapat teman tean kembangkan dengan menambahkan nya pada website yang sedang teman buat. terima kasih.
