Jquery 数据表 - 表中没有可用数据

问题描述

我使用 .net core 开发了一个应用程序。我的要求之一是数据表。在我的控制器中，我正在调用 REST Api 服务并返回一个 Json 结果。在我的 html 表和对控制器的 AJAX 调用中，视图非常简单。执行应用程序后，我的数据表显示为“表中无可用数据”

                    <table id="datatable">
                    <thead class="thead-light">
                        <tr role="row">
                            <th class="table-column-pr-0 sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 44px;">
                                <div class="custom-control custom-checkBox">
                                    <input id="datatableCheckAll" type="checkBox" class="custom-control-input">
                                    <label class="custom-control-label" for="datatableCheckAll"></label>
                                </div>
                            </th>
                            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserID</th>
                            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserName</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 195px;">DepartmentID</th>
                        </tr>
                    </thead>
                    <tbody>


                    </tbody>
                   </table>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"> 
</script>
<script>
$(function () {
        $.ajax({
        type: "POST",url: "/ApplicationUsers/LoadData",data: '{}',contentType: "application/json; charset=utf-8",headers: { 'Access-Control-Allow-Origin': '*' },dataType: "json",success: function (response) {  
                OnSuccess(response);
            },failure: function (response) {
            alert(response.d);
        },error: function (response) {
            alert(response.d);
        }
    });
    });


    // INITIALIZATION OF DATATABLES
    // =======================================================
    function OnSuccess(response) {
        console.log(response);
        $.noConflict();
        $('#datatable').DataTable(
            {
                dom: 'Bfrtip',bLengthChange: true,lengthMenu: [[5,10,-1],[5,"All"]],bFilter: true,bSort: true,bPaginate: true,searching: false,data: response,columns: [
                    { 'data': 'userID',"defaultContent": "",},{ 'data': 'userName',{ 'data': 'departmentID',}]
            });
    };
 </script>








    public class ApplicationUsersController : Controller
    {
    [HttpGet]
    public ActionResult Users()
    {
        return View();
    }

    [HttpPost]
    public ActionResult LoadData()
    {
        var data = ClaimsService.GetUsers();
        return Json(new { data = data});
    }
    }

JSON 数据

{"data":{"result":[{"userID":322,"userName":"Ashnee","departmentID":3,"branchID":1,"name":"Ashnee Pillay                                     ","emailAddress":"[e-mail]","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":323,"userName":"BalanC","departmentID":15,"branchID":5,"name":"Balan Chetty                                      ","emailAddress":"[e-mail]",{"userID":328,"userName":"BrettL","departmentID":1,"name":"Brett Lange                                       ","emailAddress":"[e-mail]",{"userID":334,"userName":"CoenieB","departmentID":14,"branchID":4,"name":"Coenie De Beer                                    ","emailAddress":"[e-mail]",{"userID":337,"userName":"TraceyA","departmentID":61,"branchID":30,"name":"Tracey De Andrade                            ","emailAddress":"[e-mail]",{"userID":350,"userName":"HenryB","departmentID":18,"branchID":8,"name":"Henry Barber                                      ","emailAddress":"[e-mail]",{"userID":351,"userName":"HowardG","departmentID":6,"name":"Howard Gains                                      ","emailAddress":"[e-mail]",{"userID":354,"userName":"IreneK","departmentID":17,"branchID":7,"name":"Irene Koegelenberg                                ","emailAddress":"[e-mail]",{"userID":356,"userName":"JayM","departmentID":2,"name":"Jay Mahillal                                      ","emailAddress":"[e-mail]",{"userID":359,"userName":"TheshniR","departmentID":4,"name":"Theshni Reddy                               ","emailAddress":"[e-mail]",{"userID":363,"userName":"Mariov","name":"Mario vincent                                     ","emailAddress":"[e-mail]",{"userID":366,"userName":"Rehana","name":"Rehana Adams                                      ","emailAddress":"[e-mail]",{"userID":368,"userName":"FrancoisC","departmentID":19,"branchID":9,"name":"Francois Cloete                                   ","emailAddress":"[e-mail]",{"userID":369,"userName":"CharneW","departmentID":22,"branchID":10,"name":"Charne Wagner                                     ","emailAddress":"[e-mail]",{"userID":372,"userName":"Rajeshree","name":"Rajeshree Singh                                   ","emailAddress":"[e-mail]",{"userID":377,"userName":"SamanthaM","name":"Samantha Murugan                                  ","emailAddress":"[e-mail]",{"userID":381,"userName":"SueP","name":"Sue Pillay                                        ","emailAddress":"[e-mail]",{"userID":382,"userName":"Sunitha","name":"Sunitha Kandhai                                   ","emailAddress":"[e-mail]",{"userID":385,"userName":"TraceyL","departmentID":20,"branchID":12,"name":"Tracey Lambooy                                    ","emailAddress":"[e-mail]",{"userID":387,"userName":"Vinola","departmentID":80,"name":"Vinola Kalideen                                   ","emailAddress":"[e-mail]",{"userID":397,"userName":"MarioL","departmentID":5,"name":"Mario Luis","emailAddress":"[e-mail]",{"userID":403,"userName":"SteveJ","departmentID":9,"branchID":14,"name":"Steve Jarman","emailAddress":"[e-mail]",{"userID":404,"userName":"MarkN","name":"Mark Naicker","emailAddress":"[e-mail]",{"userID":406,"userName":"MosesQ","name":"MosesQwabe","emailAddress":"[e-mail]",{"userID":407,"userName":"Evonn","name":"Evonn Naicker","emailAddress":"[e-mail]",{"userID":417,"userName":"Brandon","name":"Brandon Booysen","emailAddress":"[e-mail]",{"userID":419,"userName":"SifisoD","name":"Sifiso Dlamini","emailAddress":"[e-mail]",{"userID":423,"userName":"Jnb.Workshop","name":"Jnb.Workshop","emailAddress":"[e-mail]",{"userID":425,"userName":"PrenishaS","name":"Prenisha Sami","emailAddress":"[e-mail]",{"userID":426,"userName":"Pzb.Operations","name":"Gift Kunene","emailAddress":"[e-mail]",{"userID":427,"userName":"SalomeM","name":"Salome Mokwele","emailAddress":"[e-mail]",{"userID":431,"userName":"GeorgeH","departmentID":12,"branchID":3,"name":"George Horn","emailAddress":"[e-mail]",{"userID":434,"userName":"NadineF","name":"Nadine Feldtmann","emailAddress":"[e-mail]",{"userID":435,"userName":"ThiroshanN","name":"Thiroshan Naicker","emailAddress":"[e-mail]",{"userID":442,"userName":"GeneN","name":"Gene Naidoo","emailAddress":"[e-mail]",{"userID":444,"userName":"Jnb.Boardroom","name":"Jnb.Boardroom","emailAddress":"[e-mail]",{"userID":447,"userName":"Mariob","departmentID":65,"branchID":37,"name":"Mario Botha","emailAddress":"[e-mail]",{"userID":449,"userName":"KureshaM","name":"Kuresha Moodley","emailAddress":"[e-mail]",{"userID":453,"userName":"SeanR","name":"Sean Raidoo","emailAddress":"[e-mail]",{"userID":459,"userName":"SalonaB","name":"Salona Balram","emailAddress":"[e-mail]",{"userID":460,"userName":"JohannesS","name":"Johannes Van Staden","emailAddress":"[e-mail]",{"userID":463,"userName":"Dannyg","name":"Danny Govender","emailAddress":"[e-mail]",{"userID":466,"userName":"Shaneilr","name":"Shaneil","emailAddress":"[e-mail]",{"userID":468,"userName":"BlessingM","name":"Blessing Mlimi","emailAddress":"[e-mail]",{"userID":477,"userName":"EnvorS","departmentID":13,"branchID":2,"name":"Envor Swart","emailAddress":" [e-mail]",{"userID":481,"userName":"FritzB","departmentID":59,"branchID":25,"name":"Fritz Beudeker","emailAddress":"[e-mail]",{"userID":483,"userName":"JuanP","name":"Juan Potgieter","emailAddress":"[e-mail]",{"userID":484,"userName":"NonhlanhlaMn","name":"Nonhlanhla Mnguni ","emailAddress":"[e-mail]",{"userID":488,"userName":"WinnieM","name":"Winnie Mbongo","emailAddress":"[e-mail]",{"userID":492,"userName":"JaendreS","departmentID":16,"branchID":6,"name":"Jaendre Serfontein","emailAddress":"[e-mail]",{"userID":497,"userName":"TshepoM","name":"Tshepo Mbele","emailAddress":"[e-mail]",{"userID":498,"userName":"ItumelengL","name":"Itumeleng Leso","emailAddress":"[e-mail]",{"userID":499,"userName":"Raynoldn","name":"Raynold Ngwane","emailAddress":"[e-mail]",{"userID":504,"userName":"JarredM","departmentID":58,"branchID":24,"name":"Jarred Metzler","emailAddress":"[e-mail]",{"userID":511,"userName":"MagdaG","name":"Magda Greeff","emailAddress":"[e-mail]",{"userID":513,"userName":"WinstonB","departmentID":55,"branchID":28,"name":"Winston Blaine","emailAddress":"[e-mail]",{"userID":517,"userName":"ByronV","departmentID":27,"branchID":17,"name":"Byron Vickers ","emailAddress":"[e-mail]",{"userID":521,"userName":"GertH","branchID":48,"name":"Gert Hael ","emailAddress":"[e-mail]",{"userID":523,"userName":"Nomsat","departmentID":88,"branchID":45,"name":"Nomsa Tshabalala","emailAddress":"[e-mail]",{"userID":527,"userName":"AndrewJ","name":"Andrew Julius","emailAddress":"[e-mail]",{"userID":528,"userName":"LeeH","name":"Lee HAmberger","emailAddress":"[e-mail]",{"userID":530,"userName":"KevinS","name":"Kevin Smith","emailAddress":"[e-mail]",{"userID":532,"userName":"PhumeleleM","departmentID":63,"branchID":33,"name":"Phumelele","emailAddress":"[e-mail]",{"userID":533,"userName":"GiftK","emailAddress":"[e-mail]",{"userID":534,"userName":"MiguelF","name":"Miguel","emailAddress":"[e-mail]",{"userID":535,"userName":"BilkisA","name":"Bilkis Ahmod","emailAddress":"[e-mail]",{"userID":539,"userName":"HermanK","departmentID":24,"branchID":15,"name":"Herman Kleynhans","emailAddress":"[e-mail]",{"userID":543,"userName":"SomP","name":"Som Pillay","emailAddress":"[e-mail]",{"userID":544,"userName":"AndriesG","departmentID":73,"branchID":42,"name":"Andries Greyling","emailAddress":"[e-mail]","statusDate":"0001-01-01T00:00:00"}],"id":1601,"exception":null,"status":5,"isCanceled":false,"isCompleted":true,"isCompletedSuccessfully":true,"creationoptions":0,"asyncState":null,"isFaulted":false}}

解决方法

您的 JSON 数据具有以下总体结构：

{
  "data": {
    "result": [
      {...},{...},...
      {...}
    ],"id": 1601,"exception": null,...
    "isFaulted": false
  }
}

"result": [ ] 数组是您查看填充表格所需数据的位置。该数组中的每个 {...} 对象代表一行表格数据。

因此，您必须将 DataTables 指向该数组，以便它知道在 JSON 中的何处查找将显示的数据。 DataTables 将自动处理该数组中每个项目的迭代。

这就是您需要更改此设置的原因：

data: response,

为此：

data: response.data.result,

在您的 DataTable 定义中。此处，response 是包含整体响应 JSON 的变量的名称。而 data.result 是 JSON 中存储表数据的特定位置。