Angularjs Ajax pagination

Posted on July 3, 2016 by Suresh Kamrushi in PHP

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>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="angular.min.js" type="text/javascript"></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() {
 method: 'POST',
 url: "data.php",
 headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 }).then(function successCallback(response) {
 var tempvar =;
 var len = (tempvar.length);
 for (var loop = 0; loop < len; loop++) {
 pagesShown = pagesShown + 1;
<body ng-app="sampleapp">
 <div ng-controller="samplecontoller" ng-init="showData()">
 <li class="paginationclass" ng-repeat="obj in datalists">
 <div>Name : {{ }} Age : {{ obj.age }}</div>
<div class="pagination pagination-centered"><button class="show-more-btn" ng-click="showMoreItems()">Show more</button></div>

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.

$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);