javascript - ajax 源数据表不显示任何数据，也没有显示错误消息

Question

jquery调用datatable的代码如下

$(document).ready(function () {
    $("#tableUserList").DataTable({
        "ajax": {
            "url": "AdminHome.aspx/getUsersForTable",
            "dataType": "json",
            "cache": false,
            "contentType": "application/json; charset=utf-8",
            "dataSrc": "d",
            "type": "GET"
        },
        "columns": [
            {"data": "d[id]"},
            {"data": "d[username]"},
            {"data": "d[user_type]"},
            {"data": "d[first_name]"},
            {"data": "d[last_name]"},
            {"data": "d[address]"},
            {"data": "d[email]"},
            {"data": "d[phone_no]"},
        ]
    });
});

当我检查控制台时，没有显示任何错误，但也没有任何数据加载到数据表中。我的HTML表格如下

<table id="tableUserList" class="table table-hover">
    <thead>
        <tr>
            <th>UserID</th>
            <th>Username</th>
            <th>UserType</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Address</th>
            <th>Email</th>
            <th>Contact</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>UserId</td>
            <td>Username</td>
            <td>UserType</td>
            <td>FirstName</td>
            <td>LastName</td>
            <td>Address</td>
            <td>Email</td>
            <td>Contact</td>
        </tr>
    </tbody>
</table>

我的 ajax 调用以这种格式返回数据。为简单起见，显示单行返回数据

{
   "d":[
      {
         "id":1,
         "username":"admin",
         "first_name":"admin",
         "last_name":"admin",
         "phone_no":"1234567210",
         "address":"abc",
         "email":"admin@gmail.com",
         "user_type":"admin"
      },
      ...
   ]
}

数据正确返回意味着我在将接收到的数据绑定(bind)到 DataTable 时做错了。请提出解决方案。

Answer 1

我认为，如果您修复传递给 "columns": [{"data": "d[id]"}, ... 的内容，您的代码就没问题了。在 data 属性中，您将传递来自数据对象的 name of property 因此将其更改为 "columns": [{"data": "id"}, ... 并且您还可以在传递 title 属性时指定此列的标题。

我用 javascript 源数据给你一个简单的例子，但它与 ajax 源数据类似。

$(document).ready(function () {
    var data = {
      "d":[
        {
           "id":1,
           "username":"admin",
           "first_name":"admin",
           "last_name":"admin",
           "phone_no":"1234567210",
           "address":"abc",
           "email":"admin@gmail.com",
           "user_type":"admin"
        },
        {
           "id":2,
           "username":"user 1",
           "first_name":"user",
           "last_name":"first",
           "phone_no":"1234567210",
           "address":"address",
           "email":"user@gmail.com",
           "user_type":"user"
        }
      ]
    };
    
    $("#tableUserList").DataTable({
        "data": data.d,
        "columns": [
            {"data": "id", title: "ID"},
            {"data": "username", title: "Username"},
            {"data": "first_name", title: "First Name"},
            {"data": "last_name", title: "Last Name"},
            {"data": "phone_no", title: "Phone"},
            {"data": "address", title: "Address"},
            {"data": "email", title: "Email"},
            {"data": "user_type", title: "Type"}
        ]
    });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

<table id="tableUserList" class="table table-hover">
</table>