Javascript 尝试将JSON数据插入datatable小部件

我有一个JavaWeb项目，其中有一个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>

该表正在显示列，但没有拉入数据。正如我所说，我确实验证了JSON数据是通过Firebug发送到网页的——通过它发出的GET请求

我发现datatables非常混乱，我无法让这个JSON实际填充

如蒙协助，将不胜感激

编辑：

我试过这个

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

---

您可以从任意数据源读取数据。查看下面的文档（已找到）。这适用于服务器端处理和ajax数据源

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

---

这应该适用于服务器端：

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

---

您可以使用“sAjaxSource”：将其指向将发送json数据的某个servlet/php……问题是DataTables需要一个具有名为“aaData”的数组的对象作为数据源。我无法修改即将出现的JSON。除了寻找一种方法将其包装并设置为aaData，然后将其作为“文本文件”源传递给datables构造函数之外，我只是尝试了一下，但它没有填充数据。Firebug控制台在Jquery.dataTables.js=/中有一个“TypeError:aData未定义”，除非您实现服务器端协议，否则您将无法使用BServer端。你想实现分页/排序/过滤吗？我没有。我删除了bServerSide，那个错误就消失了。不幸的是，我得到了一个新的。弹出一个弹出窗口，显示“DataTables警告（table id=‘table_id’）：从数据源请求的第0行未知参数‘0’”。我可以这样做。我想做一些事情，我想我可以通过您的实现来完成。我传回的json（上面的内容）包含元素“serial”。我有另一个数组，它有一个元素名“serial”，该数组有一个元素名“name”。我需要弄清楚如何从另一个数组中引入“name”，并将其替换为这个数组中的serial。想法？您的意思是要加载第一个json并将串行列中的值替换为新json中的值吗？是的，如果可能的话，这正是我想要做的。

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