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.

Preview

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 :

(Visited 28 times, 1 visits today)



Baca juga :


About The Author

Related Posts

Add Comment

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini