问题描述
我正在尝试使用单个 ajax 调用绑定多个 jquery 数据表。下面是代码片段。
当列表在类中时,我们如何绑定 jquery 数据。
Ajax 调用将返回“Reportviewmodel”。绑定数据表所需的列表将在此 Reportviewmodel 对象中。
public class Reportviewmodel
{
public List<ReportingDataviewmodel> AList { get; set; }
public List<ReportingDataviewmodel> MList { get; set; }
public List<ReportingDataviewmodel> ACList { get; set; }
}
public class ReportingDataviewmodel
{
public string CN { get; set; }
public string RUrl { get; set; }
public string Status { get; set; }
public string StartTime { get; set; }
public string EndTime { get; set; }
}
"processing": true,// for show progress bar
"serverSide": false,// for process server side
"filter": true,// this is for disable filter (search Box)
"orderMulti": false,// for disable multiple column at once
"ajax": {
"url": "/Reports/GetReports","type": "POST","datatype": "json",},"columnDefs": [{
"targets": [0],"visible": false,"searchable": false
}],
如何访问data.Alist绑定数据表。
请帮忙。
解决方法
这是您可以遵循的工作演示:
查看:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>cn</th>
<th>rUrl</th>
<th>status</th>
<th>startTime</th>
<th>endTime</th>
</tr>
</thead>
</table>
JS:
@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>
var columns = [];
$(document).ready(function () {
$.ajax({
url: "/Reports/GetReports",type:"POST",success: function (data) {
columnNames = Object.keys(data.aList[0]);
for (var i in columnNames) {
columns.push({
data: columnNames[i],title: columnNames[i]
});
}
$('#example').DataTable({
"processing": true,// for show progress bar
"serverSide": false,// for process server side
"filter": true,// this is for disable filter (search box)
"orderMulti": false,// for disable multiple column at once
"data": data.aList,"columns": columns
});
}
});
});
</script>
}
控制器:
[HttpPost]
[Route("Reports/GetReports")]
public IActionResult Test()
{
var data = new ReportViewModel()
{
ACList = new List<ReportingDataViewModel>()
{
new ReportingDataViewModel(){CN="AC_CN1",RUrl="AC_RUrl1",StartTime="2019-8-9",EndTime="2019-8-13",Status="Good"},new ReportingDataViewModel(){CN="AC_CN2",RUrl="AC_RUrl2",StartTime="2019-9-4",EndTime="2019-9-15",Status="Nice"},new ReportingDataViewModel(){CN="AC_CN3",RUrl="AC_RUrl3",StartTime="2019-8-3",EndTime="2019-8-5",Status="Ok"}
},AList = new List<ReportingDataViewModel>()
{
new ReportingDataViewModel(){CN="ACN1",RUrl="ARUrl1",StartTime="2019-3-9",EndTime="2019-3-13",new ReportingDataViewModel(){CN="ACN2",RUrl="ARUrl2",StartTime="2019-4-4",EndTime="2019-4-15",new ReportingDataViewModel(){CN="ACN3",RUrl="ARUrl3",StartTime="2019-5-3",EndTime="2019-5-5",Status="Ok"}
}
};
return Json(data);
}
结果: