Cara Menggunakan DataTables di Bootstrap
DataTables adalah plugin JavaScript yang populer untuk menampilkan dan mengelola tabel HTML dengan mudah. Plugin ini menawarkan fitur-fitur yang sangat berguna, seperti:
- Pencarian dan penyaringan data: Mencari dan menyaring data dalam tabel dengan cepat dan mudah.
- Penyortiran data: Mengurutkan data dalam tabel berdasarkan kolom tertentu.
- Pagination: Menampilkan data dalam halaman-halaman yang terbagi sehingga lebih mudah diakses.
- Responsiveness: Menampilkan tabel yang responsif terhadap ukuran layar yang berbeda.
- Banyak fitur lainnya: Seperti integrasi dengan berbagai plugin, dukungan untuk berbagai format data, dan banyak lagi.
Berikut adalah langkah-langkah tentang bagaimana menggunakan DataTables di Bootstrap:
1. Menambahkan Library DataTables
Pertama, Anda perlu menambahkan library DataTables ke dalam proyek Anda. Anda dapat melakukannya dengan menggunakan CDN atau mengunduh library dan menyertakannya dalam proyek Anda.
Menggunakan CDN:
Mengunduh library:
Anda dapat mengunduh library DataTables dari dan menyertakannya dalam proyek Anda.
2. Menambahkan DataTables ke Tabel HTML
Setelah Anda menambahkan library DataTables, Anda dapat menambahkannya ke tabel HTML Anda dengan menambahkan kelas dataTable ke tag <table>.
Nama
Umur
Kota
John Doe
30
New York
Jane Doe
25
London
Peter Pan
10
Neverland
3. Inisialisasi DataTables
Setelah Anda menambahkan kelas dataTable ke tabel HTML Anda, Anda perlu menginisialisasi DataTables dengan memanggil fungsi DataTable() pada objek jQuery yang mewakili tabel Anda.
$(document).ready(function() {
$('#myTable').DataTable();
});
4. Menggunakan Fitur DataTables
Setelah Anda menginisialisasi DataTables, Anda dapat mulai menggunakan fitur-fiturnya, seperti pencarian, penyaringan, dan penyortiran. Anda dapat menggunakan berbagai opsi untuk mengkonfigurasi DataTables, seperti:
searching: Mengaktifkan atau menonaktifkan fitur pencarian.paging: Mengaktifkan atau menonaktifkan fitur pagination.ordering: Mengaktifkan atau menonaktifkan fitur penyortiran.columns: Mengatur kolom mana yang dapat dicari, disaring, dan diurutkan.
Contoh penggunaan opsi:
$(document).ready(function() {
$('#myTable').DataTable({
searching: true,
paging: true,
ordering: true,
columns: [
{ searchable: true, orderable: true }, // kolom Nama
{ searchable: false, orderable: true }, // kolom Umur
{ searchable: true, orderable: false } // kolom Kota
]
});
});
5. Menambahkan Stylisation
DataTables dilengkapi dengan beberapa style bawaan yang sesuai dengan Bootstrap. Namun, Anda dapat menyesuaikan gaya tabel DataTables sesuai kebutuhan Anda. Anda dapat menambahkan kelas CSS tambahan ke tabel atau menggunakan opsi dom untuk mengatur tata letak tabel.
Contoh penggunaan CSS:
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
6. Menggunakan DataTables dengan Bootstrap
DataTables dapat diintegrasikan dengan Bootstrap dengan mudah. Gunakan kelas CSS Bootstrap untuk memberikan gaya pada tabel DataTables dan gunakan opsi dom untuk mengatur tata letak tabel.
Contoh penggunaan DataTables dengan Bootstrap:
Nama
Umur
Kota
John Doe
30
New York
Jane Doe
25
London
Peter Pan
10
Neverland
Kesimpulan
DataTables adalah plugin JavaScript yang sangat berguna untuk menampilkan dan mengelola tabel HTML. Plugin ini mudah digunakan dan menawarkan banyak fitur yang dapat membantu Anda meningkatkan pengalaman pengguna dalam aplikasi web Anda. Dengan mengintegrasikan DataTables dengan Bootstrap, Anda dapat membuat tabel yang responsif, mudah digunakan, dan tampak menarik.
