Enhanced-Datatable-load

by steven mwesigwa

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table id="DtAdminAttendance" class="table table-striped custom-table mb-0 datatable">
    <thead>
        <tr>
            <th>tbl_index</th>
            <th>Emp ID - Name</th>
            <th>Date</th>
            <th>Punch In</th>
            <th>Punch Out</th>
            <th>Worked Hours</th>
            <th>Status</th>
            <th class="text-right">Action</th>
        </tr>
    </thead>
    <tbody id="atn-tbody">
    </tbody>
</table>

JavaScript

$(document).ready(function () {
    $("#DtAdminAttendance").DataTable({
        scrollX: true,
        autoWidth: false,
        ajax: {
            type: "GET",
            url: "https://run.mocky.io/v3/9ef15223-a192-4f3c-a2fb-843048cb31dc",
            dataType: "JSON",
            dataSrc: "Attendance_list",
            async: true,
        },
        columns: [
            {data: "id"},
            {
                data: "name", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html(`${oData.employeeID + "-" + oData.name}`);
                }
            },
            {data: "date"},
            {data: "Punch_in"},
            {data: "Punch_Out"},
            {data: "totalhours"},
            {
                data: "status", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    const statusBtn = $("<span class='badge'></span>");
                    let badgeColor = "badge-secondary";

                    switch (oData.status) {
                        case "Absent":
                            badgeColor = "badge-danger";
                            break;
                        case "Present":
                            badgeColor = "badge-success";
                            break;
                        case "Late":
                            badgeColor = "badge-warning";
                            break;
                        case "Unpaid Halfday":
                            badgeColor = "badge-info";
                            break;

                    }

                    statusBtn.addClass(badgeColor);
                    statusBtn.text(oData.status);

                    $(nTd).html(statusBtn.get(0));
                }
            },
            {
                data: null, "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    const actionBtn = $(`
                    <div class="d-inline-block text-right">
                        <div...