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 style="display: none">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 () {

    
        // var table = $('#DtAdminAttendance').DataTable();
        $.ajax({
            type: "GET",
            url: "https://run.mocky.io/v3/9ef15223-a192-4f3c-a2fb-843048cb31dc",
            dataType: "json",
            
            success: function (response) {
                
                $('tbody').html("");
                $.each(response.Attendance_list, function (key, employee) { 
                                if(employee.status=="Absent"){
                                $('tbody').append(
                                            '<tr>\
                                        <td style="display: none">'+employee.id+'</td>\
                                        <td>'+ employee.employeeID + '-'  + employee.name + '</td>\
                                        <td>'+employee.date+'</td>\
                                        <td>'+employee.Punch_in+'</td>\
                                        <td>'+(employee.Punch_Out== null? '-' : employee.Punch_Out )+'</td>\
                                        <td>'+employee.totalhours+'</td>\
                                            <td class="badge  badge-danger">'+employee.status+'</td>'+
                                            '<td class="text-right">'
                                            +'<div class="dropdown dropdown-action">'
                                                    +'<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>'+
                                                '<div class="dropdown-menu dropdown-menu-right">'+
                                                    '<button type="button" class="dropdown-item edtAtn" href="#" data-toggle="modal" data-target="#edit_Attendance" value="'+employee.id+'" ><i class="fa fa-pencil m-r-5"></i> Edit</button>'+
                                                    '<button type="button"...