Dynatable AJAXでリクエストされたJSONの追加データにアクセスする方法

Question

dynatable.comプラグインを使用して、データベースに保存されている学校のテーブルを作成しています。テーブルをフィルタリングすることができるので、常に学校の総数を示すわけではありません。 「生徒数」の欄は表示されませんが、表の下部に「生徒の総数」のサマリーを表示しようとしています。次のようにページ上の

HTMLである：

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

検索さJSONのサンプル（下でさらにtotalNumPupilsフィールドに注意してください）：JS続く

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

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

私はresponseJSON.totalNumPupils thaにアクセスする方法があるかどうかを確認しようとしていますtはdynatableのajax呼び出しによって要求されますか、私は自分のajax呼び出しを実行し、生徒の数を確認してからJSONを継承する関数に渡しますか？

Answer 1

コードスニペットをご覧ください。通常のAJAXを使用してJSONペイロードを取得し、AJAXレスポンスのデータでdynatableを生成し、一意の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>