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

我在我的应用程序中使用了角度数据表。我所施加的选择如下面给出的，使用AngularJS数据表滚动的按需数据加载

$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的我所使用的角度表为页，

<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')

但我不能赶上表的滚动事件。我如何识别滚动到达表格的末尾？所以我可以从服务器获取下一组数据并追加到表中。请帮帮我。

来源

2016-01-06 NOBLE M.O.

这是你是什么寻找：http://stackoverflow.com/questions/14280905/angularjs-infinite-scrolling-with-lots-of-data –

@OriPrice，感谢您的评论。链接显示列表的滚动。我已经检查过了。在表中它没有工作。 –

当使用具有指定的滚动高度滚动，数据表将所述表的内容转换成两个不同的部分：.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源和大多数设置从问题 - >

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

来源

2016-01-06 13:44:40 davidkonrad

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

回答

相关问题