Angularjs Ajax pagination

Sharing below how you can implement AJAX pagination using angularJS.

As I am in the learning phase of angular i get fascinate after implementing something new which i don't know. So I thought for noting it down, which will help someone out there.

Steps 1: Create a HTML file as "test.html" and copy the below code. Little explanation about the functions declare in controller:

$scope.showData : initializing data to be populate when page gets loaded.

$scope.paginationLimit : Setting up pagination limits for each page request.

$scope.hasMoreItemsToShow : This will set wheater we reach the end of the record or not.

$scope.showMoreItems : This function will trigger with user click on "Show More" button. It will do a ajax call to server and get the next sets for records and push it to current $scope.  

<!DOCTYPE html>

<html>

 <head>

<script src="jquery.min.js" type="text/javascript"></script>
<script src="angular.min.js" type="text/javascript"></script>
<script>
 var myapp = angular.module('sampleapp', []);
 myapp.controller('samplecontoller', function($scope, $http) {
 $scope.showData = function( ) {
 $scope.datalists = [
 {"name": "User 1", "age": "16"},
 {"name": "User 2", "age": "21"},
 {"name": "User 3", "age": "16"}
 ]

 var pagesShown = 1;
 var pageSize = 3;
 $scope.paginationLimit = function(data) {
   return pageSize * pagesShown;
 };

 $scope.hasMoreItemsToShow = function() {
   pagesShown < ($scope.datalists.length / pageSize); //this will return negative or positive number.
 };

 $scope.showMoreItems = function() {
 $http({
 method: 'POST',
 url: "data.php",
 headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 }).then(function successCallback(response) {
 var tempvar = response.data;
 var len = (tempvar.length);
 for (var loop = 0; loop < len; loop++) {
     $scope.datalists.push(tempvar[loop]);
 }
 })
 pagesShown = pagesShown + 1;
 };
 }
 });
</script>

</head>

<body ng-app="sampleapp">

 <div>
 <div ng-controller="samplecontoller" ng-init="showData()">
 <ul>
 <li class="paginationclass" ng-repeat="obj in datalists">
 <div>Name :  Age : </div>
 </li>
 </ul>
 <div class="pagination pagination-centered"><button class="show-more-btn" ng-click="showMoreItems()">Show more</button></div>
 </div>
 </div>
 </body>
</html>

Step 2: Create a PHP file as "data.php" and add below code. Here I am just printing dummy data, You can connect the DB and get the data and print it in JSON format.

<?php

$data = array(
 array("name"=>"User 11", "age"=> "35"),
 array("name"=>"User 12", "age"=> "30"),
 array("name"=>"User 13", "age"=> "32"),
 array("name"=>"User 14", "age"=> "22"));
echo json_encode($data);
?>