如何访问 Dynatable AJAX 调用请求的 JSON 中的附加数据

Question

我正在使用 dynatable.com 插件创建 table 所学校，这些学校存储在我们的数据库中。 table 可以过滤，因此并不总是显示学校总数。我们不显示 'number of pupils' 列，但试图在 table.

的底部显示 'total number of pupils' 摘要

html在页面上如下：

<table id="dynatable">
  <thead>
    <tr>
      <th data-dynatable-column="id">ID</th>
      <th data-dynatable-column="schoolName">School Name</th>
      <th data-dynatable-column="contactName">Contact Name</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"><span id="numPupils"></span> Pupils</td>
    </tr>
  </tfoot>
</table>

后跟JS：

<script>
  $('#dynatable').dynatable({
    dataset: {
      ajax: true,
      ajaxUrl: '/my/json/page.json',
      ajaxOnLoad: true,
      records: []
    }
  });
</script>

并检索到 JSON 的示例（注意底部的附加 totalNumPupils 字段）：

{
  "records": [
    {
      "id": "1",
      "schoolName": "ABC School",
      "contactName": "Terry"
    },
    {
      "id": "17",
      "schoolName": "DEF School",
      "contactName": "Claire"
    },
    {
      "id": "45",
      "schoolName": "GHI School",
      "contactName": "Barry"
    }
  ],
  "queryRecordCount": 3,
  "totalRecordCount": 450,
  "totalNumPupils": 794
}

我正在尝试确定是否有办法访问 dynatable 的 ajax 调用请求的 responseJSON.totalNumPupils，或者我是否必须执行自己的操作ajax 调用，确定学生的数量，然后将 JSON 传递给 dynatable 函数？

Answer 1

请查看代码片段。您可以使用普通 AJAX 获取 JSON 有效负载，然后使用 AJAX 响应中的数据填充动态表，同时访问唯一的 totalNumPupils 属性.

$('#dynatable').dynatable({
  dataset: {
    ajax: true,
    ajaxUrl: 'https://api.myjson.com/bins/1ezw8l',
    ajaxOnLoad: true,
    records: []
  }
});

$.ajax({
  url: 'https://api.myjson.com/bins/1ezw8l',
  success: function(data) {
    $('#dynatable').dynatable({
      dataset: {
        ajax: false,
        records: data
      }
    });
    $('#numPupils').text("Total Pupils: " + data.totalNumPupils);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.css" rel="stylesheet" />

<table id="dynatable">
  <thead>
    <tr>
      <th data-dynatable-column="id">ID</th>
      <th data-dynatable-column="schoolName">School Name</th>
      <th data-dynatable-column="contactName">Contact Name</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"><span id="numPupils"></span> Pupils</td>
    </tr>
  </tfoot>
</table>

如何访问 Dynatable AJAX 调用请求的 JSON 中的附加数据

How to access additional data in JSON requested by Dynatable AJAX call

javascript

jquery

json

ajax

dynatable