將Json對象加載到datatable（ajax）
[英]Loading Json object into datatable (ajax)
問題描述
我想使用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>
你能告訴我我做錯了什么嗎？
謝謝。
3 個解決方案
解決方案1
0 2017-02-19 19:11:13
如果使用columns.data ，則意味着您的JSON數組應該已經使用相應的字段名稱NAME ， DIRECTION ， CHARGED和AFFORDED映射了字段，如下所示：
var dataSet = [
{ "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}
];
檢查這個小提琴
在您的情況下，您希望只使用沒有字段名稱的數據，因為您使用的是嵌入式數組，您應該具有以下內容：
var dataSet = [
["Name1", "Salida", "15", "15"],
["Name2", "Salida", "4", "4"],
["Name3", "Entrada", "4", "4"],
["Name4", "Salida", "1", "0"],
["Name5", "Entrada", "15", "15"],
["Name6", "Entrada", "10", "10"],
["Name7", "Entrada", "15", "15"],
["Name8", "Entrada", "3", "3"],
["Name9", "Entrada", "15", "15"]
];
您可以更改columns.data到column.title直接為每個數組索引項設置數據稱號。 檢查這個小提琴
因為您在數據中包含了字段名稱。 最好的方法是修改JSON輸入源以返回可直接使用的內容。 如果您不能這樣做，您可以修改收到的數據並通過刪除嵌入的字段名稱重新組織它，然后使用新修改的輸入初始化數據表。
解決方案2
0 已采納 2017-02-20 08:04:01
在將數據傳遞給DataTable之前，您需要先處理數據，然后才能在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不起作用！
解決方案3
0 2017-02-20 19:02:04
annoyingmouse方法解決了我的問題。
我的最后一個電話是：
var tableEntityList = $('#testable').DataTable({
"processing": true,
"scrollY":"500px",
"scrollCollapse": true,
"paging":false,
"serverSide":true,
"ajax":{
url:"./MyJson",
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' }
]
});
AJAX未加載JSON對象
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.