加載JSON對象到數據表（阿賈克斯）

我想使用一個JSON對象建立一個數據表，但我收到以下錯誤：加載JSON對象到數據表（阿賈克斯）

後，瀏覽器顯示：

我試圖通過小時everthing在警告消息中的網址說..但我沒有弄清楚。

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>

你能告訴我什麼我做錯了什麼？

謝謝。

來源

2017-02-19 Lev

在將數據傳遞給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都不行！

來源

2017-02-20 08:04:01 annoyingmouse

謝謝。它解決了！ – Lev

如果使用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} 
];

檢查this fiddle

在你的情況想要只有沒有字段名稱的數據，因爲你正在使用嵌入式數組，你應該有這樣的東西：

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，以便爲每個數組項索引直接設置數據標題。檢查this fiddle

正如您在數據中包含字段名稱。最好的做法是修改你的JSON輸入源以返回可直接使用的東西。如果你不能這樣做，你可以修改你收到的數據並重新組織它，方法是刪除嵌入的字段名稱，然後用新的修改過的輸入初始化數據表。

來源

2017-02-19 19:11:13

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' } 
     ] 
    });

來源

2017-02-20 19:02:04 Lev

加載JSON對象到數據表（阿賈克斯）

回答

相關問題