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

Question

我正在尝试使用单个 ajax 调用绑定多个 jquery 数据表。下面是代码片段。

当列表位于类内部时，我们如何绑定 jquery datable。

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
}],

如何访问数据。Alist绑定数据表。

请帮忙。

Answer 1

这是一个您可以遵循的工作演示：

查看：

<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",Status="Nice"},
            new ReportingDataViewModel(){CN="ACN2", RUrl="ARUrl2",StartTime="2019-4-4", EndTime="2019-4-15",Status="Nice"},
            new ReportingDataViewModel(){CN="ACN3", RUrl="ARUrl3",StartTime="2019-5-3", EndTime="2019-5-5",Status="Ok"}
        }
    };
    return Json(data);
}

结果：

Answer 2

“我目前正在测试您的解决方案，但我遇到了数据加载问题。此外，您能否确认传递‘start’、‘length’和‘draw’参数的正确方法？”

函数 getSavedPopulation() {

if (savedPopulationDataTable !== null) {
    savedPopulationDataTable.draw();
}
else {
    savedPopulationDataTable = $('#tblViewPopulationList')
        .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
            "ajax": {
                async: true,
                "url": baseUrl + "PopulationBuilder/GetSavedPopulationList",
                "type": "POST",
                headers: { "X-QueryString": getUrlVars()["query"] },
                dataType: "string",
                "data": function (d) {
                    d.populationBuilderMasterId = populationBuilderMasterId,
                        d.acokeys = selectedAcoKeys
                        d.attributeList = AttributeList.toString()
                },
                "beforeSend": function () {
                    $('.dataTables_processing').remove();
                    $("#tblViewPopulationList_filter  > label > input[type=search]").addClass("form-control wmi-input");
                    showLoader("spinnerArchivePopulationList");
                },
                success: function (data) {

                    let arrayOfObject = JSON.parse(dataList.otherData);

                     columnNames = Object.keys(arrayOfObject[0]);

                    for (var i in columnNames) {
                        columns.push({
                            data: columnNames[i],
                            title: columnNames[i]
                        });
                    }

                    hideLoader("spinnerArchivePopulationList");

                    //call tool tipster
                    renderToolTipster();

                    //show hide selected columns on pagination change
                    handleColumnsVisibilityOnPagination();

                },
                error: function (errorData) { }
            },
            "data": dataInJson,
            "columns": columns,

         
            "order": [0, "desc"]
        });
}

}