使用AngularJS数据表中的Scrolling按需加载数据
On demand data load using Scrolling in AngularJS datatable
我在应用程序中使用了角度数据表。我应用了下面给出的选项,
$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')
但我无法捕捉到表格的滚动事件。如何识别滚动到表格末尾?所以我可以从服务器获取下一组数据,并将其附加到表中。请帮帮我。
当使用指定滚动高度的滚动时,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')
}
}
})
Angular dataTables演示与AJAX源和问题中的大多数设置->
http://plnkr.co/edit/CvdCTtwdRNuk74DtjB3O?p=preview
相关文章:
- 正在等待呈现图表,直到加载数据为止
- ng绑定和ng href问题.ng href未从控制器加载数据
- 单击按钮时加载数据
- 在reactjs组件中预加载数据
- Highcharts可以从服务器加载数据,但不能更新
- AngularJS promise在加载数据之前得到解决
- 在Knockout JS中搜索从DB加载数据的项目
- 如何在angular js中使用$emit后重新加载数据
- 构建多个图表时,HighCharts加载数据的速度较慢
- 加载初始网站后在后台加载数据
- ExtJS网格未从Ext.data.XmlStore加载数据
- 数据表 AJAX 筛选器重新加载数据
- select2 使用 AJAX 加载数据不能选择任何选项
- 在 Metro 风格应用中启动时加载数据
- 需要帮助使用 AJAX 和其他一些东西加载数据
- Vue 不加载数据
- 向右滚动加载数据
- 为SEO的数据绑定JS预加载数据
- mysql循环-预加载数据
- 无法使用JSON加载数据表