我的datatables表有一个ajax / json数据源,我正在尝试实现滚动/延迟渲染,它似乎没有做任何事情。加载速度与添加滚动条之前完全相同。
继承我的数据表init:
var dTable = $('#resultTable').dataTable({
"oLanguage": { "sSearch": "Filter All Rows By:",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ Hospitals",
"sProcessing": "Please be patient while hospital data is retrieved... <img style='margin-bottom:5px;' height='30px' width='30px' src='load/wheel.png'/>"
},
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
}
],
"processing": true,
"bDeferRender": true,
"Dom": '<"clear">lfrtipTS',
"order": [],
"scrollY": "600px",
"scrollCollapse": true,
"bLengthChange": false,
"bPaginate": false,
"sScrollX": "100%",
"sScrollXInner": "100%",
"ajax": {
"url": "query/query_providerlist.php?recordnum=<?php echo $recordnum ?>&prvdrnum=<?php echo $num ?>&prvdrname=<?php echo $name ?>&cbsa=<?php echo $cbsa ?>&urbanrural=<?php echo $urbanrural ?>&ownertype=<?php echo $ownertype ?>&prvdrstrt=<?php echo $prvdrstrt ?>&prvdrcity=<?php echo $prvdrcity ?>&prvdrstate=<?php echo $state ?>&county=<?php echo $county ?>&prvdrzip=<?php echo $prvdrzip ?>",
"dataType": "json"
},
"aoColumns": [
{"data": null, "bSortable":false},
{"data": "provider_num"},
{"data": "provider_name",
"mRender": function ( data, type, row ) {
return '<a href="#provmodal" data-toggle="modal" class="push" id='+row.id+'>'+row.provider_name+'</a>';
}
},
{"data": "state"},
{"data": "city"},
{"data": "street"},
{"data": "county"},
{"data": "zip", "sClass": "rightAlign"},
{"data": "cbsa", "sClass": "rightAlign"}
],
fnDrawCallback : function( oSettings ) {
$(this).find('tbody tr').each(function(index) {
$(this).find('td').first(0).text(index+1);
});
}
});
我不知道我做错了什么来初始化deferRender / Scroller但是我知道它没有用,因为在我的表底部它显示Displaying 1 to 5,684 of 5,684 entries
而且我知道卷轴应该让它说出来类似于displaying 1 to x(based on table height) of 5,684 entries
。
任何建议都很棒。
提前致谢
答案 0 :(得分:0)
这里的答案较晚,但希望有用。您必须确保您的服务器端代码仅根据滚动条的位置返回请求数量的结果。带有 serverSide: true
的数据表传递包含 start
和 length
的默认 params。使用这些值可以跳过和限制记录,以便您只返回应为该页面返回的记录,而不是整个结果集。