尝试将JSON数据插入到数据表部件

Question

我有一个Java Web项目，其中有一个GET端点用于检索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": "" 
    }); 

Answer 1

这应该为服务器端工作：

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

Answer 2

您可以从任意数据源中读取。查看下面的文档（找到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).