├── .gitignore
├── LICENSE.txt
├── README.md
├── bower.json
├── karma.conf.js
├── package.json
├── simplePagination.js
└── simplePagination.spec.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2014 Svilen Gospodinov
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | "Software"), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ng-simplePagination
 2 | 
 3 | **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.
 4 | 
 5 | Mostly based on various snippets which I found on JSFiddle, with some changes by me.
 6 | 
 7 | ## Quick start
 8 | 
 9 | ```bash
10 | bower install ng-simplePagination
11 | ```
12 | or alternatively download and include `simplePagination.js` after `angular.min.js`.
13 | 
14 | Add the `simplePagination` module as a dependency when creating your app, e.g.
15 | 
16 | ```js
17 | var app = angular.module('myApp', ['simplePagination']);`
18 | ```
19 | 
20 | Inject the `Pagination` service to the controller containing the data which you want to paginate, and set it on the $scope:
21 | 
22 | ```js
23 | app.controller('MyCtrl', ['$scope', 'Pagination',
24 | function($scope, Pagination) {
25 |   $scope.pagination = Pagination.getNew();
26 | }]);
27 | ```
28 | 
29 | This defaults to 5 items per page. You can pass an optional parameter with the number of items you want per page:
30 | 
31 | ```js
32 | $scope.pagination = Pagination.getNew(10);
33 | ```
34 | 
35 | 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:
36 | 
37 | ```js
38 | $scope.pagination.numPages = Math.ceil($scope.posts.length/$scope.pagination.perPage);
39 | ```
40 | 
41 | Replace `$scope.posts` with whatever data you have initialised.
42 | 
43 | ## Rendering
44 | 
45 | There is a custom filter called `startFrom` to help you rendering items per page.
46 | 
47 | ```html
48 | <div ng-repeat="post in posts | startFrom: pagination.page * pagination.perPage | limitTo: pagination.perPage">
49 | 	<!-- stuff -->
50 | </div>
51 | ```
52 | 
53 | Again, replace `post in posts` with your data.
54 | 
55 | ### Previous / Next page buttons
56 | ```html
57 | <button ng-click="pagination.prevPage()">Previous</button>
58 | <button ng-click="pagination.nextPage()">Next</button>
59 | ```
60 | Optionally you can add some logic to hide/disable the buttons using the `pagination.page` and `pagination.numPages` attributes; here's an example:
61 | 
62 | ```html
63 | ng-hide="pagination.page == 0" ng-click="pagination.prevPage()"
64 | ng-hide="pagination.page + 1 >= pagination.numPages" ng-click="pagination.nextPage()"
65 | ```
66 | 
67 | ### Page numbers
68 | Using another built-in filter called `range`:
69 | ```html
70 | <ul class="pagination">
71 | <li><a href="" ng-click="pagination.prevPage()">&laquo;</a></li>
72 |   <li ng-repeat="n in [] | range: pagination.numPages" ng-class="{active: n == pagination.page}">
73 |   <a href="" ng-click="pagination.toPageId(n)">{{n + 1}}</a>
74 |   </li>
75 |   <li><a href="" ng-click="pagination.nextPage()">&raquo;</a></li>
76 | </ul>
77 | ```
78 | 
79 | 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}}.
80 | 
81 | ## Contributions
82 | 
83 | 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.
84 | 
85 | For problems/suggestions please create an issue on Github.
86 | 
87 | ## Contributors
88 | 
89 | * [@svileng](https://twitter.com/svileng)
90 | 
91 | ## Credits
92 | 
93 | * AngularJS range filter: [http://www.yearofmoo.com/](http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#more-about-loops)
94 | * AngularJS pagination: [http://jsfiddle.net/2ZzZB/56/](http://jsfiddle.net/2ZzZB/56/)
95 | * Other uknown JSFiddles
96 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-simplePagination",
 3 |   "main": "./simplePagination.js",
 4 |   "version": "1.0.3",
 5 |   "keywords": [
 6 |     "angular",
 7 |     "pagination",
 8 |     "static",
 9 |     "paginate",
10 |     "pages"
11 |   ],
12 |   "dependencies": {
13 |     "angular": "*"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | // Generated on Tue Jul 29 2014 12:07:06 GMT+0100 (BST)
 3 | 
 4 | module.exports = function(config) {
 5 |   config.set({
 6 | 
 7 |     // base path that will be used to resolve all patterns (eg. files, exclude)
 8 |     basePath: '',
 9 | 
10 | 
11 |     // frameworks to use
12 |     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13 |     frameworks: ['jasmine'],
14 | 
15 |     plugins: [
16 |           "karma-phantomjs-launcher",
17 |           "karma-jasmine"
18 |         ],
19 | 
20 |     // list of files / patterns to load in the browser
21 |     files: [
22 |         'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js',
23 |         'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-mocks.js',
24 |         'simplePagination.js',
25 |         '*.spec.js'
26 |     ],
27 | 
28 | 
29 |     // list of files to exclude
30 |     exclude: [
31 |     ],
32 | 
33 | 
34 |     // preprocess matching files before serving them to the browser
35 |     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
36 |     preprocessors: {
37 |     },
38 | 
39 | 
40 |     // test results reporter to use
41 |     // possible values: 'dots', 'progress'
42 |     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
43 |     reporters: ['progress'],
44 | 
45 | 
46 |     // web server port
47 |     port: 9876,
48 | 
49 | 
50 |     // enable / disable colors in the output (reporters and logs)
51 |     colors: true,
52 | 
53 | 
54 |     // level of logging
55 |     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
56 |     logLevel: config.LOG_INFO,
57 | 
58 | 
59 |     // enable / disable watching file and executing tests whenever any file changes
60 |     autoWatch: false,
61 | 
62 | 
63 |     // start these browsers
64 |     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
65 |     browsers: ['PhantomJS'],
66 | 
67 | 
68 |     // Continuous Integration mode
69 |     // if true, Karma captures browsers, runs the tests and exits
70 |     singleRun: true
71 |   });
72 | };
73 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-simplePagination",
 3 |   "version": "0.0.9",
 4 |   "private": true,
 5 |   "author": "Svilen Gospodinov <svilen.gospodinov@gmail.com>",
 6 |   "license": "MIT",
 7 |   "devDependencies": {
 8 |     "karma": "^0.12.19",
 9 |     "karma-cli": "0.0.4",
10 |     "karma-jasmine": "^0.1.5",
11 |     "karma-phantomjs-launcher": "^0.1.4"
12 |   },
13 |   "scripts": {
14 |     "test": "karma start"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/simplePagination.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   "use strict";
 3 | 
 4 |   var paginationModule = angular.module('simplePagination', []);
 5 | 
 6 |   paginationModule.factory('Pagination', function() {
 7 | 
 8 |     var pagination = {};
 9 | 
10 |     pagination.getNew = function(perPage) {
11 | 
12 |       perPage = perPage === undefined ? 5 : perPage;
13 | 
14 |       var paginator = {
15 |         numPages: 1,
16 |         perPage: perPage,
17 |         page: 0
18 |       };
19 | 
20 |       paginator.prevPage = function() {
21 |         if (paginator.page > 0) {
22 |           paginator.page -= 1;
23 |         }
24 |       };
25 | 
26 |       paginator.nextPage = function() {
27 |         if (paginator.page < paginator.numPages - 1) {
28 |           paginator.page += 1;
29 |         }
30 |       };
31 | 
32 |       paginator.toPageId = function(id) {
33 |         if (id >= 0 && id <= paginator.numPages - 1) {
34 |           paginator.page = id;
35 |         }
36 |       };
37 | 
38 |       return paginator;
39 |     };
40 | 
41 |     return pagination;
42 |   });
43 | 
44 |   paginationModule.filter('startFrom', function() {
45 |     return function(input, start) {
46 |       if (input === undefined) {
47 |         return input;
48 |       } else {
49 |         return input.slice(+start);
50 |       }
51 |     };
52 |   });
53 | 
54 |   paginationModule.filter('range', function() {
55 |     return function(input, total) {
56 |       total = parseInt(total);
57 |       for (var i = 0; i < total; i++) {
58 |         input.push(i);
59 |       }
60 |       return input;
61 |     };
62 |   });
63 | 
64 | })();
65 | 


--------------------------------------------------------------------------------
/simplePagination.spec.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | describe('simplePagination', function() {
 4 | 
 5 |   var pagination;
 6 | 
 7 |   // load the app
 8 |   beforeEach(module('simplePagination'));
 9 | 
10 |   // get service 
11 |   beforeEach(inject(function(Pagination) {
12 |     pagination = Pagination.getNew();
13 |   }));
14 | 
15 |   it('should paginate', function() {
16 |     pagination.numPages = 2;
17 | 
18 |     expect(pagination.page).toBe(0);
19 | 
20 |     pagination.nextPage();
21 |     expect(pagination.page).toBe(1);   
22 | 
23 |     pagination.prevPage(); 
24 |     expect(pagination.page).toBe(0);
25 |   });
26 | 
27 |   it('should not paginate outside min and max page', function() {
28 |     pagination.numPages = 2;
29 | 
30 |     pagination.page = 0;
31 |     pagination.prevPage();
32 |     expect(pagination.page).toBe(0);
33 | 
34 |     pagination.page = 1;
35 |     pagination.nextPage();
36 |     expect(pagination.page).toBe(1);
37 |   });
38 | 
39 |   it('should jump to a given page id', function() {
40 |     pagination.numPages = 3;
41 | 
42 |     expect(pagination.page).toBe(0);
43 | 
44 |     pagination.toPageId(2);
45 |     expect(pagination.page).toBe(2);
46 |   });
47 | 
48 | });
49 | 


--------------------------------------------------------------------------------