Membuat Pagination dengan Cepat Menggunakan Bootstrap Pagination

Pagination akan digunakan saat kita memiliki web dan dihalaman tersebut memiliki banyak artikel, maka hala ini sering digunakan untuk memudahkan user/pengguna dalam membaca atau menelusuri halaman selanjutnya.
Sebagai contoh bootstrap pagination yang sederhana.

Kode HTML


<ul class="pagination">
<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="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>

Pagination dapat kita aktifkan dengan highlightyang menunjukkan halaman yang dikunjunginya. Tambahkan class .active pada elemen < li >. Contoh

Kode HTML


<ul class="pagination">
<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 class="active"><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>

Setelah menambahkan class .active agar dapat terlihat dihalaman keberapa saat itu berada. Kita juga dapat melakukan untuk menonaktifkan pagination tersebut jika dalam posisi halaman tersebut. Sebagai contoh.

kode HTML


<ul class="pagination">
<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 class="disabled"><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>

Dengan melihat hasil diatas, disini kita hanya perlu mengganti class .active dengan class .disabled dan hasilnya jadilah seperti diatas.