DataTables来自多个JSON数组的多个表

Question

我想输出两个表，每个表从同一JSON源中的两个单独的数组中获取信息，但是由于某种原因，我的代码无法正常工作。

JSON讯息：

{
  "Policies": [
    {
      "name": "A",
      "id": "1",
      "score": "0"
    }
  ],
  "Services": [
    {
      "name": "B",
      "id": "2",
      "score": "0"
    }
  ]
}

HTML代码：

<table id="policies-table" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Score</th>
    </tr>
  </thead>
</table>
<table id="services-table" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Score</th>
    </tr>
  </thead>
</table>

JavaScript代码：

var the_url = "www.example.com"

var columnsDef = [
    { data : "name" },
    { data : "id" },
    { data : "score" }
];

$(document).ready(function() {
    $('#policies-table').DataTable({
        ajax : {
        url : the_url,
        dataSrc: "Policies"
                },
        columns : columnsDef
}),

    $('#services-table').DataTable({
        ajax : {
        url : the_url,
        dataSrc: "Services"
                },
        columns : columnsDef
})
});

Answer 1

您没有遍历JSON变量。 正如prabodhprakash所建议的那样，编写“策略”和“服务”也无济于事。

我建议你看看这个小提琴

您可以使用与初始化单个数据表相同的语法来初始化多个数据表：

var json = {
  "Policies": [{
    "name": "A",
    "id": "1",
    "score": "0"
  }],
  "Services": [{
    "name": "B",
    "id": "2",
    "score": "0"
  }]
}


var policyTable = $("#policies-table").DataTable({
  "data" : (json.Policies),
  "columns": [
        { "data": "name" },
        { "data": "id" },
        { "data": "score" }]
});

var serviceTable = $("#services-table").DataTable({
    "data" :(json.Services),
    "columns": [
        { "data": "name" },
        { "data": "id" },
        { "data": "score" }]
});