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>