Question

我是Datatables的新手，并试图找出这个问题。我有一个服务器以某种格式输出json（见下文）。我无法在服务器端更改它。

* *注意：我使用链接http://www.json-generator.com/j/cftupHnpbC?indent=4来模拟我的服务器响应，仅用于检查。

我有2个问题

由于我的json响应没有dataTable需要aaData:的东西，我似乎无法初始化它。
即使我手工将aaData:添加到json进行检查，dataTable也无法计算总记录。我可以手动设置吗？因为我无法更改服务器的输出。

JSBIN LINK： http://live.datatables.net/dasuyaf/1/edit

HTML：

<table id="example" class="display" width="100%">
  <thead>
    <tr>
      <th> </th>
      <th>ID</th>
      <th>Name</th>
      <th>Text</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JS：

$(document).ready( function () {
  var table = $('#example').dataTable({
  "sAjaxSource": "http://www.json-generator.com/j/cftupHnpbC?indent=4",
    "aoColumns": [{
      "mData": "id",
      "mRender": function (data, type, full) {
        return '<input type="checkbox" name="chkids[]" value="' + data + '">';
      }
    }, {
      "mData": "id"
    }, {
      "mData": "name"
    }, {
      "mData": "text"
    }], 
    "bProcessing": true,
    "bServerSide": true,
    "sServerMethod": "GET",
    "aoColumnDefs": [{
      'bSortable': false,
      'aTargets': [0]
    }],
    "fnDrawCallback": function (oSettings) {
      console.log(this.fnSettings().fnRecordsTotal());
    }
  });
});

我的服务器输出:(无法更改）

[
    {
        "text": "Some text", 
        "name": "somedata", 
        "id": "89"
    }, 
    {
        "text": "Some text", 
        "name": "somedata", 
        "id": "2"
    }, 
    {
        "text": "Some text", 
        "name": "somedata", 
        "id": "12"
    }
]

Answer 1

我想您可以自己请求JSON，从中创建一个对象并将其传递给您的dataTable。

var aaData;
var table;

$(document).ready( function () {
  $.ajax({
  url: 'http://www.json-generator.com/j/cftupHnpbC?indent=4'
}).done(function(data){
  aaData = data;
  table = $('#example').dataTable({
  "aaData": aaData,
    "aoColumns": [{
      "mData": "id",
      "mRender": function (data, type, full) {
        return '<input type="checkbox" name="chkids[]" value="' + data + '">';
      }
    }, {
      "mData": "id"
    }, {
      "mData": "name"
    }, {
      "mData": "text"
    }], 
    "bProcessing": true,
    "aoColumnDefs": [{
      'bSortable': false,
      'aTargets': [0]
    }],
    "fnDrawCallback": function (oSettings) {
      console.log(this.fnSettings().fnRecordsTotal());
    }
  });
  });  
} );

我已移除bServerSide - 如果您无法更改服务器响应，我认为您无法使用它。同时删除了sServerMethod。

JS dataTable插件：处理标准数据格式以外的json格式

1 个答案: