Belajar Bootstrap Part 8 Pagination

Belajar Bootstrap Part 8 Pagination

Assalamualaikum Wr. Wb.

Hai sobat, bertemu lagi dengan saya. Pada kesempatan kali ini saya akan memberikan materi tentang pagination pada Bootstrap. Langsung saja berikut ini.

PENGERTIAN

Pagination adalah proses membagi dokumen ke dalam diskrit halaman , baik halaman elektronik atau halaman yang dicetak.lalu kapan kira-kira kita harus menggunakan paging/pagination pada sebuah halaman ?? yaitu saat kita berhadapan dengan jumlah data yang sangat banyak dan tidak memungkinkan kita menampilkan keseluruhan data dalam satu halaman, karena akan memakan kapasitas yang besar. Contohnya adalah Google , dimana di setiap hasil pencarian mereka membuat sebuah paging karena hasil data pencariannya terlalu banyak. Tapi yang akan kita buat ini adalah pagination dalam bentuk tabel dengan memanfaatkan frameworks bootstrap dan plugin datatable. tapi sebelum kita memulai membuat pagination dengan bootstrap pastikan kalian sudah melakukan installasi bootstrap dengan benar

LATAR BELAKANG

Ingin mempelajari tentang membuat sebuah pagination atau biasa disebut dengan menu berikutnya dengan menggunakan framework Bootstrap.

MAKSUD & TUJUAN

Memudahkan dalam menambahkan menu pagination dengan bootstrap.

ALAT & BAHAN

Bootstrap
LAPTOP/PC
Text Editor
Browser

PEMBAHASAN

Default Pagination

Untuk membuat paging didalam bootstrap kalian bisa buat tag <ul>, kemudian didalm tag <ul> tersebut kalian bisa tambahkan atribut class pagination. Berikut adalah Contoh Penggunaannya :

States

Untuk membuat pagination active atau disable kalian bisa menambahkan class active dan class disable pada tag <li> nya. Berikut adalah contoh penggunaannya :

Size

Pagination didalam Bootstrap ini juga memilik size, yaitu pagination-lg, dan pagination-sm, Jika kalian ingin menggunakan pagination yang memiliki size besar atau large kalian bisa tambahakan class pagination-lg pada tag <ul> dan sebaliknya, Berikut adalah contoh penggunannya :

Pager

Untuk membuat pagination pager kalian bisa tambahkan atribut class pager pada tag <ul>. Pagination pager ini tampilannya memiliki efek rounded. Berikut adalah contohnya :