javascript - 接收 JSON 格式的正确数据但无法将其绑定(bind)到 jquery 数据表

Question

我有 $.ajax 以 JSON 格式获取数据。但我无法使用 jquery 的数据表将它绑定(bind)到我的表。 js代码如下

$(document).ready(function () {
$.ajax({
    type: "POST",
    url: "Result.aspx/getUsers",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data.d);
        var dataParsed = $.parseJSON(data.d);
        console.log(dataParsed);
        $('#myTable').DataTable({
            "aadData": data.d,
            "columns": [
        { "data": "id" },
        { "data": "username" },
        { "data": "first_name" },
        { "data": "last_name" },
        { "data": "phone_no" },
        { "data": "address" },
        { "data": "email" },
        { "data": "user_type" },
        ]
        });
      }
    });
 });

控制台中没有显示任何错误，但数据也没有绑定(bind)到我的表。 html代码如下:

<table id="myTable">
<thead>
    <tr>
        <td>UserId</td>
        <td>UserName</td>
        <td>FirstName</td>
        <td>LastName</td>
        <td>PhoneNumber</td>
        <td>Address</td>
        <td>EmailId</td>
        <td>UserType</td>
    </tr>
</thead>

请给我建议任何解决方案以及发生这种情况的原因

Answer 1

您正在解析 json 数据并在变量中赋值，但没有在 Datatable 中使用它，所以请使用，

"aaData": dataParsed, // its aaData not aadData

代替

"aadData": data.d,

您有另一个拼写错误(可能是)它是 aaData 但您使用的是 aadData。您还需要解析您的 JSON 并需要制作一个数据数组，例如，

var dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "$170,750"],
  ["Ashton Cox", "Junior Technical Author", "San Francisco", "$86,000"],
  ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
  ["Airi Satou", "Accountant", "Tokyo", "$162,700"],
  ["Brielle Williamson", "Integration Specialist", "New York", "$372,000"]
];

$(document).ready(function() {
  $('#example').DataTable({
    data: dataSet,
    columns: [{
        title: "Name"
      },
      {
        title: "Position"
      },
      {
        title: "Office"
      },
      {
        title: "Salary"
      }
    ]
  });
});

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

<table id="example" class="display" width="100%"></table>