Mempercantik Table HTML Dengan Plugin Datatable Jquery



Hallo Sobat NubyChan!
Kali Ini Saya Akan Berbagi Tutorial Membuat Table Dengan Plugin Jquery Atau Biasa Di Sebut Datatables Framework.. 
Sebelumnya Saya Telah Membahas Tentang Bootstrap Dan SweetAlert .. Kalian Bisa Lihat Tutorial Sebelumnya Disini

Oke Sebelum Membahas Datatables Kalian Harus Tau Dlu Apa Itu DataTable?

DataTable adalah plug-in untuk Library jQuery Javascript. Ini adalah alat yang sangat fleksibel, dibangun di atas dasar peningkatan progresif, yang menambahkan semua fitur canggih ini ke setiap tabel HTML.

Jadi Tampilannya Itu Akan Lebih Fleksibel ..Dengan Menggunakan DataTable Ini Di Banding Dengan Table Di HTML Kalian Bisa Ngoding Lama.. Nahh Kita Akan Mencoba Membuat DataTable Dari Plugin jQuery

Di Sini Saya Akan Membuat Table Menggunakan Bootstrap.. Kalian Bisa Melihat Tutorial Bootstrap Untuk Pemula Disini Nahh Berikut Source Codenya

Disini Kita Akan Membuat Table Menggunakan Bootstrap Tanpa Plugin Datatable Dari jQuery 







Nah Maka Tampilannya Akan Terlihat Seperti Di Atass.. Bagaimana Kalau Kita Tambahkan Plugin DataTable Dari jQuery?
Oke Kita Akan Mencoba Yang Katanya Fleksibel

Kita Akan Membuatnya Lagi Menggunakan Bootstrap Dan Di Tambah Plugin Dari DataTabel jQuery Tersebut






Nah Maka Tampilannya Seperti Di Atass ... Memang Fleksibel 😂 Kita Mencari Nama User Langsung Tercari




Bagaimana Cara Menggunakan Si DataTable Tersebut?

Kalian Bisa Mengambil Versi CDN Nya Juga Bisaa ..


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


Paste CDN Css Tersebut Di Antara
<head></head>
Jangan Lupa Di Kasih Href Ya
Contoh : <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

Kalian Juga Harus Mempunyai Persetujuan Dari jQuery Nya.. Caranya Seperti Di Atas Bedanya Kita Menggunakan Script Source
Lalu Pastekan Code Ini <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Nahh Kalau Sudah Kalian Membuat Tabel Nya Gampang Kok Seperti DI HTML Saja..
Jangan Lupa Di Tabel Tersebut Di Tambahkan ID ...

Pastekan Code Penting Ini.. 
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
   $('#myTable').DataTable();
} );
</script>

 Nahh Id Tersebut Isi Dengan Nama myTable


Jika Kalian Bingung Kalian Bisa Lihat Source Code Di Atass..
Nahh Kurang Lebihh Seperti Itu Tutorialnya Jika Kalian Ingin Melihat Lebih Jelas Dan Rinci Bisa Kunjungi Web Nya Di
https://datatables.net

Kalian Juga Bisa Download File Manual 
Disini

Post a Comment

0 Comments