使用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數據表滾動的按需數據加載

回答

相關問題