JQuery数据表不显示在JSON对象中创建的数据

Question

我正在使用gentella管理模板中提供的数据表。

这是我正在使用的脚本

$("#datatable-buttons").DataTable({
        dom: "Bfrtip",
        buttons: [
                  {
                    extend: "copy",
                    className: "btn-sm"
                  },
                  {
                    extend: "csv",
                    className: "btn-sm"
                  },
                  {
                    extend: "excel",
                    className: "btn-sm"
                  },
                  {
                    extend: "pdfHtml5",
                    className: "btn-sm"
                  },
                  {
                    extend: "print",
                    className: "btn-sm"
                  },
                 ],
        "aadata": [
                {
                  "Name": "Tiger Nixon",
                  "Position": "System Architect",
                  "Office": "$320,800",
                  "Age": "2011/04/25",
                  "Start date": "Edinburgh",
                  "Salary": "5421"
                },
                {
                  "Name": "Garrett Winters",
                  "Position": "Accountant",
                  "Office": "$170,750",
                  "Age": "2011/07/25",
                  "Start date": "Tokyo",
                  "Salary": "8422"
                },
                {
                  "Name": "Ashton Cox",
                  "Position": "Junior Technical Author",
                  "Office": "$86,000",
                  "Age": "2009/01/12",
                  "Start date": "San Francisco",
                  "Salary": "1562"
                },
                {
                  "Name": "Cedric Kelly",
                  "Position": "Senior Javascript Developer",
                  "Office": "$433,060",
                  "Age": "2012/03/29",
                  "Start date": "Edinburgh",
                  "Salary": "6224"
                }
              ],
        responsive: true
      });

这是HTML代码

<table id="datatable-buttons" class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>

运行此代码后，我试图在表格中显示JSON数据，但它没有填充。可能是什么问题？

Answer 1

您需要为aoColumns选项设置aaData。

$("#datatable-buttons").DataTable({
  dom: "Bfrtip",
  buttons: [
      {
          extend: "copy",
          className: "btn-sm"
      },
      {
          extend: "csv",
          className: "btn-sm"
      },
      {
          extend: "excel",
          className: "btn-sm"
      },
      {
          extend: "pdfHtml5",
          className: "btn-sm"
      },
      {
          extend: "print",
          className: "btn-sm"
      },
  ],
  "aaData": [
      {
          "Name": "Tiger Nixon",
          "Position": "System Architect",
          "Office": "$320,800",
          "Age": "2011/04/25",
          "Start date": "Edinburgh",
          "Salary": "5421"
      },
      {
          "Name": "Garrett Winters",
          "Position": "Accountant",
          "Office": "$170,750",
          "Age": "2011/07/25",
          "Start date": "Tokyo",
          "Salary": "8422"
      },
      {
          "Name": "Ashton Cox",
          "Position": "Junior Technical Author",
          "Office": "$86,000",
          "Age": "2009/01/12",
          "Start date": "San Francisco",
          "Salary": "1562"
      },
      {
          "Name": "Cedric Kelly",
          "Position": "Senior Javascript Developer",
          "Office": "$433,060",
          "Age": "2012/03/29",
          "Start date": "Edinburgh",
          "Salary": "6224"
      }
  ],
  "aoColumns": [
      { "mData": "Name" },
      { "mData": "Position" },
      { "mData": "Office" },
      { "mData": "Age" },
      { "mData": "Start date" },
      { "mData": "Salary" }
  ],
  responsive: true
});

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


<table id="datatable-buttons" class="table table-striped table-bordered">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>