使用GET请求中的JSON数组填充数据表 [英] Populating Datatables with JSON array from GET request
问题描述
我知道有很多关于使用数据填充Jquery Datatables 的答案和教程,但我总是这样做获得以下异常的重点:
I know that there has been many answers and tutorials about populating Jquery Datatables with data but I always get to the point of getting the following exception:
未捕获TypeError:无法读取未定义属性'length'
Uncaught TypeError: Cannot read property 'length' of undefined
我主要是一个后端开发人员,几乎没有编写客户端的经验,所以我想问你在下面的例子中我做错了什么。
I, being mainly a backend developer, have little to no experience with writing client so I would like to ask you about what I am doing wrong in the following example.
我有一台本地运行的服务器暴露一个端点 / destination
,它以这种格式响应一个JSON字符串:
I have a server running locally exposing an endpoint /destination
which responds with a JSON string in this format:
[{
"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插件在表格中显示这些数据。这是表格代码:
I would like to display these data in a table using the Datatables plugin. This is the table code:
<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"
}]
});
});
如上所述,我得到未捕获的TypeError:无法读取属性'长度'未定义
。感谢任何帮助。
As specified above, I am getting the Uncaught TypeError: Cannot read property 'length' of undefined
. Any help is appreciated.
编辑:如果我请求数据然后将数据传递到数据表,它可以工作,如下所示:
It works if I do a request for the data and then pass the data to the datatables as follows:
$.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"
} ]
})
}
我原本希望数据表能够将这个功能烘焙...
I was expecting the datatables to have this functionality baked in...
推荐答案
将 dataSrc
设置为''
。正如 文档 所述:
Set dataSrc
to ''
. As the documentation states :
通过Ajax从文件中获取JSON数据,使用dataSrc 从
普通数组中读取数据 而不是对象中的数组:
Get JSON data from a file via Ajax, using dataSrc to read data from a plain array rather than an array in an object:
$(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/
and your code works -> http://jsfiddle.net/nzn5m6vL/
这篇关于使用GET请求中的JSON数组填充数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!