Tutorial Belajar Bootstrap Bagian 22 : Cara Membuat Pagination di Bootstrap

0
1505

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 21 : Cara Membuat Breadcrumb di Bootstrap, selanjutnya kita akan belajar cara membuat pagination di Bootstrap.

Penomoran halaman adalah proses pengorganisasian konten dengan membaginya menjadi halaman terpisah.

Penomoran halaman digunakan dalam beberapa atau bentuk lain cukup sering di hampir setiap aplikasi web, misalnya digunakan oleh mesin pencari untuk menampilkan hasil dalam jumlah terbatas pada halaman hasil pencarian, atau menampilkan sejumlah posting untuk setiap halaman di blog atau forum.

<nav>
        <ul class="pagination">
            <li class="page-item"><a href="#" class="page-link">Sebelumnya</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
        </ul>
    </nav>

Penomoran halaman dengan Status Disable dan Active

Tautan di dalam paginasi Bootstrap selanjutnya dapat disesuaikan untuk keadaan yang berbeda, seperti saat pengguna mendekati akhir atau awal, atau menunjukkan nomor halaman saat ini kepada pengguna. Gunakan class .disabled untuk menonaktifkan link dan .active untuk menunjukkan halaman saat ini.

    <nav>
        <ul class="pagination">
            <li class="page-item disabled"><a href="#" class="page-link" tabindex="-1">Sebelumnya</a></li>
            <li class="page-item active"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
        </ul>
    </nav>
Catatan: Class .disabled hanya menampilkan tautan karena class disabled tidak menghapus fungsionalitas klik, untuk melakukan ini Anda dapat menukar anchor active atau disable dengan span.
        <nav>
        <ul class="pagination">
            <li class="page-item disabled"><span class="page-link">Sebelumnya</span></li>
            <li class="page-item active"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
        </ul>
    </nav>

Mengubah Ukuran Penomoran Halaman

Anda juga dapat mengubah ukuran pagination untuk menambah atau mengurangi area yang dapat diklik.

Tambahkan class ukuran relatif seperti .pagination-lg, atau .pagination-sm ke class dasar .pagination untuk membuat pagination yang lebih besar atau lebih kecil.

    <!-- Large pagination -->
    <nav>
        <ul class="pagination pagination-lg">
            <li class="page-item disabled"><span class="page-link">Sebelumnya</span></li>
            <li class="page-item active"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
        </ul>
    </nav>
    <!-- Default pagination -->
    <nav>
        <ul class="pagination">
            <li class="page-item disabled"><span class="page-link">Sebelumnya</span></li>
            <li class="page-item active"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
        </ul>
    </nav>
    <!-- Small pagination -->
    <nav>
        <ul class="pagination pagination-sm">
            <li class="page-item disabled"><span class="page-link">Sebelumnya</span></li>
            <li class="page-item active"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
        </ul>
    </nav>

Penjajaran Paginasi

Secara default, penomoran halaman diratakan secara horizontal ke kiri. Untuk menyelaraskannya di tengah halaman, tambahkan class .justify-content-center ke class dasar .pagination, seperti yang ditunjukkan di bawah ini:

    <nav>
        <ul class="pagination justify-content-center">
            <li class="page-item"><a href="#" class="page-link">Sebelumnya</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
        </ul>
    </nav>

Demikian pula, Anda dapat menggunakan class .justify-content-end untuk menyelaraskan pagination ke kanan:

        <nav>
        <ul class="pagination justify-content-end">
            <li class="page-item"><a href="#" class="page-link">Sebelumnya</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
        </ul>
    </nav>

Semoga tutorial ini bisa membantu Anda untuk belajar cara membuat pagination di Bootstrap.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.