AJAX源的数据表不显示任何数据和没有错误消息被显示

Question

在jquery的数据表中调用的代码是如下

$(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调用返回的数据format.Showing返回的数据的一个单独的行，简单

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

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

Answer 1

我认为你的代码会没问题，如果你修复你传递给"columns": [{"data": "d[id]"}, ...的东西。在数据财产你会通过财产的名称从数据对象所以改变它像"columns": [{"data": "id"}, ...那里，你也可以在传递标题属性时指定此列的标题。

我给你一个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>