ページ番号をクリックしたときにデータをロードする遅延初期化 dataTable を作成したいと思います。
リクエストに応じてデータをロードするためにこのように作成しますが、テーブルは最初に空のテーブルをレンダリングし、他の番号をクリックすると、すべてのページ番号に対して 10 を超えるレコードが表示され、このキャプションも表示されます " Show 41 to Nan from NaN ( NaN 合計エントリからフィルター処理)" ページ番号をクリックすると、クリックされたページ番号に応じて 41 という数字が変化します。
$.ajax({
type:'POST',
//get total record within db
url: url+'getTotalInst',
success: function(total){
var oTable = $('#institutionsTable').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bAutoWidth": false,
"sAjaxSource": "control_panel/Institution_controller/getAllInstituions",
"aoColumns": [
{
"mData": "institution_name"
},
{
"mData": "institution_type"
},
{
"mData": "address"
} ,
{
"sTitle": "Tasks",
"sDefaultContent":"", // must be used to prevent "Requested unknown parameter" error
"fnRender": function(obj) {
var inst_id = obj.aData.inst_id;
var returnButton = '<span class="button-group">'+
'<a href=<?php echo base_url() ?>index.php/updateInst/'+inst_id+' class="optionButton icon edit">edit</a>'+
'<a href="#" class="optionButton icon remove danger">delete</a>'+
'</span>';
return returnButton;
}
}],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).attr("id",aData.inst_id);
return nRow;
},
//for defer rendering! but not work well
"bDeferRender": true,
"bServerSide": true,
"iDeferLoading": total,
"iDisplayLength" : 10
} );
}
});
編集
Json の戻り値は非常に大きいですが、そのサンプルを次に示します
{"aaData":[{inst_id:79, institution_type:مراكز صحية, institution_name:مستشفى الشهيد كمال عدوان,…},…],"iTotalRecords":71,"iTotalDisplayRecords":10}