Как загрузить сетку jQuery.DataTables с динамическими данными JSON

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

Попробуйте это

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

   // Reload and refresh
   dataTable.draw(); 

Answer 2

Итак, мой код для ввода данных 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);
});

Answer 3

Ваши данные столбца должны быть установлены в массив. Как то так

$(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

{
  "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"
    }
  ]
}

Подробнее Здесь