使用 AngularJS 数据表中的滚动按需加载数据答案

【问题标题】：On demand data load using Scrolling in AngularJS datatable使用 AngularJS 数据表中的滚动按需加载数据
【发布时间】：2016-01-06 11:57:12
【问题描述】：

我在我的应用程序中使用了角度数据表。我应用了下面给出的选项，

$scope.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
                .withOption('bAutoWidth', false)
                .withOption('paging', false)
                .withOption('sorting', false)
                .withOption('searching', false)
                .withOption('info', false)
                .withDOM('frtip');

我设置列定义如下，

$scope.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0).notSortable(),
    DTColumnDefBuilder.newColumnDef(1).notSortable(),
    DTColumnDefBuilder.newColumnDef(2).notSortable(),
    DTColumnDefBuilder.newColumnDef(3).notSortable(),
    DTColumnDefBuilder.newColumnDef(4).notSortable(),
    DTColumnDefBuilder.newColumnDef(5).notSortable(),
    DTColumnDefBuilder.newColumnDef(6).notSortable(),
    DTColumnDefBuilder.newColumnDef(7).notSortable()
];

我的html页面我使用了angular table作为，

<table id="userTable" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-bordered dt-responsive nowrap res_table" cellspacing="0" width="100%">

我不需要数据表的分页。所以我删除了它。但是我需要在表中实现延迟加载。我通过在选项中添加以下内容在表格中添加了滚动条，

.withOption('scrollY', '48vh')

但我无法捕捉到表格的滚动事件。如何识别滚动到达表格末尾？所以我可以从服务器获取下一组数据并附加到表中。请帮帮我。

【问题讨论】：

这就是你要找的东西：stackoverflow.com/questions/14280905/…
@OriPrice，感谢您的评论。链接显示列表的滚动。我已经检查过了。在表中它不起作用。

标签： javascript angularjs scroll ondemand angular-datatables

【解决方案1】：

当您使用具有指定滚动高度的滚动时，dataTables 将表格的内容分为两个不同的部分：.dataTables_scrollHead，一个包含带有原始标题的表格的元素，以及.dataTables_scrollBody - 带有隐藏标题的表格（高度设置为 0）包裹在一个可滚动的元素中。所以你必须在.dataTables_scrollBody元素上监听onscroll事件：

angular.element(document).on('init.dt', function() {
   document.querySelector('.dataTables_scrollBody').onscroll = function(e) {
      if ((e.target.clientHeight + e.target.scrollTop) > e.target.scrollHeight-30) { 
         console.log('we are near the bottom')
      }
   }
})

带有 AJAX 源和问题中大多数设置的 Angular 数据表演示 ->

http://plnkr.co/edit/CvdCTtwdRNuk74DtjB3O?p=preview

【讨论】：