Mempercantik Table HTML Dengan Plugin Datatable Jquery
Jumat, 16 November 2018
Tulis Komentar
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
Belum ada Komentar untuk "Mempercantik Table HTML Dengan Plugin Datatable Jquery"
Posting Komentar