使用AngularJS数据表中的Scrolling按需加载数据

Question

I have used angular datatable in my application. I applied the options as given below,

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

And I set the column definition as follows,

$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()
];

I html page I used the angular table as,

<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%">

I don't need the pagination of the datatable. So I removed it. But I need to implement lazy loading in the table. I added scroll bar in the table by adding the following in the options,

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

But I cannot catch the scroll event of the table. How can I identify the scroll reaches the end of table? So I can fetch next set of data from server and append to the table. Please help me.

Answer 1

When you are using scrolling with a specified scroll height, dataTables divides the content of the table into two different sections : .dataTables_scrollHead , an element holding a table with the original headers, and .dataTables_scrollBody - the table with hidden headers (height set to 0) wrapped into a scrollable element. So you must listen to the onscroll event on the .dataTables_scrollBody element :

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 demo with an AJAX source and most settings from the question ->

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