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

Question

我有一个 Java Web 项目，其中有一个 GET 端点，我正在点击该端点来检索 JSON 数据。 Firebug 显示我正在获取表单中的 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 数据源。

另外，可以将 sAjaxDataProp 设置为空 字符串，这导致 DataTables 将给定的数据源视为 表数据数组（而不是作为对象的属性）。