我正在尝试将数据从AJAX源获取到DataTables中，如下所示：
$('#DT').DataTable( {
"paging": false,
"processing": true,
"info": false,
"ajax": 'http://localhost:5000/get_data'
} );
当服务器以以下格式提供数据时，它可以正常工作：
{
"data": [
[
1,
"0FL0BW1MA",
"2018-03-24 15:00",
"Lisbon ,Lisboa ,Portugal",
"CMA CGM GEORG FORSTER",
"ADALV",
"2018-05-08 02:00",
"ADENC"
]
]
}
但是实际的服务器以JSON key：value格式发送响应，如下所示：
{
"data": [
{
"containers": 4,
"destination_port": "2018-05-08 02:00",
"eta": "CMA CGM GEORG FORSTER",
"etd": "2018-03-24 15:00",
"loading_port": "Lisbon ,Lisboa ,Portugal",
"vessels": "0FL0BW1MA"
}
]
}
所以，我的问题是如何将实际的JSON数据加载到数据表中？
您未提供#DT表的内容。但是我的猜测是您已经在其中填充了TH吗？
如果是这种情况，您应该可以执行以下操作
// This is the data you get from the server
var strData = {
"data": [
{
"containers": 4,
"destination_port": "2018-05-08 02:00",
"eta": "CMA CGM GEORG FORSTER",
"etd": "2018-03-24 15:00",
"loading_port": "Lisbon ,Lisboa ,Portugal",
"vessels": "0FL0BW1MA"
}
]
}
// Creating the new array according to your specifications
var arrData = [];
for (var key in strData.data) {
if (!strData.data.hasOwnProperty(key)) continue;
var obj = strData.data[key];
var tmpArr = []
for (var prop in obj) {
if(!obj.hasOwnProperty(prop)) continue;
tmpArr.push(obj[prop]);
}
arrData.push(tmpArr);
}
$(document).ready( function () {
$('#table_id').dataTable( {
"data": arrData,
} );
} );<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>
containers
</th>
<th>
destination_port
</th>
<th>
eta
</th>
<th>
etd
</th>
<th>
loading_port
</th>
<th>
vessels
</th>
</tr>
</thead>
</table>但是，您可以为数据表提供一列列，而不是在html中定义它们，而我可能会这样做。我认为这会使事情变得更加动态。
---在DataTables中使用Ajax函数时更新了代码
首先，我们需要制作一个用于转换json的函数
function convertArray(json) {
var arrData = [];
for (var key in json.data) {
if (!json.data.hasOwnProperty(key)) continue;
var obj = json.data[key];
var tmpArr = []
for (var prop in obj) {
if(!obj.hasOwnProperty(prop)) continue;
tmpArr.push(obj[prop]);
}
arrData.push(tmpArr);
}
return arrData;
}
我以前从未使用过DataTables，但是它们的文档指出，可以使用dataSrc传递自定义函数。让我们尝试像这样使用它
$('#DT').DataTable( {
"paging": false,
"processing": true,
"info": false,
"ajax": {
"url": "http://localhost:5000/get_data",
"dataSrc": function ( json ) {
return convertArray(json);
}
}
} );
这应该将json响应传递给我们的函数并转换数据。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句