如何使用Datable动态加载滚动数据？
如何使用Datable动态加载滚动数据？
提问于 2022-01-18 10:06:40
我试图用jquery的DATATABLE插件动态地加载滚动中的数据，而无需分页。我的数据库中有3000多行，加载需要很长时间，所以当用户在最后滚动表时，我希望加载200行这些数据。
这是我的javascript代码
<script src="{{asset('backend/js/demo/datatables-demo.js')}}"></script>
<script>
$('#user-dataTable').DataTable( {
"bInfo": false, //Dont display info e.g. "Showing 1 to 4 of 4 entries"
"paging": false,//Dont want paging
"bPaginate": false,//Dont want paging
} );
</script>想想你！
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-18 10:21:23
您需要获得滚动事件的新记录。
$(function() {
var $mytable = $("#myTable");
var page = 10;
var count = 10; //initial number of rows
var max = 500; //max number of rows (just for demo)
var $datatable = $mytable.DataTable({
"paging": false,
"bFilter": false
}); //init the datatable and return a refence to it
//listen for scroll and resize and custom 'fetchmore' events
$(window).bind('scroll resize fetchmore', function() {
var viewportHeight = window.innerHeight;
var scrolltop = $(window).scrollTop();
var bottomOfTable = $mytable.offset().top + $mytable.outerHeight();
//console.log(viewportHeight, scrolltop, bottomOfTable);
if ($(window).scrollTop() + viewportHeight >= bottomOfTable) {
if (count < max) {
//console.log("Fetch more data!");
load_more();
$(window).trigger("fetchmore"); //keep triggering this event until we've filled the viewport
}
}
});
function load_more() {
//fetch more data here
for(var i = 0;i<= page;i++){
count++;
$datatable.row.add([
count + '.1',
count + '.2 (new loaded)'
]).draw(false);
}
}
//trigger initial fetch
$(window).trigger("fetchmore");
});<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2 (initial row)</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2 (initial row)</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2 (initial row)</td>
</tr>
</tbody>
</table>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70753710
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号