AngularJS Client-Side Pagination

by Dan Wahlin

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-controller="PaginationController">
    <ul>
        <li ng-repeat="customer in pagedData | limitTo:pageSize">
            {{customer}}
        </li>
    </ul>
    <button ng-disabled="pageButtonDisabled(-1)" ng-click="paginate(-1)">Previous</button>&nbsp;&nbsp;
    <button ng-disabled="pageButtonDisabled(1)" ng-click="paginate(1)">Next</button>
    <br /><br />
    Page {{currentPage+1}} of {{totalPages}}
</div>

JavaScript

var app=angular.module('paginationModule', []);

app.controller('PaginationController', function($scope, dataFactory) {
	//Client-side pagination example
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.totalPages = 0;
    $scope.pagedData = [];

    $scope.pageButtonDisabled = function(dir) {
    	if (dir == -1) {
			return $scope.currentPage == 0;
    	}
		return $scope.currentPage >= dataFactory.data.length/$scope.pageSize - 1;
    }

    $scope.paginate = function(nextPrevMultiplier) {
    	$scope.currentPage += (nextPrevMultiplier * 1);
    	$scope.pagedData = dataFactory.data.slice($scope.currentPage*$scope.pageSize);
    }

    function init() {
	    $scope.totalPages = Math.ceil(dataFactory.data.length/$scope.pageSize);
	    $scope.pagedData = dataFactory.data;
    }

    init();

});

app.factory('dataFactory', function() {
	var factory = {};
	factory.data = [];

	//Fill with fake data
	function init() {
	    for (var i=0; i<92; i++) {
	        factory.data.push("Customer "+i);
	    }
	}

	init();

	return factory;
});