如何通过ajax将JQuery Datatable与list绑定

如何解决如何通过ajax将JQuery Datatable与list绑定

我正在尝试使用单个 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; }
}

Ajax 调用将返回“Reportviewmodel”

"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);
}

结果：