Cara Menggunakan DataTables Bootstrap 5
DataTables adalah plugin JavaScript yang populer untuk menambahkan tabel interaktif ke website Anda. DataTables dapat diintegrasikan dengan Bootstrap 5 untuk memberikan pengalaman pengguna yang lebih baik dan tampilan yang lebih menarik.
1. Persiapan
-
Instal DataTables: Anda dapat menginstal DataTables dengan CDN atau dengan mengunduhnya secara lokal.
- CDN: Tambahkan script DataTables ke dalam header HTML Anda:
- Local: Unduh DataTables dari dan salin file CSS dan JS ke dalam folder proyek Anda. Kemudian tambahkan link ke file CSS dan script ke dalam header HTML Anda.
-
Instal Bootstrap: Pastikan Anda telah menginstal Bootstrap 5. Anda dapat menggunakan CDN atau mengunduhnya secara lokal seperti yang Anda lakukan dengan DataTables.
2. Buat Tabel
Buat tabel HTML dengan data yang ingin Anda tampilkan:
Nama
Email
Umur
John Doe
[email protected]
30
Jane Doe
[email protected]
25
3. Inisialisasi DataTables
Inisialisasi DataTables pada tabel Anda dengan menggunakan JavaScript:
$(document).ready(function() {
$('#myTable').DataTable();
});
Kode di atas akan mengubah tabel HTML sederhana menjadi tabel DataTables dengan fitur dasar seperti pencarian, pagination, dan pengurutan.
4. Opsi DataTables
DataTables memiliki banyak opsi yang dapat Anda gunakan untuk menyesuaikan perilaku dan tampilan tabel. Berikut beberapa opsi yang umum digunakan:
language: Untuk mengubah bahasa yang digunakan dalam DataTables.order: Untuk menetapkan kolom yang akan diurutkan secara default dan arah pengurutannya.pageLength: Untuk mengatur jumlah data yang ditampilkan per halaman.paging: Untuk mengaktifkan/menonaktifkan pagination.searching: Untuk mengaktifkan/menonaktifkan pencarian.info: Untuk mengaktifkan/menonaktifkan informasi jumlah data yang ditampilkan.columns: Untuk mengatur kolom tabel, seperti tipe data dan renderisasi.
Sebagai contoh, untuk mengubah bahasa menjadi bahasa Indonesia:
$(document).ready(function() {
$('#myTable').DataTable({
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/id.json'
}
});
});
5. Integrasi Bootstrap
DataTables sudah terintegrasi dengan baik dengan Bootstrap. Anda dapat menggunakan kelas CSS Bootstrap untuk memberikan tampilan yang lebih menarik pada tabel DataTables Anda.
Sebagai contoh, untuk menambahkan kelas table-striped untuk membuat baris tabel bergantian warna:
...
6. Contoh Lengkap
Berikut adalah contoh lengkap cara menggunakan DataTables dengan Bootstrap 5:
DataTables Bootstrap 5
Daftar Karyawan
Nama
Email
Umur
John Doe
[email protected]
30
Jane Doe
[email protected]
25
Kesimpulan
DataTables Bootstrap 5 menawarkan cara mudah untuk menambahkan tabel interaktif dan menarik ke website Anda. Dengan banyak opsi yang dapat disesuaikan, Anda dapat dengan mudah membuat tabel yang sesuai dengan kebutuhan Anda.
