infinite-scroll with tables

[xmatadamsx]

I'm trying to use infinite-scroll (i-s) with a table and the tr using the ng-repeat on the data that is getting added each time the bottom of the table is encountered. I'm having an issue though. Each tiny scroll of the mouse calls the loadMore function. I've read the issues and googled everything I can find. I've seen people having similar problems but no definitive answers.

My question is: does version 1.2.0 work with a table? And if so, is there an example out there anywhere I can refer to because I've tried variations of div placement, i-s-containers, i-s-parents and nothing seems to work.

Thanks,
Matt

[joldenb]

I'm also having an issue with tables, where if I put it around , the resulting HTML just puts the infinite-scroll div entirely above the table instead of wrapping the . If I wrap the whole table with the infinite-scroll div, then it doesn't call the loadMore function at all.

Hmmm. Thanks,
Joe

[BenjaminWFox]

Came across this trying issue trying to figure out infinite-scroll with tables also, and this is the implementation I ended up using (with 1.2.0):

<div class="constrained" ng-controller="MyCtrl">
    <table infinite-scroll="increaseLimit()" infinite-scroll-container='".constrained"'>
        <tr ng-repeat="item in items | limitTo:barLimit">
            <td>Number</td>
            <td>{{item.number}}</td>
        </tr>
    </table>
</div>

var myApp = angular.module('myApp', [
    'infinite-scroll'])
    .controller('MyCtrl', function ($scope) {
    $scope.items = [];
    for (i = 0; i < 5000; ++i) {
        $scope.items.push({
            number: i
        });
    }
    $scope.barLimit = 100;
    $scope.increaseLimit = function () {
        $scope.barLimit += 50;
        console.log('Increase Bar Limit', $scope.barLimit)
    }
});

http://jsfiddle.net/HB7LU/12096/

[rossmartin]

@BenjaminWFox thanks a bunch for sharing this!

[guylhermetabosa]

Thanks for sharing this @BenjaminWFox

[mcpadma]

can any one say how to do the same infinite scrolling for table

[guylhermetabosa]

@mcpadma Putting infinite-scroll-container property didn't solve to you?

[mayank-globant]

@BenjaminWFox : Thanks a lot for your help. It solved my issue like charm

[edgexie]

@BenjaminWFox I copy your code to my test, but when the test has constrained's style , it has something wrong.The callback function does not work.
.constrained{height: 200px;overflow:scroll; }

[Frazer]

I also couldn't get the handle function to fire on scroll when adding infinite scroll to the tbody:

 <div class="table_slide_wrapper" ng-style="{ width: list.getTableWidth()}">
      <table class="list_table">
        <thead>
          <tr>
            <th> blah
            </th>
          </tr>
        </thead>
        <tbody   infinite-scroll="increaseLimit()"  >
          <tr ng-repeat="node in list.nodes |limitTo:tablePageSize" >
            <td>I'm a cell</td>
          </tr>
        </tbody>
      </table>
    </div>

[sinalkarpradnya]

I am also facing the same problem mentioned by @Frazer. Is there any way an infinite scroll can work on the tbody element?

[Frazer]

I ended up creating my own directive.

[abhigudi]

I ended up creating my own directive.

Could you please me with the directive which u have ??