Last active
August 29, 2015 14:16
-
-
Save AllenFang/eb56a4d6918c6773c7ed to your computer and use it in GitHub Desktop.
Blogger for angularjs pangation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module("demoApp", []) | |
| .controller("ProductController", function($scope){ | |
| $scope.currPage = 3; | |
| $scope.numPerPage = 5; | |
| $scope.products = []; | |
| for(var i=0;i<50;i++){ | |
| $scope.products[i] = "Product " + i; | |
| } | |
| $scope.changeProduct = function(){ | |
| console.log($scope.currPage); | |
| var begin = (($scope.currPage - 1) * $scope.numPerPage), | |
| end = begin + $scope.numPerPage; | |
| $scope.filteredProducts = $scope.products.slice(begin, end); | |
| }; | |
| $scope.changeProduct(); | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="demoApp"> | |
| <head> | |
| <title>A pagnation demo</title> | |
| <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css"> | |
| <script src="/bower_components/jquery/dist/jquery.min.js"></script> | |
| <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> | |
| <script src="/bower_components/angular/angular.min.js"></script> | |
| <script src="./js/app.js"></script> | |
| <script src="./js/directive.js"></script> | |
| </head> | |
| <body> | |
| <h1>A pagnation directive implementation</h1> | |
| <div ng-controller="ProductController" class="col-md-offset-4 col-md-4"> | |
| <ul> | |
| <li ng-repeat="p in filteredProducts">{{p}}</li> | |
| </ul> | |
| <!-- | |
| item-size 表示所有資料的筆數 | |
| num-per-page 設定一頁顯示幾筆資料 | |
| page-size 下方顯示分頁的數量 | |
| ng-model 目前頁數 | |
| ng-change 當換頁時的 callback function | |
| --> | |
| <pagination item-size="{{products.length}}" | |
| num-per-page="{{numPerPage}}" | |
| page-size="5" | |
| ng-model="currPage" | |
| ng-change="changeProduct()"></pagination> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module("demoApp", []) | |
| .controller("PaginationController", function($scope, $element, $attrs){ | |
| var self = this, | |
| ngModelCtrl; | |
| this.init = function(ngModelCtrl_){ | |
| ngModelCtrl = ngModelCtrl_; | |
| ngModelCtrl.$render = function(){ | |
| self._changePagationState(); | |
| self.render(); | |
| } | |
| $scope.totalPages = Math.ceil( | |
| $scope.itemSize/parseInt($attrs.numPerPage)); | |
| }; | |
| this._changePagationState = function(){ | |
| $scope.page = parseInt(ngModelCtrl.$viewValue) || 1; | |
| $scope.showFirst = $scope.page == 1?false:true; | |
| $scope.showLast = $scope.page == $scope.totalPages?false:true; | |
| } | |
| $scope.selectPage = function(page){ | |
| ngModelCtrl.$setViewValue(page); | |
| ngModelCtrl.$render(); | |
| }; | |
| }) | |
| .directive("pagination", function(){ | |
| return{ | |
| scope:{ | |
| itemSize: "@" | |
| }, | |
| restrict: "E", | |
| require: ['pagination', '?ngModel'], | |
| controller: "PaginationController", | |
| templateUrl: "paginationTemplate.html", | |
| link: function(scope, el, attr, ctrls){ | |
| var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1]; | |
| var pageSize = parseInt(attr.pageSize); | |
| paginationCtrl.init(ngModelCtrl); | |
| paginationCtrl.render = function(){ | |
| scope.pages = getPageList(); | |
| }; | |
| function getPageList(){ | |
| var half = Math.floor(pageSize/2), | |
| isAlign = pageSize%2==1, | |
| pages = [createPage(scope.page, true)], | |
| flag = scope.page, | |
| windows = half, | |
| stopPoint; | |
| while(flag-1 > 0 && windows > 0){ | |
| pages.push(createPage(--flag, false)); | |
| windows--; | |
| } | |
| stopPoint = flag; | |
| flag = scope.page; | |
| windows += isAlign?half:half-1; | |
| while(flag+1 <= scope.totalPages && windows > 0){ | |
| pages.push(createPage(++flag, false)); | |
| windows--; | |
| } | |
| while(windows > 0){ | |
| pages.push(createPage(--stopPoint, false)); | |
| windows--; | |
| } | |
| return pages.sort(function(a, b){ | |
| return a.text-b.text | |
| }); | |
| } | |
| function createPage(page, active){ | |
| return{ | |
| text: page, | |
| active:active | |
| }; | |
| } | |
| } | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <ul class="pagination"> | |
| <li ng-class="{disabled: !showFirst}"> | |
| <a href="#" ng-click="selectPage(1)">First</a> | |
| </li> | |
| <li ng-repeat="page in pages" ng-class="{active: page.active}"> | |
| <a href="#" ng-click="selectPage(page.text)">{{page.text}}</a> | |
| </li> | |
| <li ng-class="{disabled: !showLast}"> | |
| <a href="#" ng-click="selectPage(totalPages)">Last</a> | |
| </li> | |
| </ul> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment