Menggunakan DataTables untuk Memoles Tampilan Tabel HTML
Tutorial menggunakan DataTables untuk membuat tabel HTML lebih menarik dan inteaktif
Rizki Ramadandi
Penulis
4
View(s)
{{ readingTime }}
Waktu baca
12 Maret, 2022
Tanggal publikasi
16 April, 2023
Tanggal sunting terakhir
Daftar Isi
DataTables adalah plug-in JQuery yang merupakan library bahasa pemrograman Javascript. Dengan menggunakan DataTables, tabel HTML akan ditambahkan beberapa fitur canggih.
Dependensi DataTables#
Sebelum menggunakan DataTables, pastikan kamu sudah meng-include beberapa dependensinya. Berikut dependensi-dependensi yang diperlukan.
jQuery#
Versi jQuery 1.7+ dapat digunakan dengan DataTables, akan tetapi disarankan untuk menggunakan versi jQuery terbaru. Kamu bisa unduh langsung di https://jquery.com/download/ atau gunakan CDN dibawah ini.
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
DataTables#
Kamu bisa unduh langsung di https://datatables.net/ atau gunakan CDN dibawah ini.
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css
Cara menggunakan DataTables#
Setelah semua dependensinya ada, kamu bisa menambahkan id (bisa menggunakan class atau menggunakan atribut lainnya) pada tabel HTML.
<table id="data-tables">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Lorem</td>
</tr>
<tr>
<td>2.</td>
<td>Ipsum</td>
</tr>
</tbody>
</table>
Kemudian inisialisasi DataTables dengan cara.
$(document).ready( function () {
$('#data-tables').DataTable();
} );
Secara default, DataTables menampilkan tabel dengan beberapa fitur, seperti search, pagination, ordering dan info. Kamu bisa mengatur opsi DataTables tersebut sebagai berikut.
$(document).ready( function () {
$('#data-tables').DataTable(
{
searching: false,
info: false
);
} );
Opsi DataTables lainnya dapat kamu lihat di https://datatables.net/reference/option/.
ADVERTISEMENT
Referensi#
ADVERTISEMENT
SUPPORT
Berikan supportmu kepada website https://www.rizki-ramadandi.com
Support me on
ADVERTISEMENT
BLOG YANG MIRIP
Beberapa blog yang mirip dengan blog Menggunakan DataTables untuk Memoles Tampilan Tabel HTML
Daftar Huruf Bahasa Jepang: Hiragana & Katakana
Daftar huruf hiragana dan katakana untuk membantu belajar menulis dan membaca bahasa Jepang
Walkthrough Digimon World Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World Bahasa Indonesia
Walkthrough Digimon World 2 Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World 2 Bahasa Indonesia
Cara Membuat Indikator Progres Membaca Artikel Web - jQuery
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
Walkthrough Final Fantasy Bahasa Indonesia Lengkap
Walktrough lengkap game Final Fantasy Bahasa Indonesia
Menambahkan Custom HTML Tag Module - Quill.js
Tutorial menambahkan custom HTML tag pada Quill.js
Cara Cepat & Mudah Mendapatkan Resource Dasar - Summoner's Greed
Cara cepat dan mudah untuk mendapatkan resource dasar, seperti Coin, Gem, Charm, Summoning Orb, dan Summoning Stone pada game Summoner's Greed
Lokasi Gym - Digimon World
Lokasi semua gym beserta peralatannya pada game Digimon World
Mode Game - Summoner's Greed
Semua mode game yang tersedia pada game Summoner's Greed
Review: Big Hunter
Review singkat dan beberapa tips bermain game Big Hunter
ADVERTISEMENT
Kata kunci: tutorial, menarik, inteaktif, datatables, memoles, tampilan, tabel, html, tutorial menggunakan, untuk membuat, membuat tabel, html lebih, lebih menarik, menarik dan, dan inteaktif, menggunakan datatables, datatables untuk, untuk memoles, memoles tampilan, tampilan tabel, tabel html, tutorial menggunakan datatables, datatables untuk membuat, untuk membuat tabel, membuat tabel html, tabel html lebih, html lebih menarik, lebih menarik dan, menarik dan inteaktif, menggunakan datatables untuk, datatables untuk memoles, untuk memoles tampilan, memoles tampilan tabel, tampilan tabel html, tutorial menggunakan datatables untuk, menggunakan datatables untuk membuat, datatables untuk membuat tabel, untuk membuat tabel html, membuat tabel html lebih, tabel html lebih menarik, html lebih menarik dan, lebih menarik dan inteaktif, menggunakan datatables untuk memoles, datatables untuk memoles tampilan, untuk memoles tampilan tabel, memoles tampilan tabel html, tutorial menggunakan datatables untuk membuat, menggunakan datatables untuk membuat tabel, datatables untuk membuat tabel html, untuk membuat tabel html lebih, membuat tabel html lebih menarik, tabel html lebih menarik dan, html lebih menarik dan inteaktif, menggunakan datatables untuk memoles tampilan, datatables untuk memoles tampilan tabel, untuk memoles tampilan tabel html, tutorial menggunakan datatables untuk membuat tabel, menggunakan datatables untuk membuat tabel html, datatables untuk membuat tabel html lebih, untuk membuat tabel html lebih menarik, membuat tabel html lebih menarik dan, tabel html lebih menarik dan inteaktif, menggunakan datatables untuk memoles tampilan tabel, datatables untuk memoles tampilan tabel html, tutorial menggunakan datatables untuk membuat tabel html, menggunakan datatables untuk membuat tabel html lebih, datatables untuk membuat tabel html lebih menarik, untuk membuat tabel html lebih menarik dan, membuat tabel html lebih menarik dan inteaktif, menggunakan datatables untuk memoles tampilan tabel html, tutorial menggunakan datatables untuk membuat tabel html lebih, menggunakan datatables untuk membuat tabel html lebih menarik, datatables untuk membuat tabel html lebih menarik dan, untuk membuat tabel html lebih menarik dan inteaktif, tutorial menggunakan datatables untuk membuat tabel html lebih menarik, menggunakan datatables untuk membuat tabel html lebih menarik dan, datatables untuk membuat tabel html lebih menarik dan inteaktif, tutorial menggunakan datatables untuk membuat tabel html lebih menarik dan, menggunakan datatables untuk membuat tabel html lebih menarik dan inteaktif, tutorial menggunakan datatables untuk membuat tabel html lebih menarik dan inteaktif
KONTEN
YANG
MIRIP
Daftar Huruf Bahasa Jepang: Hiragana & Katakana
Daftar huruf hiragana dan katakana untuk membantu belajar menulis dan membaca bahasa Jepang
13 Februari, 2024
98
View(s)
Walkthrough Digimon World Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World Bahasa Indonesia
15 Desember, 2023
32
View(s)
Walkthrough Digimon World 2 Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World 2 Bahasa Indonesia
06 April, 2023
55
View(s)
Cara Membuat Indikator Progres Membaca Artikel Web - jQuery
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
16 April, 2023
No
View(s)
Walkthrough Final Fantasy Bahasa Indonesia Lengkap
Walktrough lengkap game Final Fantasy Bahasa Indonesia
15 Desember, 2023
34
View(s)
Menambahkan Custom HTML Tag Module - Quill.js
Tutorial menambahkan custom HTML tag pada Quill.js
16 April, 2023
5
View(s)
Cara Cepat & Mudah Mendapatkan Resource Dasar - Summoner's Greed
Cara cepat dan mudah untuk mendapatkan resource dasar, seperti Coin, Gem, Charm, Summoning Orb, dan Summoning Stone pada game Summoner's Greed
22 Maret, 2024
5
View(s)
Lokasi Gym - Digimon World
Lokasi semua gym beserta peralatannya pada game Digimon World
15 Desember, 2023
24
View(s)
Mode Game - Summoner's Greed
Semua mode game yang tersedia pada game Summoner's Greed
19 Juli, 2023
9
View(s)
Review: Big Hunter
Review singkat dan beberapa tips bermain game Big Hunter
21 Juli, 2023
8
View(s)
MUNGKIN
KAMU
JUGA
SUKA
Penjelasan Karakter Renegade - Brotato
Penjelasan karakter Renegade pada game Brotato
02 Oktober, 2024
1
View(s)
Cara Mendapatkan DigiSeabass - Digital Tamers 2
Apa itu DigiSeabass dan bagaimana cara mendapatkannya pada game Digital Tamers 2
28 September, 2024
1
View(s)
Cara Mendapatkan Deluxe Mushroom & DigiWater untuk Drimogemon - Digital Tamers 2
Bagaimana cara mendapatkan Deluxe Mushroom dan DigiWater untuk Drimogemon pada game Digital Tamers 2
27 September, 2024
2
View(s)
Penjelasan Karakter King - Brotato
Penjelasan karakter King pada game Brotato
26 September, 2024
2
View(s)
Cara Mengundang Meramon ke Server City - Digital Tamers 2
Bagaimana cara mengundang Meramon ke Server City pada game Digital Tamers 2
26 September, 2024
1
View(s)
Bahan Apa yang Dicari Oleh Burgamon? - Digital Tamers 2
Bahan yang dicari oleh Burgamon pada game Digital Tamers 2
25 September, 2024
1
View(s)
Alur Misi Koromon - Digital Tamers 2
Bagaimana alur misi dari Koromon besar pada game Digital Tamers 2
24 September, 2024
2
View(s)
Penjelasan Karakter Golem - Brotato
Penjelasan karakter Golem pada game Brotato
20 September, 2024
2
View(s)
Penjelasan Karakter Fisherman - Brotato
Penjelasan karakter Fisherman pada game Brotato
14 September, 2024
1
View(s)
Penjelasan Karakter Cryptid - Brotato
Penjelasan karakter Cryptid pada game Brotato
09 September, 2024
3
View(s)
KONTEN
LAINNYA
Blog
Koleksi blog random
Resource
Koleksi berbagai macam resource gratis
Tool
Koleksi online tools berbagai macam fungsi
Game
Koleksi berbagai macam game sederhana
Abbreviation
Koleksi abreviasi/singkatan