Menggunakan Datatable di template Bootstrap 5

Irman Firmansyah

Menggunakan library Datatable di template dengan Bootstrap 5

CSS

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

JS

Datatable membutuhkan jQuery

<script src="//code.jquery.com/jquery-3.7.0.js"></script>
<script src="//cdn.datatables.net/1.13.11/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.13.11/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.10/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.10/i18n/id.json",
        },
    });
});
</script>

Untuk pengaturan smart bisa cek disini

Contoh

<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>