maximilian-krauss/pagination.html

## pagination.html
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	</head>
	<body ng-app="app">

		<div ng-controller="DemoCtrl">
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>Name</th>
						<th>Value</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="(key, value) in paginate()">
						<td ng-bind="key"></td>
						<td ng-bind="value.value"></td>
					</tr>
				</tbody>
			</table>
			<ul class="pagination">
				<li ng-class="{disabled: p.canGoFastBackward}"><a href="#" ng-click="firstPage()" title="First page"><i class="fa fa-fast-backward"></i></a></li>
				<li ng-class="{disabled: p.canGoBackward}"><a href="#" ng-click="previousPage()" title="Previous page"><i class="fa fa-backward"></i></a></li>

				<li ng-hide="p.links.leftEnd"><a href="#" ng-click="promptPage()">...</a></li>
				<li ng-repeat="l in p.links.left"><a ng-bind="l + 1" href="#" ng-click="gotoPage(l)"></a></li>

				<li class="active"><a ng-bind="p.current + 1" style="font-weight:bold;" title="Current page"></a></li>

				<li ng-repeat="r in p.links.right"><a ng-bind="r + 1" href="#" ng-click="gotoPage(r)"></a></li>
				<li ng-hide="p.links.rightEnd"><a href="#" ng-click="promptPage()">...</a></li>

				<li ng-class="{disabled: p.canGoForward}"><a href="#" ng-click="nextPage()" title="Next page"><i class="fa fa-forward"></i></a></li>
				<li ng-class="{disabled: p.canGoFastForward}"><a href="#" ng-click="lastPage()" title="Last page"><i class="fa fa-fast-forward"></i></a></li>
			</ul>

			<p>
				Page {{pageIndex + 1}} of {{totalNumberOfPages}}
			</p>
		</div>

		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
		<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

		<script>
			var app = angular.module('app', []);
			app.controller('DemoCtrl', function($scope) {
				$scope.data = {};

				$scope.itemsPerPage = 12;
				$scope.pageIndex = 0;
				$scope.totalNumberOfPages = 0;
				$scope.p = {}

				var init = function() {
					var t = {};

					for(var i = 1; i < (45760 * (1+Math.random())).toFixed(0); i++) {
						t['item' + i] = {
							value: 1 + (i * Math.random()).toFixed(4),
							x: Math.random(),
							y: Math.random(),
							hugo: Math.random(),
							horst: Math.random(),
							doofy: Math.random(),
							blah: Math.random()
						};
					}

					$scope.data = t;
					$scope.totalNumberOfPages = Math.ceil(Object.keys(t).length / $scope.itemsPerPage);
				};

				$scope.paginator = function () {
					var c = $scope.pageIndex,
						t = ($scope.totalNumberOfPages - 1),
						offset = 3,
						index,
						result = {
							current: c,
							canGoFastBackward: (c <= 0),
							canGoBackward: (c <= 0),
							canGoForward: (c >= t),
							canGoFastForward: (c >= t),
							links: {
								left: [],
								leftEnd: !((c - offset) > 0),
								right: [],
								rightEnd: !((c + offset) < t)
							}
						};

					if(c > 0) {
						for(index = (c - offset); index < c; index++) {
							if(index >= 0) {
								result.links.left.push(index);
							}
						}
					}

					if(c < t) {
						for(index = (c + offset); index > c; index--) {
							if(index <= t) {
								result.links.right.unshift(index);
							}
						}
					}

					return result;
				};

				$scope.paginate = function() {
					var n = {},
						i = -1
						rangeStart = ($scope.pageIndex * $scope.itemsPerPage),
						rangeEnd = ($scope.itemsPerPage + ($scope.pageIndex * $scope.itemsPerPage));

					if(rangeStart < 0) {
						return n;
					}

					_($scope.data).each(function(value, key) {
						i++;

						if(i < rangeStart || i > rangeEnd) {
							return;
						}

						n[key]=value;
					});

					$scope.p = $scope.paginator();

					return n;
				};

				$scope.firstPage = function() {
					$scope.pageIndex = 0;
				};

				$scope.lastPage = function() {
					$scope.pageIndex = ($scope.totalNumberOfPages - 1);
				};

				$scope.nextPage = function() {
					$scope.pageIndex++;
				};

				$scope.previousPage = function() {
					$scope.pageIndex--;
				};

				$scope.promptPage = function() {
					var page = prompt("Enter a pagenumber:", ($scope.pageIndex+1));
					if(page !== null) {
						$scope.pageIndex = (page - 1)
					}
				};

				$scope.gotoPage = function(page) {
					$scope.pageIndex = page;
				};

				init();
			});
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	</head>
	<body ng-app="app">

	<div ng-controller="DemoCtrl">
	<table class="table table-bordered table-striped">
	<thead>
	<tr>
	<th>Name</th>
	<th>Value</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="(key, value) in paginate()">
	<td ng-bind="key"></td>
	<td ng-bind="value.value"></td>
	</tr>
	</tbody>
	</table>
	<ul class="pagination">
	<li ng-class="{disabled: p.canGoFastBackward}"><a href="#" ng-click="firstPage()" title="First page"><i class="fa fa-fast-backward"></i></a></li>
	<li ng-class="{disabled: p.canGoBackward}"><a href="#" ng-click="previousPage()" title="Previous page"><i class="fa fa-backward"></i></a></li>

	<li ng-hide="p.links.leftEnd"><a href="#" ng-click="promptPage()">...</a></li>
	<li ng-repeat="l in p.links.left"><a ng-bind="l + 1" href="#" ng-click="gotoPage(l)"></a></li>

	<li class="active"><a ng-bind="p.current + 1" style="font-weight:bold;" title="Current page"></a></li>

	<li ng-repeat="r in p.links.right"><a ng-bind="r + 1" href="#" ng-click="gotoPage(r)"></a></li>
	<li ng-hide="p.links.rightEnd"><a href="#" ng-click="promptPage()">...</a></li>

	<li ng-class="{disabled: p.canGoForward}"><a href="#" ng-click="nextPage()" title="Next page"><i class="fa fa-forward"></i></a></li>
	<li ng-class="{disabled: p.canGoFastForward}"><a href="#" ng-click="lastPage()" title="Last page"><i class="fa fa-fast-forward"></i></a></li>
	</ul>

	<p>
	Page {{pageIndex + 1}} of {{totalNumberOfPages}}
	</p>
	</div>

	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
	<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

	<script>
	var app = angular.module('app', []);
	app.controller('DemoCtrl', function($scope) {
	$scope.data = {};

	$scope.itemsPerPage = 12;
	$scope.pageIndex = 0;
	$scope.totalNumberOfPages = 0;
	$scope.p = {}

	var init = function() {
	var t = {};

	for(var i = 1; i < (45760 * (1+Math.random())).toFixed(0); i++) {
	t['item' + i] = {
	value: 1 + (i * Math.random()).toFixed(4),
	x: Math.random(),
	y: Math.random(),
	hugo: Math.random(),
	horst: Math.random(),
	doofy: Math.random(),
	blah: Math.random()
	};
	}

	$scope.data = t;
	$scope.totalNumberOfPages = Math.ceil(Object.keys(t).length / $scope.itemsPerPage);
	};

	$scope.paginator = function () {
	var c = $scope.pageIndex,
	t = ($scope.totalNumberOfPages - 1),
	offset = 3,
	index,
	result = {
	current: c,
	canGoFastBackward: (c <= 0),
	canGoBackward: (c <= 0),
	canGoForward: (c >= t),
	canGoFastForward: (c >= t),
	links: {
	left: [],
	leftEnd: !((c - offset) > 0),
	right: [],
	rightEnd: !((c + offset) < t)
	}
	};

	if(c > 0) {
	for(index = (c - offset); index < c; index++) {
	if(index >= 0) {
	result.links.left.push(index);
	}
	}
	}

	if(c < t) {
	for(index = (c + offset); index > c; index--) {
	if(index <= t) {
	result.links.right.unshift(index);
	}
	}
	}

	return result;
	};

	$scope.paginate = function() {
	var n = {},
	i = -1
	rangeStart = ($scope.pageIndex * $scope.itemsPerPage),
	rangeEnd = ($scope.itemsPerPage + ($scope.pageIndex * $scope.itemsPerPage));

	if(rangeStart < 0) {
	return n;
	}

	_($scope.data).each(function(value, key) {
	i++;

	if(i < rangeStart \|\| i > rangeEnd) {
	return;
	}

	n[key]=value;
	});

	$scope.p = $scope.paginator();

	return n;
	};

	$scope.firstPage = function() {
	$scope.pageIndex = 0;
	};

	$scope.lastPage = function() {
	$scope.pageIndex = ($scope.totalNumberOfPages - 1);
	};

	$scope.nextPage = function() {
	$scope.pageIndex++;
	};

	$scope.previousPage = function() {
	$scope.pageIndex--;
	};

	$scope.promptPage = function() {
	var page = prompt("Enter a pagenumber:", ($scope.pageIndex+1));
	if(page !== null) {
	$scope.pageIndex = (page - 1)
	}
	};

	$scope.gotoPage = function(page) {
	$scope.pageIndex = page;
	};

	init();
	});
	</script>
	</body>
	</html>