https://github.com/svileng/ng-simplepagination

Dead simple pagination for AngularJS on static data.
https://github.com/svileng/ng-simplepagination

Last synced: about 2 months ago
JSON representation

Dead simple pagination for AngularJS on static data.

• Host: GitHub
• URL: https://github.com/svileng/ng-simplepagination
• Owner: svileng
• License: mit
• Created: 2013-06-11T22:54:11.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2016-05-11T07:29:12.000Z (over 8 years ago)
• Last Synced: 2024-11-10T16:12:50.564Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 14.6 KB
• Stars: 122
• Watchers: 12
• Forks: 45
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# 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

```bash

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.

```js

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:

```js

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:

```js

$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:

```js

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

```html



	



```


Again, replace `post in posts` with your data.

### Previous / Next page buttons

```html

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:

```html

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



«

  


  {{n + 1}}

  

  
»



```


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

* [@svileng](https://twitter.com/svileng)

## Credits

* AngularJS range filter: [http://www.yearofmoo.com/](http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#more-about-loops)

* AngularJS pagination: [http://jsfiddle.net/2ZzZB/56/](http://jsfiddle.net/2ZzZB/56/)

* Other uknown JSFiddles