Apa Itu Tabulator?

Tabulator adalah JavaScript library untuk membuat Tabel Kompleks dengan Kode Sederhana. Tabulator memungkinkan membuat tabel interaktif dalam hitungan detik dari Tabel HTML apa saja, JavaScript Array, sumber data AJAX atau data berformat JSON. Cukup sertakan library tabulator dalam proyek website dan anda siap pergi!

Persiapan

Tambahkan Tabulator library dan style sheet:
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

Tambahkan elemen HTML untuk menampung table Tabulator HTML<div id="example-table"></div>

Tambahkan beberapa data di Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",
    columns:[
    {title:"Name", field:"name"},
    {title:"Progress", field:"progress", sorter:"number"},
    {title:"Gender", field:"gender"},
    {title:"Rating", field:"rating"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", align:"center"},
    ],
});


Ubah elemen menjadi konstruktor elemen
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
     height:205, // set height of table (in CSS or here),     data:tabledata, //assign data to table
     layout:"fitColumns", //fit columns to width of table (optional)
     columns:[ //Define Table Columns
         {title:"Name", field:"name", width:150},
         {title:"Age", field:"age", align:"left", formatter:"progress"},
         {title:"Favourite Color", field:"col"},
         {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
     ],
     rowClick:function(e, row){ //trigger an alert message when the row is clicked
         alert("Row " + row.getData().id + " Clicked!!!!");
     },
});

referensi:
http://tabulator.info/

Segera bergabung : - kursus bahasa Inggris - kursus komputer dengan: Lembaga Pendidikan Indonesia Amerika ( LPIA ); Alamat LPIA Margonda Jl. Margonda Raya, No.91C (dekat lampu merah flyover pertigaan Arief Rahman Hakim atau depan Autopart Ramanda Depok, sebelah Solite Furniture dan ATTIN TOUR); Kelurahan: Pancoran Mas; Kecamatan : Pancoran Mas; Kota: Depok; Po Box: 16431; Telepon LPIA Depok : (021) 7774443