我一直在嘗試使用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>
現在，當我轉到頁面時，它會加載表格行：
但是當我使用任何列進行排序時，它顯示表中沒有可用資料：
uj5u.com熱心網友回復：
根據我的測驗，您的問題不可重現。它在我這邊作業正常。
JS Fiddle：OP 的測驗代碼
盡管如此，您的源代碼可以使用一些改進，這可能可以解決您的問題。
使用 dataTable API 自動生成表格，而不是手動操作 HTML 表格。
JS Fiddle：改進的源代碼
HTML
<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
ajax: {url: '...'}根據您的需要更改。即： '/fetch-Attendance'。
$(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 >
<div >
<a href="#" data-toggle="dropdown" aria-expanded="false">
<i >more_vert</i>
</a>
<div >
<button style="cursor: pointer;" type="button" data-toggle="modal" data-target="#edit_Attendance" value="${oData.id}">
<i ></i>
Edit
</button>
<button style="cursor: pointer;" type="button" data-toggle="modal" data-target="#delete_Attendance" value="${oData.id}">
<i ></i>
Delete
</button>
</div>
</div>
</div>
`);
$(nTd).html(actionBtn.get(0));
},
orderable: false,
searchable: false
}
],
columnDefs: [
{
"targets": [0],
"visible": false
},
{
"defaultContent": "-",
"targets": "_all"
}
]
});
});
uj5u.com熱心網友回復：
向HTML 檔案添加jQuery（腳本）和資料表（腳本、樣式）參考后，您應該將以下代碼添加到腳本中以對資料表進行排序。為了使專案正常作業，您應該將要運行的腳本添加到最后一個檔案中。就我所評論的而言，應用 dataTable 樣式沒有問題。您可能沒有將dataTable 腳本參考添加到專案中。使用下面模板中的參考和<script>元素中的命令重新測驗專案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="DtAdminAttendance" class="display" style="width:100%">
<!-- Something -->
</table>
<script>
$(document).ready(function () {
$('#DtAdminAttendance').DataTable({
order: [
[3, 'desc'],
[0, 'asc']
]
});
});
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/388815.html