Pagination merupakan sebuah komponen website yang terdiri dari penomoran halaman website. Misal jika kita membuka sebuah website dan melihat ada beberapa postingan artikel di sana, pada bagian bawahnya biasanya terdapat penomoran halaman, penomoran halaman tersebut di sebut dengan paging atau pagination.
Pagination sendiri dibuat dengan tujuan untuk membatasi data yang tampil pada sebuah halaman website, sehingga jika ada 100 data, maka seluruh data tersebut tidak tampil sekaligus yang akan membuat data tampil dengan sangat memanjang.
Oleh sebab itu pagination bertugas untuk membatasi tampilnya data, misalnya pada halaman 1 ditampilkan data dari 1 sampai 10, kemudian dihalaman kedua ditampilkan data 11 sampai 20, begitu juga seterusnya sampai halaman-halaman berikutnya tergantung berapa jumlah data yang ada.
Bootstrap 4 sudah menyediakan class-class yang bisa kita gunakan untuk membuat pagination dengan mudah dan cepat.
Kita buat file baru dengan nama pagination.php dengan sintak seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Latihan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<h1 align="center">Pagination dengan Bootstrap 4</h1>
<h1 align="center"><a href="https://agussuratna.net" target="_blank">agussuratna.net</a></h1>
<nav>
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Sebelumnya</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">Selanjutnya</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Syntax di atas adalah contoh dari pagination yang kita buat dengan menggunakan bootstrap 4. Pertama buat class pagination dalam elemen <ul> .. </ul>. Kemudian dalam elemen <li> .. </li> nya buat class page-item, selanjutnya dibagian link penomoran halamannya atau pada elemen <a> .. </a>, buat class page-link.
Kemudian ada 2 opsi class yang bisa kita gunakan juga yaitu class disabled untuk membuat link yang tidak aktif, kemudian class active untuk membuat link aktif.
Pada contoh ini class disabled kita letakkan pada tombol sebelumnya, agar tombol ini seolah-olah tidak aktif, kemudian class active kita letakkan pada penomoran halaman 1 dan seterusnya.
Dan jika dijalankan, maka hasilnya akan seperti berikut :
Sampai di sini kita telah selesai membuat pagination dengan bootstrap 4. Kita juga bisa mengubah ukuran pagination atau mengubah posisinya.
Pengaturan Ukuran Pagination
Untuk mengubah ukuran pagination, kita tinggal menambahkan class pagination-lg untuk membuat pagination yang berukuran besar. Dan gunakan class pagination-sm untuk membuat pagination yang berukuran kecil.
Class pagination-sm atau pagination-lg bisa kita letakkan beriringan dengan class pagination.
Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>Latihan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<h1 align="center">Pagination dengan Bootstrap 4</h1>
<h1 align="center"><a href="https://agussuratna.net" target="_blank">agussuratna.net</a></h1>
Pagination sedang
<nav>
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Sebelumnya</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">Selanjutnya</a>
</li>
</ul>
</nav>
Pagination besar
<nav>
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<span class="page-link">Sebelumnya</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">Selanjutnya</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Maka hasilnya akan seperti berikut :
Pengaturan Posisi Pagination
Jika kita ingin membuat posisi pagination berada ditengah, kita bisa menambahkan class justify-content-center. Atau jika kita ingin membuat posisi pagination berada di kanan, kita bisa menambahkan class justify-content-end.
Letakkan salah satu dari class tersebut beriringan dengan class pagination yang sudah kita bahas sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Latihan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<h1 align="center">Pagination dengan Bootstrap 4</h1>
<h1 align="center"><a href="https://agussuratna.net" target="_blank">agussuratna.net</a></h1>
Pagination berada di tengah
<nav>
<ul class="pagination justify-content-center">
<li class="page-item">
<span class="page-link">Sebelumnya</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">Selanjutnya</a>
</li>
</ul>
</nav>
<br/>
<br/>
Pagination berada di kanan
<nav>
<ul class="pagination justify-content-end">
<li class="page-item">
<span class="page-link">Sebelumnya</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">Selanjutnya</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Maka haasilnya seperti berikut :
Demikian cara membuat pagination menggunakan bootstrap, semoga bermanfaat.
Referensi :
- https://getbootstrap.com/docs/4.3/components/pagination/
