1

我正在使用dynatable.com插件创建存储在我们数据库中的学校表。该表可以过滤，因此并不总是显示学校的总数。我们不显示“学生人数”列，但试图在表格底部显示“学生总数”摘要。

页面上的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 函数然后？

4

1 回答 1

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>

于 2017-05-19T20:42:55.587 回答