Menggunakan Datatable di Bootstrap 5

Terakhir di update 28-01-2024

Contoh penggunaan library Datatable pada template dengan Bootstrap 5

Include CSS nya di header

<link rel="stylesheet" href="//cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" />

Include JS nya sebelum tag </body>

Datatable membutuhkan jQuery, jika sudah di include bisa di skip

<script src="//code.jquery.com/jquery-3.7.0.js"></script>
<script src="//cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>

Deklarasi datatable untuk table dengan id datatable

<script>
$(document).ready(function () {
    $("#datatable").DataTable({
        searching: true,
        search: {
            smart: false,
        },
        paging: true,
        lengthChange: true,
        ordering: true,
        info: true,
        language: {
            // menggunakan bahasa Indonesia
            url: "//cdn.datatables.net/plug-ins/1.13.7/i18n/id.json",
        },
    });
});
</script>

searching, paging, lengthChange, ordering dan info semua nilai default nya adalah true, jadi config tersebut bisa dihilangkan, kecuali mau diubah nilai nya ke false

<script>
$(document).ready(function () {
    $("#datatable").DataTable({
        search: {
            smart: false,
        },
        language: {
            // menggunakan bahasa Indonesia
            url: "//cdn.datatables.net/plug-ins/1.13.7/i18n/id.json",
        },
    });
});
</script>

Untuk penjelasan opsi smart bisa cek Datatable search tidak jalan

Contoh table

<table class="table" id="datatable">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Username</th>
            <th>Role</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        <!-- looping data -->
    </tbody>
</table>

- Iklan -

Tags: Datatable