ng-simplePagination

by svileng

Dead simple pagination for AngularJS on static data.

124 Stars 47 Forks Last release: Not found MIT License 28 Commits 2 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

ng-simplePagination

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.

Rendering

There is a custom filter called

startFrom
to help you rendering items per page.

Again, replace

post in posts
with your data.

Previous / Next page buttons

Previous
Next

Optionally you can add some logic to hide/disable the buttons using the

pagination.page
and
pagination.numPages
attributes; here's an example:
ng-hide="pagination.page == 0" ng-click="pagination.prevPage()"
ng-hide="pagination.page + 1 >= pagination.numPages" ng-click="pagination.nextPage()"

Page numbers

Using another built-in filter called

range
:
html

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}}.

Contributions

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.

Contributors

Credits

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.