Skip to main content
 首页 » 编程设计

jquery之1.10 中的 DataTables 无限滚动

2026年07月28日7JeffreyZhao

将 DataTables 更新到 1.10 后,bScrollInfinite 被新扩展取代 Scroller 。问题是 Scroller 正在使用表格 div 中的虚拟滚动条。我想通过主浏览器滚动条创建简单的(我知道无限滚动器有很多麻烦)无限滚动。

目前,我有类似的东西:

var dataTable = $('#data-table').DataTable({ 
    serverSide: true, 
    pageLength: 100, 
    searching: true, 
    fixedHeader: { 
        header: true, 
        headerOffset: 50 
    }, 
    ajax: { 
        url: '/url', 
        method: 'POST' 
    }, 
    columns: [ 'col1', 'col2' ], 
}); 
 
$(window).scroll(function() { 
    if ($(window).scrollTop() + $(window).height() == $(document).height()) { 
        console.log("bottom!"); 
        dataTable.page('next').draw('page'); 
    } 
}); 

这工作正常,但它用新行(来自新页面)替换现有行。我已经尝试过 Ajax 调用和 rows().add(...).draw() 方法的 success 回调,但是在触发 draw() 后,我得到了无限循环(因为 draw 调用Ajax)而不是无限滚动:(

基本上,我需要将新行添加到表末尾,而不是替换现有行。

顺便说一句,类似的问题是 posted to DataTables forum但没有有用的答案。

请您参考如下方法:

table.datatable({       
      iDisplayLength: 25, 
      serverSide: true, 
      ordering: false, 
      searching: false, 
      sAjaxSource: //url here, 
      scrollY: 1014 //can be any value, 
      scroller: { 
        loadingIndicator: true 
      } 
} 

这会起作用,但您应该记住一件事,包括滚动器插件。它不是 jquery.datatables.js 的一部分