Pagination di Bootstrap 4

Kali ini kita akan belajar bagaimana merancang Pagination di bootstrap 4. Pagination yaitu suatu cara bagi dapat menampilkan data yang banyak ke pada beberapa halaman blog. Pagination betul-betul urgen bagi sebuah halaman karena kalau kamu menampilkan banyak data sekaligus pada satu halaman, karenanya hal itu akan memperlambat proses pengambilan data dari database dan menyebabkan loading menjadi lambat.

<nav aria-label=Page navigation example>
  <ul class=pagination>
    <li class=page-item><a class=page-link href=#>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>

dengan menggunakan icon

<nav aria-label=Page navigation example>
  <ul class=pagination>
    <li class=page-item>
      <a class=page-link href=# aria-label=Previous>
        <span aria-hidden=true>«</span>
        <span class=sr-only>Previous</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 aria-hidden=true>»</span>
        <span class=sr-only>Next</span>
      </a>
    </li>
  </ul>
</nav>

Pagination Disable dan Active, nah ketika kita di ujung halaman terakhir ata di halaman pertama-tama karenanya pagination akan disable begitupun sebbaliknya, pemakaian kelas nya seperti di bawah ini.

<nav aria-label=...>
  <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>
</nav>

Merubah ukuran pagination di bootstrap 4, cara nya gampang sekali, masukan kelas .pagination-lg atau .pagination-sm  setelah class .pagination

bagi ukuran besar pasang kelas .pagination-lg dan bagi ukuran small pasang kelas .pagination-sm

<nav aria-label=...>
  <ul class=pagination pagination-lg>
    <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>

<nav aria-label=...>
  <ul class=pagination pagination-sm>
    <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>

bagi posisi kita dapat gunakan class flexbox utilities . di class bootstrap, di sini saya contohkan pagination dengan posisi di tengah atau center.

<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>

ok sekianlah panduan Pagination di bootstrap 4. semoga bermanfaat 😀

Sumber https://kursuswebsite.org