Загрузка данных по требованию с использованием прокрутки в формате AngularJS

Question

Я использовал угловую привязку в моем приложении. Я применил варианты, как указано ниже,

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

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

Но я не могу поймать событие прокрутки таблицы. Как я могу определить прокрутку до конца таблицы? Поэтому я могу получить следующий набор данных с сервера и добавить в таблицу. Пожалуйста, помогите мне.

Answer 1

Когда вы используете прокрутку с указанной высотой прокрутки, dataTables делит содержимое таблицы на два разных раздела: .dataTables_scrollHead, элемент, содержащий таблицу с исходными заголовками, и .dataTables_scrollBody - таблица со скрытыми заголовками (высота установлена до 0), завернутый в прокручиваемый элемент. Таким образом, вы должны слушать onscroll события на .dataTables_scrollBody элементе:

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

Угловое DataTables демонстрационного с источником AJAX и большинство настроек от вопроса ->

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