Заполнение объектов JSON в DataTables

Question

Я использую DataTables 1.10.x и хотел бы заполнить данные в моей таблице с помощью объектов JSON.

$(document).ready(function() { 
    $('#diagtable').dataTable({ 
     "ajax": '/api/v1/diag/1/', 
     "columns": [ 
      { "date": "date" }, 
      { "diagnosis": "diagnosis" } 
     ], 
     dom: 'T<"clear">lfrtip', 
    }); 
}); 

Я понимаю, что { "date": "date" }, не выглядит хорошо, но я не уверен, что еще использовать между первой кавычки.

Мой стол опускается ниже:

<table id="diagtable" class="table table-striped table-bordered"> 
    <thead> 
    <tr> 
     <th>Date</th> 
     <th>Diagnosis</th> 
     <th>&nbsp;</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

Мой AJAX вызов возвращает следующий JSON:

[ 
    { 
     "date":"2010-03-20", 
     "diagnosis":"Test1" 
    }, 
    { 
     "date":"2015-03-21", 
     "diagnosis":"Test2" 
    } 
] 

я вижу правильный вызов AJAX производится DataTables (HTTP 200), но таблица говорит "загрузка ...".

Я попытался поиграть с нижеследующим, но до сих пор данные не заполняются в моем столе.

"aoColumns": [ 
    { "mData": "date" }, 
    { "mData": "diagnosis" } 
] 

В documentation показано использование:

"columns": [ 
     { "data": "name" }, 
     ... 

Но у меня нет этого "данные" или подобное в моей JSON. Я тоже не могу изменить свои JSON.

Любая идея, что я делаю неправильно?

Answer 1

Ваши возвращенные данные в формате JSON отличаются от формата по умолчанию, ожидаемого DataTables 1.10.x, см. Пример ajax.dataSrc или Ajax data source (objects).

Поскольку вы упомянули, что вы не можете изменить структуру JSON, решение изменить dataSrc свойства см ниже

$(document).ready(function() { 
    $('#diagtable').dataTable({ 
     "ajax": { 
      "url": '/api/v1/diag/1/', 
      // Get JSON data from a plain array 
      // rather than an array in an object 
      "dataSrc": "" 
     }, 
     "columns": [ 
      { "data": "date" }, 
      { "data": "diagnosis" } 
     ], 
     dom: 'T<"clear">lfrtip', 
    }); 
});