Home Infinite scroll duplicates rows
Reply: 1

Infinite scroll duplicates rows

enucar
1#
enucar Published in 2017-12-07 19:03:32Z

I'm ngInfiniteScroll dependency for AngularJS framework. https://sroze.github.io/ngInfiniteScroll/

It's assigned to my table.

<table infinite-scroll="loadMore()" ng-controller="LastBookingsCtrl">

Here's the loadMore function in my javascript file.

$scope.loadMore = function() {
$http.get("last.php?start=" + $scope.currentLoadIndex)
    .then(function (res) {
        if (res.data.length > 0) {
            var count = 0;
                for (var i = 0; i < res.data.length; i++) {
                    $scope.lastBookings.push(res.data[i]);
                    count++;
                }
            $scope.currentLoadIndex += count;
        }
    });
};

And I think my mysql query in load.php is correct, but I'm not sure.

$start = $_GET['start'];
$query = "SELECT * FROM `performs` ORDER BY id DESC LIMIT ".$start.", 20";

It gives me 20 rows of from my mysql start from a variable number.

But whenever I scroll up and down again, it duplicates somehow.

Phillip Thomas
2#
Phillip Thomas Reply to 2017-12-07 19:33:23Z

I believe you are getting the same result each time because you $scope.currentLoadIndex is not updating correctly from the then(). Try setting the next index to the length of the current list aka:

$http.get("last.php?start=" + $scope.lastBookings.length)

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.297601 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO