Заполнение Datatables массивом JSON из запроса GET
Я знаю, что было много ответов и учебников о заполнении Jquery Datatables С данными, но я всегда добираюсь до точки получения следующего исключения:
Uncaught TypeError: не удается прочитать свойство "длина" неопределенного
Я, будучи в основном backend-разработчика, практически не имеют опыта написания клиента, поэтому я хотел бы спросить вас о том, что я делаю неправильно в следующем примере.
I на сервере локально выставляя конечную точку /destination
который отвечает строкой JSON в этом формате:
[{
"id": 1,
"name": "London Heathrow",
"lat": 51.470022,
"lon": -0.454295
}, {
"id": 2,
"name": "London Gatwick",
"lat": 51.153662,
"lon": -0.182063
}, {
"id": 3,
"name": "Brussels Airport",
"lat": 50.900999,
"lon": 4.485574
}, {
"id": 4,
"name": "Moscow Vnukovo",
"lat": 55.601099,
"lon": 37.266456
}]
Я хотел бы отобразить эти данные в таблице с помощью плагина Datatables. Это код таблицы:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Lattitude</th>
<th>Longitude</th>
</tr>
</thead>
</table>
и скрипт для заполнения это:
$(document).ready(function() {
$('#example').DataTable({
"processing" : true,
"ajax" : {
"url" : ".../destination",
"type" : "GET"
},
"columns" : [ {
"data" : "id"
}, {
"data" : "name"
}, {
"data" : "lat"
}, {
"data" : "lon"
}]
});
});
как указано выше, я получаю Uncaught TypeError: Cannot read property 'length' of undefined
. Любая помощь приветствуется.
EDIT: он работает, если я делаю запрос на данные, а затем передаю данные в datatables как следует:
$.ajax({
url : '/AOS-project/destination',
type : 'GET',
dataType : 'json',
success : function(data) {
assignToEventsColumns(data);
}
});
function assignToEventsColumns(data) {
var table = $('#example').dataTable({
"bAutoWidth" : false,
"aaData" : data,
"columns" : [ {
"data" : "id"
}, {
"data" : "name"
}, {
"data" : "lat"
}, {
"data" : "lon"
} ]
})
}
Я ожидал, что datatables будут иметь эту функциональность...
2 ответов
Set dataSrc
to ''
. Как документация гласит :
получить данные JSON из файла через Ajax, используя dataSrc для чтения данных из простой массив вместо массива в объекте:
$(document).ready(function() {
$('#example').DataTable({
"processing" : true,
"ajax" : {
"url" : "https://api.myjson.com/bins/14t4g",
dataSrc : ''
},
"columns" : [ {
"data" : "id"
}, {
"data" : "name"
}, {
"data" : "lat"
}, {
"data" : "lon"
}]
});
});
и ваш код работает -> http://jsfiddle.net/nzn5m6vL/
Если вы код, работающий с жестким json, чем попробуйте
$(document).ready(function() {
$('#example').DataTable({
processing : true,
ajax: {
url: "/api/venues",
"type" : "GET"
dataSrc: function (json) {
var obj = JSON.parse(json);
console.log(obj);
return obj;
}
},
columns : [ {
data : "id"
}, {
data : "name"
}, {
data : "lat"
}, {
data : "lon"
}]
});
});