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 : {{ obj.name }} Age : {{ obj.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); ?>