如何使用動態JSON數據加載jQuery.DataTables網格

Question

我正在嘗試將一些簡單的JSON數據加載到jQuery.DataTables（datatables.net）中，該網格正在按HTML中定義的方式顯示，但不會根據新數據進行更改。

我想念什么？ 有什么建議嗎？

HTML：

<table id="example" class="display" style="width:100%;">
<thead>
    <tr>
        <th>Id</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>0</td>
    </tr>
</tbody>

JavaScript ：（已加載jQuery和jQuery.DataTables）

$(document).ready(function () {
    $("#example").DataTable({
        data: [{ Id: "1" }, { Id: "2" }],
        columns: { data: "Id", title: "ID" }
    });
});

Answer 1

您的列數據應設置為Array。 像這樣

$(document).ready(function () {
    $("#example").DataTable({
        data: [{ Id: "1" }, { Id: "2" }],
        columns: [{ data: "Id", title: "ID" }]
    });
});

對於使用ajax的動態數據

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/objects.txt",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

JSON txt文件

{
  "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    }
  ]
}

這里更多細節

Answer 2

嘗試這個

  var options = {
        data: [{ Id: "1" }, { Id: "2" }],
        columns: { data: "Id", title: "ID" }
    }
   var dataTable =  $("#example").DataTable(options );

   // Reload and refresh
   dataTable.draw(); 

Answer 3

因此，我的用於注入JSON數據（或作為變量）的代碼很好，問題是在網格初始化之前我忘記添加的另一個網格單擊事件（不好的我）

$("#example " + "tbody").on("click", "tr", function () {
var data = table.row(this).data();
isDebug && console.log('You clicked on ' + data[0] + '\'s row');
isDebug && console.log(data);
});