[Plugins][3] Membuat Tabel dengan Datatables

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Monday, 03 Jun 2019

Hello world,

Dalam membuat website atau aplikasi lainnya kita sering menemui dan membuat tabel sebagai interface untuk menampilkan data. Semakin lama bentuk dan fitur dalam tabel yang semakin banyak akhirnya dibutuhkan-lah plugin-plugin tertentu yang mampu mempermudah developer untuk membuat website. Salah satunya yang kita bahas kali ini adalah adanya plugin Jquery yang bernama DataTables. DataTables adalah plugin Jquery yang mampu memberikan fitur canggih dalam sebuah tabel. Fitur-fitur tersebut diantaranya :

  1. Pagination
  2. Instan Search
  3. Multi-column Ordering
  4. Use Almost Any Data Source
  5. Easy Theme-able
  6. Mobile Friendly
  7. Free open source software


Tahap Instalasi

Langkah pertama yang harus dilakukan adalah menambahkan beberapa file sebagai berikut:

1. Jquery.min.js

https://code.jquery.com/jquery-3.3.1.js

2. Jquery.dataTables.min.js

https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

3. Jquery.dataTables.min.css

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css


Inisiasi Jquery


Dengan inisiasi di atas maka setiap tabel yang memiliki id #example akan berubah menjadi datatables.

Membuat Tabel

Setelah tahap instalasi selesai kita sudah dapat memulai untuk membuat tabel. Sebagai contoh di bawah ini saya buat sebuah tabel sederhana.



Selamat mencoba :)