Tuesday, 19 July 2016

Menampilkan Table dengan Library Datatables di Page HTML

Datatables adalah sebuah library JQuery javascript yang memungkinkan untuk memperindah table yang kita buat. Tidak perlu lagi report- repot untuk menggunakan banyak CSS.

PRIVIEW


Berikut ini adalah tampilan perbandingan table sebelum dan sesudah menggunakan DataTables

Sebelum menggunakan datatables

Setelah menggunakan datatables

ATURAN PEMAKAIAN


Aturan yang dimaksud disini bukanlah aturan yang mengandung pasal-pasal ataupun yang tertulis laiinya, melainkan agar datatable mau tampil di webpage kita, harus mengikuti beberapa cara berikut :

1. Download File Library

Pertama download librarynya di sini. Kalian juga bisa baca-baca dokumentasinya disana biar lebih jelas. Karna disini saya hanya menjelaskan secara singkat dan langsung prakteknya. Setelah kalian berhasil download librarynya, tempatkan dalam satu project dengan project kalian.

2. Penulisan Table di HTML (Wajib)

Agar DataTable mau tampil dengan baik, kalian membuat table tagline nya harus seperti berikut ini :

Untuk header gunakan tag

<thead>
<tr>
<th></th>
</tr> 
</thead>

Untuk body gunakan tag

<tbody>
<tr>
<td></td>
</tr>
</tbody>

Dan untuk footer gunakan tag

<tfoot>
<tr>
<th></th>
</tr>
</tfoot>.

 

IMPLEMENTASI


Agar lebih jelas, mari kita mulai pembuatan project satu persatu. Seperti yang sudah saya katakan tadi, tempatkan library DataTable di dalam project kalian.

Kemudian buat file HTML baru beri nama index.html, lalu ketikan kode dibawah ini :

PENJELASAN


Perhatikan beberapa hal berikut ini :

Kode diatas adalah barisan javascript yang digunakan untuk memanggil datatable, lalu bagaimana meimportnya ke table kita?

Begini, perhatikan baris ini  $('#datatable').dataTable(); (#)datatable adalah ID nya si table yang kita buat (coba perhatikan lagi tablenya pasti ada id="datatable")

ID tersebut sebagai identitas/alamat yang akan di tuju oleh datatable, sehingga table bisa berubah menjadi lebih indah. Intinya begini, id ditable adalah A maka kalian harus tangkap id A tersebut di datatable menjadi #A.

Silakan clone projectnya di GITHUB

Please post a polite comment and do not post a spam
EmoticonEmoticon