Pagination Like Facebook Infinite Scroll Using AngularJS

    May 30, 2016       by Pankaj Kumar

Hey guys, today we are going to discuss about infinite scroll pagination which gaint platform likes facebook, twitter, instagram does. And developers face alot problem to achieve this task, Since I myself got the solution after long research. Today I will show you to do in very easier way.

 

For understanding purpose we will take a small example so that things could be clear easily. So in this demo we are not going to use and database of any json data. we are going to achive this be showing it with increamental value upto 1000. Means infinite scroll will go till 1000.

 

So lets have a look on our view part. index.html

 
<html>
<head><title>infinite scroll like facebook pagination using angularjs</title>
<style>
.constrained {
    margin: 10px;
    padding: 10px;
    height: 200px;
    overflow: auto;
    border: 1px solid lightgray;
}
 
</style>
<link href="lib/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
 
<div ng-app="myApp" ng-controller="appController">
 
    <h1>Record loaded on scroll: {{numberToDisplay}}/1000</h1>
 
    <div class="constrained">
        <table class="table table-striped" id="loggingTable" infinite-scroll="loadMore()" infinite-scroll-container='".constrained"' infinite-scroll-distance="1" infinite-scroll-parent="true">
            <tr data-ng-show="logEventFilter.length === 0">
                <td class="center" colspan="3">Nobody is here</td>
            </tr>
 
            <tr data-ng-repeat="logEvent in logEventFilter = (logEvents | filter:searchTerm | limitTo:numberToDisplay) track by $index">
                <td> {{$index}} </td>
                <td> {{logEvent.name}} </td>
                <td> {{numberToDisplay}} </td>
            </tr>
        </table>
    </div>
 
</div>
 
</body>
<script src="lib/jquery-2.1.1.js"></script>
<script src="lib/angular.js"></script>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.2/ng-infinite-scroll.js"></script>
 
</html>
 

 

In the above html file, we have included angular app and a controller within that app.  Below that we have a normal table where 20 records load at first then further records loads( after calling method loadMore()) as per the scroll with the help of angular & its modules.

 

Now have a look on angular part. app.js

 
var app = angular.module('myApp', ['infinite-scroll']);
app.controller('appController',['$scope','$window',function($scope,$window){
$scope.searchTerm = "";
$scope.numberToDisplay = 20;
 
$scope.logEvents = [];
for (var i = 0; i < 1000; i++) {
    $scope.logEvents.push({
        name: "Hello, my name is " + i
    });
}
 
$scope.loadMore = function() {
    if ($scope.numberToDisplay + 5 < $scope.logEvents.length) {
        $scope.numberToDisplay += 5;
    } else {
        $scope.numberToDisplay = $scope.logEvents.length;
    }
};
 
 
}])
 

 

In the above js file we have created an app included 'infinite-scroll' , Below that we have created a loop which will run till 1000 which is our max limit to show the record. And at the bottom we have created a method loadMore  which calls on page scroll and push the next data into the existing view of the page.

 

In this easiest way we can perform the task which looks a big task itself.

Pretty cool! Finally, our task completes here.

That’s all for now. Thank you for reading and I hope this post will be very helpful.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

 

pagination facebook infinite scroll

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS