DataTable с данными JSON - PullRequest
Новая
       13

DataTable с данными JSON

0 голосов
/ 25 июня 2018

Я пытаюсь создать таблицу, используя DataTable, но с трудом заставляю DataTable загружаться с объектом JSON. 

function getData() {
var request = new XMLHttpRequest();
var json = "link-to-my-json-object";
// Get JSON file
request.onload = function() {
  if ( request.readyState === 4 && request.status === 200 ) {
    var JSONObject = JSON.parse(request.responseText);
    createTable(JSONObject);
  } else if(request.status == 400) { console.log("Error", request.status);}
};
request.open("GET", json, true);
request.send();
}

Запрос файла JSON с помощью запроса XMLHttpRequest ().

короткий образец объекта JSON: 

{
"meta": {
"version": 1,
"type": "test"
},
"reports": [
{
  "report-metadata": {
    "timestamp": 1528235303.721987,
    "from-ip": "0.0.0.0"
  }, 
//and so on...

В настоящее время только пытается отобразить часть meta в таблице DataTable: 

function createTable(jsonData){ 
 $(document).ready(function(){
  $('#table').dataTable({
    data: jsonData,
    columns: [
      { data: 'meta.type' },
      { data: 'meta.version' }
    ]
  });
 });
}

index.html part: 

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

Только получение Нет доступных данных в таблице при запуске, и я явно что-то упускаю.

1 Ответ

0 голосов
/ 25 июня 2018

Атрибут «data» для инициализации вашей таблицы данных ожидает список (каждый элемент представляет строку). Измените свой ответ ajax, чтобы каждая строка была элементом в списке jsonData. Я также добавил кавычки вокруг всех опций JSON. 

var jsonData = [
    { "meta": { "version": 1, "type": "test" } }
];

$('#table').DataTable({
    "data": jsonData,
    "columns": [
      { "data": "meta.type" },
      { "data": "meta.version" }
    ]
});

https://datatables.net/reference/option/data

Поскольку вы хотите загружать свои данные через ajax, вы должны взглянуть на опции ajax, встроенные в API DataTables. https://datatables.net/manual/ajax

...