Home » Bootstrap » Cara Membuat Table Pagination Dengan Bootstrap
cara menggunakan bootstrap

Cara Membuat Table Pagination Dengan Bootstrap

 apa itu bootstrap??

Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan. (sumber : wikipedia)

apa itu pagination? 

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. (baca : cara menggunakan boostrap)

Untuk membuat table pagination memang sudah disediakan langsung oleh bootstrap. tapi menurut saya table bootstrap kurang lengkap fiturnya.  Oleh karena itu, kita akan menggunakan plugins datatables yang mana plugins ini di khususkan dalam hal membuat table.

Fitur-Fitur DataTables yaitu:

  • AutoWidth
  • DeferRender
  • Filter
  • Info
  • JQuery UI
  • LenghtChange
  • Pagination

  Selengkapnya>>

Cara Membuat Table Pagination:

Ada 2 Cara untuk melakukan installasi dataTables ini yaitu:

– Menggunakan CDN (Harus dalam keadaan connect internet)

– Lokal (Offline)

Menggunakan CDN (Content Delivery Network)

  • Masukkan Code Dibawah ini diantara <head> </head> :
  • Sekarang kita panggil Fungsi javaScript dataTables nya, dengan selector class=”table-paginate”.
  • Copy Script dibawah ini paste di antara <head> </head> atau di atas tag </body>.
Selectors bisa menggunakan id , atau class. tapi disini saya referensikan menggunakan class. karena bisa digunakan dibanyak table. jika menggunakan id hanya bisa pada satu table.

Membuat Table Dummy  

  • Copy code dibawah ini diantara tag <body> </body> jangan lupa memberi class=”table-paginate” sesuai selectors yang kita buat tadi.
  • lalu coba jalankan di browser. jika tampil seperti gambar dibawah ini, itu artinya anda telah berhasil membuat table paginate dengan bootstrap

Cara membuat table pagination

Namun, jika tampilan tidak seperti gambar diatas. Coba gunakan addon firebug pada browser anda. Addon FireBug berfungsi untuk mengetahui letak kesalah script js dan juga css melalu console.

Install Addon Firebug:

Lokal Installasi

Untuk installasi secara offline, anda perlu mendownload terlebih dahulu package datatables dari situs resminya atau klik disini.

  • Setelah didownload, ekstrak folder dataTables pada direktori projek anda.
  • lalu  copy dan paste kode dibawah ini diantara tag <head> </head>
[blockquote author=””]Jangan lupa mengubah “path-to” sesuai struktur direktori anda[/blockquote]
  • Lalu untuk table dummy nya bisa menggunakan kode diatas untuk digunakan sebagai testing.

Catatan:

pada pembuatan table pagination hanya berfungsi sebagai penampil saja. Tidak benar-benar paging seperti yang ada pada website dinamis seperti biasanya. pada website dinamis paging dilakukan tidak hanya pada front end saja tetapi pada backend juga

Demikian tutorial Cara Membuat Table Pagination Dengan Bootstrap

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

x

Check Also

cara menggunakan bootstrap

Tutorial Cara Menggunakan Bootstrap Untuk Pemula

Oke Sebelum kita melangkah ke tutorial Cara menggunakan Bootstrap Untuk Pemula ada baiknya kita simak dulu. Apa itu bootstrap? Bootstrap adalah platform baru ...