我想使用 JSON 对象构建数据表，但收到以下错误:
之后，浏览器显示:
我花了几个小时尝试了警告消息中的网址所说的所有内容..但我没有弄清楚。
JSON 对象由名为 MyJson 的 servlet 检索。该 JSon 具有以下外观。
{
"data":[
["NAME: Name1","DIRECTION: Salida","CHARGED: 15","AFFORDED: 15"],
["NAME: Name2","DIRECTION: Salida","CHARGED: 4","AFFORDED: 4"],
["NAME: Name3","DIRECTION: Entrada","CHARGED: 4","AFFORDED: 4"],
["NAME: Name4","DIRECTION: Salida","CHARGED: 1","AFFORDED: 0"],
["NAME: Name5","DIRECTION: Entrada","CHARGED: 15","AFFORDED: 15"],
["NAME: Name6","DIRECTION: Entrada","CHARGED: 10","AFFORDED: 10"],
["NAME: Name7","DIRECTION: Entrada","CHARGED: 15","AFFORDED: 15"],
["NAME: Name8","DIRECTION: Entrada","CHARGED: 3","AFFORDED: 3"],
["NAME: Name9","DIRECTION: Entrada","CHARGED: 15","AFFORDED: 15"]
]
}
这是我的 JavaScript
<script>
$(document).ready(function() {
var tableEntityList = $('#testable').DataTable({
"processing": true,
"scrollY":"500px",
"scrollCollapse": true,
"paging":false,
"serverSide":true,
"ajax":"./MyJson",
"columns": [
{ "data":'NAME' },
{ "data":'DIRECTION' },
{ "data":'CHARGED' },
{ "data":'AFFORDED' }
]
});
})
</script>
<body>
<table class="display responsive nowrap" id="testable" cellspacing="0">
<thead>
<th>NAME</th>
<th>DIRECTION</th>
<th>CHARGED</th>
<th>AFFORDED</th>
</thead>
<tbody>
</tbody>
</table>
你能告诉我我做错了什么吗？
谢谢。
最佳答案
您需要在将数据传递到 DataTables 之前对其进行处理，您可以在 dataSrc 内执行此操作。检查这个JSFiddle :
let jsonData = {
"data": [
["NAME: Name1", "DIRECTION: Salida", "CHARGED: 15", "AFFORDED: 15"],
["NAME: Name2", "DIRECTION: Salida", "CHARGED: 4", "AFFORDED: 4"],
["NAME: Name3", "DIRECTION: Entrada", "CHARGED: 4", "AFFORDED: 4"],
["NAME: Name4", "DIRECTION: Salida", "CHARGED: 1", "AFFORDED: 0"],
["NAME: Name5", "DIRECTION: Entrada", "CHARGED: 15", "AFFORDED: 15"],
["NAME: Name6", "DIRECTION: Entrada", "CHARGED: 10", "AFFORDED: 10"],
["NAME: Name7", "DIRECTION: Entrada", "CHARGED: 15", "AFFORDED: 15"],
["NAME: Name8", "DIRECTION: Entrada", "CHARGED: 3", "AFFORDED: 3"],
["NAME: Name9", "DIRECTION: Entrada", "CHARGED: 15", "AFFORDED: 15"]
]
};
$(document).ready(function() {
var tableEntityList = $('#testable').DataTable({
"processing": true,
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"ajax": {
type: 'POST',
dataType: 'json',
url: '/echo/json/',
data: {
json: JSON.stringify(jsonData)
},
dataSrc: function(json) {
var properData = [];
$.each(json.data, function(k, v) {
var returnObject = {};
$.each(v, function(a, b) {
var elArr = b.split(":");
returnObject[elArr[0].trim()] = elArr[1].trim()
});
properData.push(returnObject)
});
return properData;
}
},
"columns": [{
"data": 'NAME'
}, {
"data": 'DIRECTION'
}, {
"data": 'CHARGED'
}, {
"data": 'AFFORDED'
}]
});
});
请注意，serverSide 将无法工作!
关于javascript - 将 Json 对象加载到数据表中(ajax)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42330771/