Datatable pada HTML (tanpa PHP)
Datatable pada HTML (tanpa PHP)
Ketika kami membuat website, tentunya ada basis data yang digunakan. cara yang paling mudah menampilkan data adalah dengan memanfaatkan datatable.
Datatables pada dasarnya adalah plugin JavaScript, sehingga Anda bisa menampilkan data sederhana di HTML tanpa perlu backend seperti PHP. Berikut contohnya:
1. Struktur HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Datatable Sederhana</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<h1>Contoh Datatable Sederhana</h1>
<table id="datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Mike Smith</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
</body>
</html>
2. Penjelasan
- Script Datatables dimuat dari CDN.
- Tabel HTML dibuat dengan
id="datatable". - Data ditambahkan langsung di dalam tag
<tbody>dengan format baris dan kolom. - Script JavaScript menginisialisasi datatable tanpa perlu pengaturan
ajaxkarena data sudah ada di dalam HTML.
3. Kelebihan dan Kekurangan
- Kelebihan: Lebih sederhana untuk data statis yang tidak perlu diupdate secara dinamis.
- Kekurangan: Tidak bisa untuk menampilkan data yang besar dan kompleks. Tidak bisa untuk update data secara langsung di tabel.
4. Catatan
- Pastikan mengganti versi library Datatables jika diperlukan.
- Contoh ini menggunakan Bootstrap 4 untuk styling tabel. Anda bisa menyesuaikannya dengan kebutuhan.
5. Untuk menampilkan data dinamis
Jika Anda memiliki data yang berasal dari sumber lain (misalnya API), Anda perlu memodifikasi script JavaScript untuk mengambil data tersebut dan memasukkannya ke dalam tabel menggunakan Datatables.
Jika anda bingung, cara menggunakan datatables. Silahkan chat dan kita adakah kelas online private agar anda lebih paham dan bisa tanya secara langsung
Terima kasih Telah Membaca Artikel Tentang Datatable pada HTML (tanpa PHP)
Punya Pertanyaan Datatable pada HTML (tanpa PHP) , Silahkan
Konsultasikan Lewat Whatsapp.
085284606999
Artikel Datatable pada HTML (tanpa PHP) Di Update Pada :
Salam
Muhammad Ullil Fahri
Ketika kami membuat website, tentunya ada basis data yang digunakan. cara yang paling mudah menampilkan data adalah dengan memanfaatkan datatable.
Datatables pada dasarnya adalah plugin JavaScript, sehingga Anda bisa menampilkan data sederhana di HTML tanpa perlu backend seperti PHP. Berikut contohnya:
1. Struktur HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Datatable Sederhana</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<h1>Contoh Datatable Sederhana</h1>
<table id="datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Mike Smith</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
</body>
</html>
2. Penjelasan
- Script Datatables dimuat dari CDN.
- Tabel HTML dibuat dengan
id="datatable". - Data ditambahkan langsung di dalam tag
<tbody>dengan format baris dan kolom. - Script JavaScript menginisialisasi datatable tanpa perlu pengaturan
ajaxkarena data sudah ada di dalam HTML.
3. Kelebihan dan Kekurangan
- Kelebihan: Lebih sederhana untuk data statis yang tidak perlu diupdate secara dinamis.
- Kekurangan: Tidak bisa untuk menampilkan data yang besar dan kompleks. Tidak bisa untuk update data secara langsung di tabel.
4. Catatan
- Pastikan mengganti versi library Datatables jika diperlukan.
- Contoh ini menggunakan Bootstrap 4 untuk styling tabel. Anda bisa menyesuaikannya dengan kebutuhan.
5. Untuk menampilkan data dinamis
Jika Anda memiliki data yang berasal dari sumber lain (misalnya API), Anda perlu memodifikasi script JavaScript untuk mengambil data tersebut dan memasukkannya ke dalam tabel menggunakan Datatables.
Jika anda bingung, cara menggunakan datatables. Silahkan chat dan kita adakah kelas online private agar anda lebih paham dan bisa tanya secara langsung
Lanjut Part : 1
Muhammad Ullil Fahri
WA : 089696380422
Tautan WA : https://wa.me/message/SG4YA2XQP5FPE1