Cara Menggunakan DataTables jQuery
DataTables adalah plugin jQuery yang kuat dan populer untuk membuat tabel HTML interaktif dan mudah dinavigasi. Dengan DataTables, Anda dapat menambahkan fitur-fitur seperti pencarian, penyortiran, pagination, dan banyak lagi ke tabel Anda, menjadikan data Anda lebih mudah diakses dan dikelola.
1. Instalasi DataTables
Langkah pertama adalah menginstal DataTables. Anda dapat menginstalnya dengan berbagai cara:
-
CDN: Salah satu cara termudah adalah dengan menggunakan CDN. Tambahkan script berikut ke dalam bagian
<head>dari halaman HTML Anda: -
Download: Anda juga dapat mengunduh DataTables dari situs web resminya dan menyertakannya dalam proyek Anda.
2. Inisialisasi DataTables
Setelah Anda menginstal DataTables, Anda perlu menginisialisasinya pada tabel HTML Anda. Ini dilakukan dengan menggunakan metode DataTable() pada objek jQuery yang mewakili tabel Anda.
Nama
Umur
Kota
John Doe
30
Jakarta
Jane Doe
25
Bandung
Kode di atas akan mengubah tabel HTML dasar menjadi tabel interaktif dengan fitur-fitur dasar seperti pencarian, penyortiran, dan pagination.
3. Opsi Konfigurasi
DataTables menyediakan berbagai opsi konfigurasi untuk menyesuaikan perilaku dan tampilan tabel. Berikut beberapa contoh opsi yang umum digunakan:
language: Menentukan bahasa yang digunakan untuk antarmuka DataTables.paging: Mengaktifkan atau menonaktifkan pagination.searching: Mengaktifkan atau menonaktifkan fitur pencarian.ordering: Mengaktifkan atau menonaktifkan fitur penyortiran.columns: Menentukan pengaturan kolom, seperti kolom yang dapat diurutkan, kolom yang dapat dicari, dan lebar kolom.
Contoh penggunaan:
$(document).ready(function() {
$('#myTable').DataTable({
language: {
url: '//cdn.datatables.net/plug-ins/1.10.20/i18n/Indonesian.json'
},
paging: true,
searching: true,
ordering: true,
columns: [
{ data: 'nama', orderable: true, searchable: true },
{ data: 'umur', orderable: true, searchable: false },
{ data: 'kota', orderable: true, searchable: true }
]
});
});
4. Fitur Tambahan
DataTables menyediakan fitur tambahan yang dapat meningkatkan interaktivitas tabel Anda:
buttons: Menambahkan tombol ke tabel, seperti tombol untuk mengekspor data ke berbagai format (CSV, Excel, PDF).fixedColumns: Mengunci kolom tertentu, sehingga selalu terlihat saat Anda menggulir tabel.rowGroup: Mengelompokkan baris berdasarkan nilai kolom tertentu.select: Menambahkan fitur seleksi baris atau kolom.responsive: Membuat tabel responsif terhadap berbagai ukuran layar.
5. Dokumen Resmi
Untuk mempelajari lebih lanjut tentang DataTables dan semua fitur yang ditawarkannya, Anda dapat merujuk ke dokumentasi resminya di .
Kesimpulan
DataTables adalah plugin jQuery yang sangat berguna untuk meningkatkan interaktivitas dan kemampuan manajemen data tabel HTML. Dengan berbagai opsi konfigurasi dan fitur tambahan, DataTables memungkinkan Anda untuk membuat tabel yang mudah digunakan, menarik, dan mudah dipahami.
