json - DataTable 不显示来自 Json 对象的数据
问题描述
此控制器操作的 HTML 视图页面。我想通过此查看页面查看所有 json 操作结果。但是 Json 数据没有显示在 DataTables 中，尽管 Json 正确获取了所有数据
<h1>Leave Application Logs</h1>
<br />
<div class="row p-4 border rounded">
<table id="mytable" class="table table-striped table-bordered" style="width: 100%">
<thead class="thead-dark">
<tr class="table-info">
<th>
Employee Name
</th>
<th>
Start Date
</th>
<th>
End Date
</th>
<th>
Leave Type
</th>
<th>
Requested Date
</th>
<th>
Approval Status
</th>
<th>
Actions
</th>
</tr>
</thead>
</table>
</div>
@section Scripts{
<script src="leaveapplication.js"> </script>
}C# Asp .net 控制器动作
public ActionResult GetAll()
{
var leaveRequest = _uow.LeaveRequest.GetAll(includeProperties: "LeaveType", includeProperty: "RequestingEmployee", includeProperte: "ApprovedBy");
var leaveRequestModel = _mapper.Map<List<LeaveRequestVm>>(leaveRequest);
var model = new AdminLeaveRequestVm
{
TotalRequest = leaveRequestModel.Count,
ApprovedRequest = leaveRequestModel.Count(x => x.Approved == true),
PendingRequest = leaveRequestModel.Count(x => x.Approved == null),
RejectedRequest = leaveRequestModel.Count(x => x.Approved == false),
LeaveRequest = leaveRequestModel
};
return Json(new { data = model });
}
数据表 js 文件
var dataTable;
$(document).ready(function() {
loadDataTable();
});
function loadDataTable() {
dataTable = $('#tblData').DataTable({
"ajax": {
"url": "/leaveRequests/GetAll"
},
"columns": [{
"data": "leaveRequest.requestingEmployee.firstname",
"width": "10%"
},
{
"data": "leaveRequest.startDate",
"width": "10%"
},
{
"data": "leaveRequest.endDate",
"width": "10%"
},
{
"data": "leaveRequest.leaveType.name",
"width": "10%"
},
{
"data": "leaveRequest.dateRequested, "
width ": "
10 % " }, {
"data": "leaveRequest.approved, "
width ": "
10 % " }, {
"data": "id",
"render": function(data) {
return `
<div class="text-center">
<a href="/leaveRequest/Create/${data}" class="btn btn-warning text-white" style="cursor:pointer">
<i class="fas fa-edit"></i>
</a>
</div>
`;
},
"width": "40%"
}
],
"language": {
"emptyTable": "no data found"
},
"width": "100%"
});
}
}
`
任何人都可以帮助我吗？我在那里完全堆积起来。我已经看到了一些相关的 stackoverflow 问题，但没有得到我的问题解决方案
解决方案
这是一个工作演示，如下所示：
模型：
public class AdminLeaveRequestVm
{
public int Id { get; set; }
public int TotalRequest { get; set; }
public int ApprovedRequest { get; set; }
public int PendingRequest { get; set; }
public int RejectedRequest { get; set; }
public List<LeaveRequest> LeaveRequest { get; set; }
}
public class LeaveRequest
{
public int Id { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public DateTime DateRequested { get; set; }
public bool Approved { get; set; }
public RequestingEmployee RequestingEmployee { get; set; }
public leaveType leaveType { get; set; }
}
public class RequestingEmployee
{
public string firstname { get; set; }
}
public class leaveType
{
public string name { get; set; }
public string age { get; set; }
}
看法：
<h1>Leave Application Logs</h1>
<br />
<div class="row p-4 border rounded">
<table id="mytable" class="table table-striped table-bordered" style="width: 100%">
<thead class="thead-dark">
<tr class="table-info">
<th>
Employee Name
</th>
<th>
Start Date
</th>
<th>
End Date
</th>
<th>
Leave Type
</th>
<th>
Requested Date
</th>
<th>
Approval Status
</th>
<th>
Actions
</th>
</tr>
</thead>
</table>
</div>
@section Scripts{
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
$('#mytable').DataTable({
"ajax": {
"url": "/Home/GetAll"
},
"columns": [{
"data": "requestingEmployee",
"width": "10%",
"render": function (d) {
if (d !== null) {
var table = "";
table += "<tr><td>" + d.firstname + "</td></tr><br/>";
return table;
} else {
return "";
}
}
},
{
"data": "startDate",
"width": "10%"
},
{
"data": "endDate",
"width": "10%"
},
{
"data": "leaveType",
"width": "10%",
"render": function (d) {
if (d !== null) {
var table = "";
table += "<tr><td>" + d.name + "</td></tr><br/>";
return table;
} else {
return "";
}
}
},
{
"data": "dateRequested",
"width ": "10%"
},
{
"data": "approved",
"width ": "10 % "
},
{
"data": "id",
"render": function (data) {
return `
<div class="text-center">
<a href="/leaveRequest/Create/${data}" class="btn btn-warning text-white" style="cursor:pointer">
<i class="fas fa-edit"></i>
</a>
</div>
`;
},
"width": "40%"
}
],
"language": {
"emptyTable": "no data found"
},
"width": "100%"
});
}
</script>
}
控制器：
public ActionResult GetAll()
{
var leaveRequest = new List<LeaveRequest>() {
new LeaveRequest(){
Approved=false,
DateRequested=DateTime.Parse("2020-10-02"),
EndDate = DateTime.Parse("2020-09-02"),
Id=4,
leaveType=new leaveType(){ name="name1",age="age1" },
RequestingEmployee=new RequestingEmployee(){ firstname="fname1" },
StartDate = DateTime.Parse("2020-09-02")
},
new LeaveRequest(){
Approved=true,
DateRequested=DateTime.Parse("2020-01-02"),
EndDate = DateTime.Parse("2020-03-02"),
Id=4,
leaveType=new leaveType(){ name="name2",age="age2" },
RequestingEmployee=new RequestingEmployee(){ firstname="fname2" },
StartDate = DateTime.Parse("2020-09-12")
}
};
return Json(new { data = leaveRequest });
}
结果：
如果你想通过AdminLeaveRequestVm，你需要修改如下（我没有完全配置，因为我认为第一种方法要好得多）：查看：
<script>
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
$('#mytable').DataTable({
"ajax": {
"url": "/Home/GetAll"
},
"columns": [
{
"data": "leaveRequest",
"width": "10%",
"render": function (d) {
if (d !== null) {
var table = "";
$.each(d, function (k, v) {
table += "<tr><td>" + v.startDate + "</td></tr><br/>";
});
return table;
} else {
return "";
}
}
},
{
"data": "leaveRequest",
"width": "10%",
"render": function (d) {
if (d !== null) {
var table = "";
$.each(d, function (k, v) {
table += "<tr><td>" + v.endDate + "</td></tr><br/>";
});
return table;
} else {
return "";
}
}
},
{
"data": "leaveRequest",
"width": "10%",
"render": function (d) {
if (d !== null) {
var table = "";
$.each(d, function (k, v) {
table += "<tr><td>" + v.leaveType.name + "</td></tr><br/>";
});
return table;
} else {
return "";
}
}
},
{
"data": "leaveRequest",
"width": "10%",
"render": function (d) {
if (d !== null) {
var table = "";
$.each(d, function (k, v) {
table += "<tr><td>" + v.dateRequested + "</td></tr><br/>";
});
return table;
} else {
return "";
}
}
},
{
"data": "leaveRequest",
"width": "10%",
"render": function (d) {
if (d !== null) {
var table = "";
$.each(d, function (k, v) {
table += "<tr><td>" + v.approved + "</td></tr><br/>";
});
return table;
} else {
return "";
}
}
}
],
"language": {
"emptyTable": "no data found"
},
"width": "100%"
});
}
</script>
控制器：
public ActionResult GetAll()
{
var leaveRequest = new List<LeaveRequest>() {
new LeaveRequest(){
Approved=false,
DateRequested=DateTime.Parse("2020-10-02"),
EndDate = DateTime.Parse("2020-09-02"),
Id=4,
leaveType=new leaveType(){ name="name1",age="age1" },
RequestingEmployee=new RequestingEmployee(){ firstname="fname1" },
StartDate = DateTime.Parse("2020-09-02")
},
new LeaveRequest(){
Approved=true,
DateRequested=DateTime.Parse("2020-01-02"),
EndDate = DateTime.Parse("2020-03-02"),
Id=4,
leaveType=new leaveType(){ name="name2",age="age2" },
RequestingEmployee=new RequestingEmployee(){ firstname="fname2" },
StartDate = DateTime.Parse("2020-09-12")
}
};
var list = new List<AdminLeaveRequestVm>();
var model = new AdminLeaveRequestVm
{
Id = 1,
TotalRequest = 1,
ApprovedRequest = 0,
PendingRequest = 0,
RejectedRequest = 1,
LeaveRequest = leaveRequest
};
//must return list instead of model
list.Add(model);
return Json(new { data = list });
}
推荐阅读
- javascript - 有没有办法在 querySelector 中使用 *？
- javascript - 当 promise 解决时如何重新渲染 React 组件？| 如何在数据加载之前阻止渲染？
- node.js - 在 Express.js 中使用 pg-promise npm 模块检索插入的行
- python - 动态修改 Python 方法和参数
- apache-nifi - 一次从多个表中读取数据，并使用 Nifi 组合基于数据的 where 子句
- oracle11g - Oracle 参照完整性信息
- r - 如何在 R 闪亮的应用程序中显示嵌入的推文？
- java - 在 Cloud firebase 中使用另一个集合
- json - SwiftyJSON 数组元素？
- python - 如何安全地解压任意单值数据结构（列表、元组、集合……）？