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

Question

I am using the dynatable.com plugin to create a table of of schools that are stored in our database. The table can be filtered so does not always show the total number of schools. We do not display a 'number of pupils' column but are trying to show a 'total number of pupils' summary at the bottom of the table.

html on the page is as follows:

<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>

Followed by the JS:

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

And a sample of the JSON retrieved (note the additional totalNumPupils field at the bottom):

{
  "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
}

I am trying to establish if there is a way to access the responseJSON.totalNumPupils that is requested by dynatable's ajax call or whether I would have to perform my own ajax call, ascertain the number of pupils, then pass in the JSON to the dynatable function afterwards?

Answer 1

Please see the code snippet. You can use normal AJAX to get the JSON payload, then populate the dynatable with the data from the AJAX response, while simultaneously accessing the unique totalNumPupils property.

$('#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>