Menggunakan DataTables untuk Memoles Tampilan Tabel HTML

Tutorial menggunakan DataTables untuk membuat tabel HTML lebih menarik dan inteaktif

Rizki Ramadandi

Penulis

View(s)

Waktu baca

12 Maret, 2022

Tanggal publikasi

16 April, 2023

Tanggal sunting terakhir

Daftar Blog Menggunakan DataTables untuk Memoles Tampilan Tabel HTML

Daftar Isi

Menggunakan DataTables untuk Memoles Tampilan Tabel HTML
1. Dependensi DataTables
1.1. jQuery
1.2. DataTables
2. Cara menggunakan DataTables
3. Referensi

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();
} );

Tampilan DataTables

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/.

Referensi

SUPPORT

Berikan supportmu kepada website https://www.rizki-ramadandi.com

Share this blog

Support me on

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

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