<body>
<script type="text/ng-template" id="paginationControl.html">
<div class="pagination text-center" ng-show="paginator.pageCount() > 1">
<ul>
<li ng-click="paginator.firstPage()" ng-class="paginator.isFirstPage() && 'disabled'">
<a>
<i class="icon-fast-backward" ng-class="paginator.isFirstPage() && 'icon-white'"></i>
</a>
</li>
<li ng-click="paginator.perviousPage()" ng-class="paginator.isFirstPage() && 'disabled'">
<a>
<i class="icon-step-backward" ng-class="paginator.isFirstPage() && 'icon-white'"></i>
</a>
</li>
<li ng-click="paginator.setPage(i)" ng-repeat="i in [] | forLoop:0:paginator.pageCount()" ng-class="paginator.page==i && 'active'">
<a>{{i+1}}</a>
</li>
<li ng-click="paginator.nextPage()" ng-class="paginator.isLastPage() && 'disabled'">
<a>
<i class="icon-step-forward" ng-class="paginator.isLastPage() && 'icon-white'"></i>
</a>
</li>
<li ng-click="paginator.lastPage()" ng-class="paginator.isLastPage() && 'disabled'">
<a>
<i class="icon-fast-forward" ng-class="paginator.isLastPage() && 'icon-white'"></i>
</a>
</li>
</ul>
</div>
</script>
<div class="container" ng-controller="TestCrtl">
<h1>AngularJS client side pagination module example</h1>
<h2><a target="_blank" href="http://www.cacodaemon.de/">by cacodaemon.de</a></h2>
<table class="table table-bordered table-condensed">
<thead>
<tr>
<td>Value<td>
</tr>
</thead>
<tbody>
<tr ng-repeat="value in testValues | paginate:rowsPerPage">
<td>{{value}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="control-group">
<label class="control-label" for="rows-per-page">Rows per page</label>
<div class="controls">
<select id="rows-per-page"" ng-model="rowsPerPage" class="input-xlarge">
<option>50</option>
<option>100</option>
<option>200</option>
<option>500</option>
</select>
</div>
</div>
</td>
</tr>
<tr>
<td>
<paginator></paginator>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
/*
* A simple client side pagination module.
*
* By Guido Krömer <[email protected]>
* */
angular.module('caco.ClientPaginate', [])
.filter('paginate', function(Paginator) {
return function(input, rowsPerPage) {
if (!input) {
return input;
}
if (rowsPerPage) {
Paginator.rowsPerPage = rowsPerPage;
}
Paginator.itemCount = input.length;
return input.slice(parseInt(Paginator.page * Paginator.rowsPerPage), parseInt((Paginator.page + 1) * Paginator.rowsPerPage + 1) - 1);
}
})
.filter('forLoop', function() {
return function(input, start, end) {
input = new Array(end - start);
for (var i = 0; start < end; start++, i++) {
input[i] = start;
}
return input;
}
})
.service('Paginator', function ($rootScope) {
this.page = 0;
this.rowsPerPage = 50;
this.itemCount = 0;
this.setPage = function (page) {
if (page > this.pageCount()) {
return;
}
this.page = page;
};
this.nextPage = function () {
if (this.isLastPage()) {
return;
}
this.page++;
};
this.perviousPage = function () {
if (this.isFirstPage()) {
return;
}
this.page--;
};
this.firstPage = function () {
this.page = 0;
};
this.lastPage = function () {
this.page = this.pageCount() - 1;
};
this.isFirstPage = function () {
return this.page == 0;
};
this.isLastPage = function () {
return this.page == this.pageCount() - 1;
};
this.pageCount = function () {
return Math.ceil(parseInt(this.itemCount) / parseInt(this.rowsPerPage));
};
})
.directive('paginator', function factory() {
return {
restrict:'E',
controller: function ($scope, Paginator) {
$scope.paginator = Paginator;
},
templateUrl: 'paginationControl.html'
};
});
angular.module('examplePaginator', ['caco.ClientPaginate'])
.controller('TestCrtl', function ($scope) {
$scope.testValues = [];
for (var i = 0; i < 100000; i++) {
$scope.testValues.push(i);
}
$scope.rowsPerPage = 50;
});