Nanank Haris S
ADHD sufferers

Jquery Plugin BootstrapTable

Jika kamu adalah seorang web developer, mungkin tidak ada salahnya mencoba Bootstrap Table . Bootstrap Table merupakan salah satu plugin dari Jquery yang mana plugin ini digunakan unutk membuat grid data table . Kalau kamu pernah pakai Datatable untuk generate grid kamu, maka Bootstrap table memiliki kemiripan yang sama.

Saya tidak pernah pakai Datatable, disamping menurut saya ribet juga males buat mempelajarinya, plus tampilan defaultnya yang saya sendiri nggak suka (pendapat pribadi saya aja). Sampai akhirnya saya menemukan plugin ini. Disamping ringan, plugin ini juga memiliki dokumentasi yang menurut saya sangat lengkap. Begitu juga dengan contoh penggunaanya. Basic plugin ini adalah Bootstrap jadi apabila aplikasi kamu pake Bootstrap, maka gak perlu susah-susah menyesuaiakn style css-nya.

Cara instalasinya pun cukup mudah tinggal load ada via tag javscript dan css-nya.

<link rel="stylesheet" type="text/css" href="assets/js/bootstrap-table/bootstrap-table.css">
<script type="text/javascript" src="assets/js/bootstrap-table/bootstrap-table.js">

Kemudian inisialisasinya bisa dengan menambhakan tag data-toogle pada tag table atau inisialisasi biasa dengan javascript.

<table width="100%" id="myTable" data-toggle="table">
<thead>
<tr>
<th data-field="ID">ID</th>
<th data-field="NAMA">NAMA</th>
<th data-field="ALAMAT">ALAMAT</th>
</tr>
</thead>
</table>

atau via javascript

$(document).ready(function(){
$('#myTable').bootstrapTable();
});

Salah satu kelebihan dari Bootstrap table ini adalah kita bisa memanggil atribut maupun methods melalui tag di table. Seperti contohnya adalah ketika kita mau meng-enable paginasi, maka cukup menambahkan tag data-pagination=”true” pada tag table

<table width="100%" id="myTable" data-toggle="table" data-pagination="true>

Ketika mau merubah format atau style pada kolom table kita cukup membuat fungsi javascript kemudian kita panggil dengan menyisipkan tag data-formatter pada tag “th” di table

<th data-field="ALAMAT" data-formatter="formatKolomAlamat">ALAMAT</th>

Kemudian fungsi javascriptnya kurang lebih

function formatKolomAlamat(value,row,index){
return "ALamat : " + value;
}

Masih ada banyak method maupun event yang disematkan dalam plugin Bootstrap tabel, kamu bisa mengexplorenya disini.

Selamat Koding.

Share

You may also like...

Leave a Reply

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