ng-simplepagination | Dead simple pagination for AngularJS on static data.

ng-simplepagination directive


Stars : 10

Forks : 10

Created by Svilen Gospodinov

bower install ng-simplePagination

Download GitHub


Previously known as "angular-SimplePagination"; is an AngularJS module for simple pagination on static data. No directives here, just a service and some helpful filters.

Mostly based on various snippets which I found on JSFiddle, with some changes by me.

Quick start

bower install ng-simplePagination

or alternatively download and include simplePagination.js after angular.min.js.

Add the simplePagination module as a dependency when creating your app, e.g.

var app = angular.module('myApp', ['simplePagination']);`

Inject the Pagination service to the controller containing the data which you want to paginate, and set it on the $scope:

app.controller('MyCtrl', ['$scope', 'Pagination',
function($scope, Pagination) {
  $scope.pagination = Pagination.getNew();

This defaults to 5 items per page. You can pass an optional parameter with the number of items you want per page:

$scope.pagination = Pagination.getNew(10);

Finally, calculate and set the number of pages depending on your data. Here's an example with a pre-defined $scope.posts array for a blog application:

$scope.pagination.numPages = Math.ceil($scope.posts.length/$scope.pagination.perPage);

Replace $scope.posts with whatever data you have initialised.


There is a custom filter called startFrom to help you rendering items per page.

<div ng-repeat="post in posts | startFrom: * pagination.perPage | limitTo: pagination.perPage">
    <!-- stuff -->

Again, replace post in posts with your data.

Previous / Next page buttons

<button ng-click="pagination.prevPage()">Previous</button>
<button ng-click="pagination.nextPage()">Next</button>

Optionally you can add some logic to hide/disable the buttons using the and pagination.numPages attributes; here's an example:

ng-hide=" == 0" ng-click="pagination.prevPage()"
ng-hide=" + 1 >= pagination.numPages" ng-click="pagination.nextPage()"

Page numbers

Using another built-in filter called range:

<ul class="pagination">
<li><a href="" ng-click="pagination.prevPage()">&laquo;</a></li>
  <li ng-repeat="n in [] | range: pagination.numPages" ng-class="{active: n ==}">
  <a href="" ng-click="pagination.toPageId(n)">{{n + 1}}</a>
  <li><a href="" ng-click="pagination.nextPage()">&raquo;</a></li>

If you use, bootstrap.css, Above given list HTML coding give good appearance. Note that the first page is actually 0 hence the {{n + 1}}.


Any pull requests are more than welcome. Please make your changes in your own branch, make sure the current specs in simplePagination.spec.js are passing (Jasmine/Karma) and update/add tests if necessary.

For problems/suggestions please create an issue on Github.




Javascript plugin