Jquery Datatables
Assalamualaikum wr.wb
Pagi kawan, pada hari ini saya akan sharing tentang Pengertian dan kegunaan Jquery Datatables
A. Pengertian
JQuery adalah sebuah library framework javascript. jadi singkat
ceritanya JQuery merupakan pengembangan dari javascript yang sengaja di
buat untuk memudahkan kita untuk mendevelop sebuah website dan ingin
membuat efek-efek dan keperluan penggunaan javascript lainnya di dalam
pengembangan sebuah website. sampai saat ini jQuery sudah sangat di
kenal di dunia web programming. sehingga banyak plugin-plugin web
lainnya yang di bangun menggunakan JQuery sebagai base nya. contohnya
seperti plugin calender, grafik, export html to image, design komponen
web dan sebagainya.
B. Latar Belakang
Hampir semua developer dunia sekarang sudah aktif menggunakan jquery
sebagai pengganti javascript. artinya developer tidak perlu lagi
mengetikkan syntax javascript yang terbilang cukup panjang-panjang untuk
sebuah event. oleh karena itu banyak yang sudah aktif menggunakan
jquery karena jquery juga merupakan pengembangan dari javascript.
javascript sudah di bungkus menjadi fungsi-fungsi yang tinggal di
gunakan saja pada jquery. untuk menggunakan jquery yang harus di lakukan
adalah menghubungkan file jquery dengan file html atau php yang ingin
kita hubungkan. caranya sama dengan cara menghubungkan file js seperti
biasa.
C. Maksud dan Tujuan
Data Table ini akan membantu kita dalam hal pembuatan paging,searching, sortir data untuk ditampilkan dalam halaman sebuah website.
D. Alat dan Bahan
- Komputer / Laptop
- Text Editor
- Jquery Datatables
E. Materi
1. Anda perlu mendownload datatables, bootstrap, dan jquery.
Anda bisa mendownload file-file tersebut di akhir artikel ini.
2. buat html sederhana yang didalamnya kita buat table, seperti berikut :
2. buat html sederhana yang didalamnya kita buat table, seperti berikut :
<html><head><title>Table dengan Datatables</title></head><body><table><thead><tr><th>No</th><th>Nama</th><th>Alamat</th><th>No.Telpon</th><th>Email</th></tr></thead><tbody><tr><td>1</td><td>Adi</td><td>Jl. Kesemek No. 12</td><td>54104258</td><td>adi@lala.com</td></tr><tr><td>2</td><td>Budi</td><td>Jl. Mangga No. 57</td><td>5262362</td><td>Budi@hehe.com</td></tr><tr><td>3</td><td>Rina</td><td>Jakarta Selatan</td><td>7457547</td><td>Rina@haha.com</td></tr><tr><td>4</td><td>Chalie</td><td>Jl. Ambon No. 32</td><td>63626353</td><td>Chalie@aaaa.com</td></tr><tr><td>5</td><td>Dino</td><td>Jl. Buntu No. 64</td><td>7347433</td><td>dino@lala.com</td></tr></tbody></table></body></html>
3. Setelah kita buat htmlnya, Download datatables disini, extract ke dalam satu folder dengan html yang telah di buat.
4. Setelah download maka inisiasi di html yang telah kita buat dengan cara menyisipkan kode berikut :
5. sehingga tampilan secara keseluruhan dari html adalah seperti berikut :
6. Maka tampilan table tadi akan semakin terlihat kaya fitur dan elegan, seperti berikut :
F. Referensi
4. Setelah download maka inisiasi di html yang telah kita buat dengan cara menyisipkan kode berikut :
</pre><style type="text/css" title="currentStyle"> @import "./media/css/demo_table.css"; @import "./media/css/demo_page.css";</style><script type="text/javascript" language="javascript" src="./media/js/jquery.js"></script><script type="text/javascript" language="javascript" src="./media/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#example').dataTable(); } ); </script>5. sehingga tampilan secara keseluruhan dari html adalah seperti berikut :
<html></pre><head><title>Table dengan Datatables</title><style type="text/css" title="currentStyle"> @import "./media/css/demo_table.css"; @import "./media/css/demo_page.css";</style><script type="text/javascript" language="javascript" src="./media/js/jquery.js"></script><script type="text/javascript" language="javascript" src="./media/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#example').dataTable(); } ); </script></head><body><table class="display" id="example"><thead> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> <th>No.Telpon</th> <th>Email</th> </tr></thead><tbody> <tr> <td>1</td> <td>Adi</td> <td>Jl. Kesemek No. 12</td> <td>54104258</td> <td>adi@lala.com</td> </tr> <tr> <td>2</td> <td>Budi</td> <td>Jl. Mangga No. 57</td> <td>5262362</td> <td>Budi@hehe.com</td> </tr> <tr> <td>3</td> <td>Rina</td> <td>Jakarta Selatan</td> <td>7457547</td> <td>Rina@haha.com</td> </tr> <tr> <td>4</td> <td>Chalie</td> <td>Jl. Ambon No. 32</td> <td>63626353</td> <td>Chalie@aaaa.com</td> </tr> <tr> <td>5</td> <td>Dino</td> <td>Jl. Buntu No. 64</td> <td>7347433</td> <td>dino@lala.com</td> </tr></tbody></table></body></html>6. Maka tampilan table tadi akan semakin terlihat kaya fitur dan elegan, seperti berikut :
F. Referensi
G. Hasil dan Kesimpulan
Dengan menggunakan Jquery Datatables, kita tidak perlu membuat paging,searching, sortir data untuk ditampilkan dalam halaman sebuah website.
Karena Jquery Datatables sudah dilengkapi dengan fitur tersebut
Yak,
itu tadi penjelasan singkat tentang Pengertian dan Kegunaan Jquery Datatables, jangan lupa untuk kunjungi
terus blog saya untuk mengetahui kelanjutan materi ini Sekian Termiakasih
Wassalamualaikum wr.wb