嘗試將JSON數據插入到數據表部件

我有一個Java Web項目，其中有一個GET端點用於檢索JSON數據。螢火顯示了我得到的JSON數據的形式嘗試將JSON數據插入到數據表部件

[{"id":7,"serial":"7bc530","randomDouble":0.0,"randomDouble2":0.0,"randomDouble3":0.0,"date":1352228474000,"removed":null}, 
{"id":8,"serial":"4a18d27","randomDouble":0.0,"randomDouble2":0.0,"randomDouble3":0.0,"date":1352228474000,"removed":null}, 
{"id":9,"serial":"f30ef","randomDouble":0.0,"randomDouble2":0.0,"randomDouble3":0.0,"date":1352228474000,"removed":null}, 
{"id":10,"serial":"9e6d","randomDouble":0.0,"randomDouble2":0.0,"randomDouble3":0.0,"date":1352228474000,"removed":null}, 
{"id":11,"serial":"4d8665a3","randomDouble":0.0,"randomDouble2":0.0,"randomDouble3":0.0,"date":1352228474000,"removed":null}, 
{"id":12,"serial":"4fe1457","randomDouble":0.0,"randomDouble2":0.0,"randomDouble3":0.0,"date":1352228474000,"removed":null}]

在HTML方面我都這樣了，

<table id="table_id"> 
    <thead> 
     <tr> 
     <th>id</th> 
     <th>serial</th> 
     <th>randomDouble</th> 
     <th>randomDouble2</th> 
     <th>randomDouble3</th> 
     <th>date</th> 
     <th>removed</th> 
     </tr> 
</thead> 
<tbody> 
</tbody> 
</table>

以下是我對JavaScript的一面，我發現了另一篇文章從別人上這裏有適合他們的格式。

$(document).ready(function() { 

    var Table = $("#table_id").dataTable({ 
     "bFilter":false, 
     "bPaginate":false, 
     "bProcessing": true, 
     "bServerSide":true, 
     "bInfo":false, 
     "sAjaxSource": ApiUrl(), 
     "fnServerData": function (sSource, aoData, fnCallback){ 
      $.ajax({ 
      "dataType": 'json', 
       "type": "GET", 
       "url": sSource, 
       "data": aoData, 
       "success": fnCallback 
      }); 
     } 
    });

該表正在顯示列，但它沒有拉入數據。正如我所說的，我確實證實JSON數據通過Firebug發送到網頁 - 通過這個GET請求。

我發現數據表是非常混亂，我不能讓這個JSON來真正填充...

任何援助將非常感激。

編輯：

我想這一點，

var Table = $("#table_id").dataTable({ 
     "bFilter":false, 
     "bPaginate":false, 
     "bProcessing": true, 
     "bServerSide":true, 
     "bInfo":false, 
     "sAjaxSource": ApiUrl(), 
     "sAjaxDataProp": "" 
    });

來源

2012-11-06 envinyater

您可以使用「sAjaxSource」：把它指向一些的servlet/PHP將發送json數據... – Daniel

問題在於DataTables需要一個帶有數據源的名爲「aaData」的數組。我無法修改進入的JSON。 – envinyater

比尋找一種方法來包裝並將其設置爲aaData並將其作爲「文本文件」源傳遞給datables構造函數 – Daniel

這應該爲服務器端工作：

var Table = $("#table_id").dataTable({ 
    "bFilter":false, 
    "bPaginate":false, 
    "bProcessing": true, 
    "bServerSide":true, 
    "bInfo":false, 
    "aoColumns": [ 
    { "mData": "id" }, 
    { "mData": "serial" }, 
    { "mData": "randomDouble" }, 
    { "mData": "randomDouble2" }, 
    { "mData": "randomDouble3" }, 
    { "mData": "date" }, 
    { "mData": "removed" } 

    ], 
    "sAjaxSource": "url", 
    "fnServerData": function (sSource, aoData, fnCallback) { 
    $.getJSON(sSource, aoData, function (json) { 
     map = {} 
     map["aaData"] = json 
     fnCallback(map) 
    }); 
} 
});

更新關於最後的評論：

"fnServerData": function (sSource, aoData, fnCallback) { 
    $.getJSON(sSource, aoData, function (json) { 
     $.getJSON('second_json_url', function(secondjson) { 
      $.each(secondjson, function(index, object) { 
       json[index].serial = secondjson[index].name 
      }) 
      map = {} 
      map["aaData"] = json 
      fnCallback(map) 
     }) 
    }); 
}

來源

2012-11-06 21:25:37 Smiter

我可能走這條路。有一件事我想做，我想我可以在你的實施中做到這一點。我返回的json（我上面有）包含元素「serial」。我有另一個數組有一個元素名稱「串行」，該數組有一個元素「名稱」。我需要弄清楚如何從其他數組中引入「名稱」，並將其替換爲此處的序列。思考？ – envinyater

你的意思是你想加載第一個json並將串行列中的值替換爲新的json的值？ – Smiter

是的，這正是我想要做的，如果可能的話。 – envinyater

您可以從任意數據源中讀取。查看下面的文檔（找到here）。這適用於服務器端處理和ajax數據源。

Additionally, it is possible to set sAjaxDataProp to be an empty string, which results in DataTables treating the given data source as the table data array (rather than as property of an object).

來源

2012-11-06 20:29:36 barry

我剛剛嘗試過，並未填充數據。 Firebug控制檯在Jquery.dataTables.js =/ – envinyater

中有一個「TypeError：aData is undefined」您將無法使用bServerSide，除非您實現服務器端協議http://datatables.net/usage/server-side。你是否試圖實現分頁/排序/過濾？ – barry

我不是。我刪除了bServerSide，該錯誤消失了。不幸的是，我得到了一個新的。彈出一個彈出窗口並顯示「DataTables warning（table id ='table_id'）：從第0行的數據源請求未知參數'0' – envinyater

嘗試將JSON數據插入到數據表部件

回答

相關問題