【发布时间】：2022-01-22 06:00:45
【问题描述】：
我一直在尝试使用 ajax 在页面加载时填充表格中的数据。数据在我的表中加载良好，但我面临的问题是 jQuery 的排序和分页。当我点击它的排序箭头时，它显示表中没有可用的数据。我的表格代码是：
{{-- /Table Starts form here --}}
<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">
{{-- table data goes here --}}
</tbody>
</table>
我的 ajax 是：
<script>
//for displaying table data department
$(document).ready(function () {
// var table = $('#DtAdminAttendance').DataTable();
$.ajax({
type: "GET",
url: "fetch-Attendance",
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" class="dropdown-item dltAtn" href="#" data-toggle="modal" data-target="#delete_Attendance" value="${employee.id}">
<i class="fa fa-trash-o m-r-5"></i> Delete
</button>
</div>
</div>\
</td>\
</tr>`);
}
else if (employee.status == "Present")
{
$('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-success"> ${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" class="dropdown-item dltAtn" href="#" data-toggle="modal" data-target="#delete_Attendance" value="${employee.id}">
<i class="fa fa-trash-o m-r-5"></i> Delete
</button>
</div>
</div>\
</td>\
</tr>`);
}
else if (employee.status == "Late")
{
$('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-warning"> ${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" class="dropdown-item dltAtn" href="#" data-toggle="modal" data-target="#delete_Attendance" value="${employee.id}">
<i class="fa fa-trash-o m-r-5"></i> Delete
</button>
</div>
</div>\
</td>\
</tr>`);
}
else if (employee.status == "Unpaid Halfday")
{
$('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-info"> ${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" class="dropdown-item dltAtn" href="#" data-toggle="modal" data-target="#delete_Attendance" value="${employee.id}" >
<i class="fa fa-trash-o m-r-5"></i> Delete
</button>
</div></div>
</td>
</tr>`);
}
});
$('#DtAdminAttendance').DataTable();
}
});
});
</script>
现在当我转到页面时，它会加载表格行：
但是当我使用任何列进行排序时，它显示表中没有可用的数据：
【问题讨论】：
-
您尝试过什么解决问题的方法？这是 PHP 问题，数据没有以预期的格式发送到浏览器，还是 JS 问题，浏览器没有正确处理该数据？