current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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.

share|improve this question
    
is this what you are looking for: stackoverflow.com/questions/14280905/… – Ori Price 21 hours ago
    
@OriPrice, Thank you for your comment. The links shows scrolling of list. I already checked it. In table it didn't work. – NOBLE M.O. 21 hours ago
up vote 1 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.