Tutorial kali ini kita akan Membuat Paging atau Pagination di Bootstrap, Dengan menggunakan bootstrap kita akan lebih mudah dalam melakukan modifikasi tampilan website, bootstrap sangat menjadi pilihan para web designer untuk melakukan oleh design.. Karena fitur yang lengkap dan kemudahan yang ditawarkan.

Nah.. dikesempatan ini kita akan Membuat Pagination dan Pager di Bootstrap.

bootstrap/
|--css/
|   ---bootstrap.min.css
|   ---bootstrap-theme.min.css
|---js/
|   |---jquery.min.js
|   |---bootstrap.min.js

Disini kita bisa langsung menggunakan nya : syaratnya harus online (jika tidak mw online silahkan copy paste alamatnya dan simpan sesuai dengan nama2 diatas). 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

File diatas harus ada, karena merupakan file master dari bootstrap yang akan digunakan pada setiap kita membuat project dengan bootstrap .

Simple Pagination

Untuk membuat pagination di bootstrap kita membutuhkan class .pagination yang kita pasang pada element / tag  <ul> di HTML.

    <h3>Simple Pagination</h3>    
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <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="#">&raquo;</a></li>
    </ul>

Active & Disabled Pagination

Kita dapat memodifikasi pagination link dengan menggunakan class .active dan .disabled . Yang digunkan untuk menandai khusus pada nomor halaman aktif dan nomor halaman yang sedang kita gunakan pada class disabled

    <h3>Active and Disabled State</h3>
    <ul class="pagination">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><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="#">&raquo;</a></li>
    </ul>

Sizes Pagination (Ukuran Pagination)

Untuk mengubah atau mengatur ukuran paging atau pagination di bootstrap sangatlah mudah, kita hanya tinggal menambahkan class (pagination-lg) , Untuk ukuran besar dan (pagination-sm)  untuk ukuran kecil paging. Berikut ini contoh ukuran paginationnya :

<h3>Pagination Sizing (Large)</h3>
    <ul class="pagination pagination-lg">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><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="#">&raquo;</a></li>
    </ul>
    <hr>
    <h3>Pagination Sizing (Default)</h3>
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><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="#">&raquo;</a></li>
    </ul>
    <hr>
    <h3>Pagination Sizing (Small)</h3>
    <ul class="pagination pagination-sm">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><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="#">&raquo;</a></li>
    </ul>

Pada kode diatas kita dapat mengatur ukuran pagination style nya , dari kecil, sedang dan besar (small, medium, large).. anda dapat memperhatikan pada tag yang mempunyai background kuning diatas.

Bootstrap Pager

Pager Merupakan salah satu komponen bootstrap yang dapat kita gunakan dengan mudah untuk membuat Next & Previous Links. Untuk menggunakan pager di bootstrap kita bisa menggunakan class .pager  yang dipasang pata tag <ul> di HTML.

    <h3>Default Pager</h3>
    <nav>
        <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </nav>

Pager Alignment

Untuk mengatur perataan Kiri dan Kanan pada komponen pager kita bisa menggunakan .previous dan .next classes

    <h3>Aligned Pager links</h3>
    <nav>
      <ul class="pager">
        <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
      </ul>
    </nav>

Pager States

Gunakan .active and .disabled classes untuk menampilkan pager links active dan disabled.

    <h3>Disabled Pager links</h3>
    <nav>
      <ul class="pager">
        <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
      </ul>
    </nav>    

Demo Download