angularjs中的分页指令

自定义指令

import angular from 'angular';/*** @ngdoc module* @name components.page* @description 分页directive*/
export default angular.module('pageDirective', []).directive('ngPage', function () {return {restrict: 'E',scope: {totalCount: '=',pageSize: '=',param: '=',pageItmes: '=',currentPage: '=',goPage: '&',showMaxPage: '@',GO: '@'},controller: controller,template: templateFunction}function controller($scope, $element, $attrs) {var size = 0;$scope.$watch('pageSize', function (nvalue, ovalue) {size = parseInt(nvalue);if (typeof(ovalue) !== 'undefined') {$scope.currentPage = parseInt(($scope.currentPage - 1) * Number(ovalue) / size) + 1;}$scope.totalPage = getTotalPages();});//计算总页数var getTotalPages = function () {return Math.ceil($scope.totalCount / size);};//监控总记录条数是否发生变化，如改变，需要重新计算页数$scope.$watch('totalCount', function () {$scope.totalPage = getTotalPages();if ($scope.totalPage == undefined || isNaN($scope.totalPage)) {$scope.totalPage = 1}});//监控总页数，调整展示页码$scope.$watch('totalPage', function () {$scope.pages = getPages($scope.totalPage, $scope.currentPage);});//监控跳转的页数只能为数字$scope.$watch('GO', function () {var re = /[^\d]/g;if ($scope.GO !== '' && !re.test($scope.GO) && $scope.GO > 0) {$scope.pages = getPages($scope.totalPage, $scope.currentPage);} else {$scope.GO = '';}});//监控当前页，然后调整展示页码$scope.$watch('currentPage', function () {// debugger;$scope.pages = getPages($scope.totalPage, $scope.currentPage);});//跳转到某一页$scope.setCurrentPage = function (pageno) {if (pageno === '...' || pageno === 0 || pageno > $scope.totalPage || pageno === '') {return;}$scope.currentPage = pageno;$scope.param.page.currentPage = pageno;$scope.goPage($scope.param);$scope.GO = '';};//每页显示size改变$scope.changeSize = function () {$scope.param.page = {currentPage: 1,pageSize: $scope.pageSize};$scope.goPage($scope.param);};var getPages = function (totalPage, currentPage) {var pages = [];currentPage = parseInt(currentPage);totalPage = parseInt(totalPage);if (totalPage === 0) {pages.push(1);}//总页数<最大展示页数：展示全部else if (totalPage <= $attrs.showMaxPage) {for (var i = 1; i <= totalPage; i++) {pages.push(i);}}//当前页靠近首页前4页，显示：首页前4页，..., 尾页后2页else if (totalPage > $attrs.showMaxPage && currentPage <= 4) {pages.push(1);pages.push(2);pages.push(3);pages.push(4);pages.push("...");pages.push(totalPage - 1);pages.push(totalPage);}// 当前页靠近尾页后4页，显示else if (totalPage > $attrs.showMaxPage && (totalPage - currentPage) < 4) {pages.push(1);pages.push(2);pages.push("...");pages.push(totalPage - 3);pages.push(totalPage - 2);pages.push(totalPage - 1);pages.push(totalPage);}//当前页既不靠近首页前4页也不靠近尾页后4页，else {pages.push(1);pages.push(2);pages.push("...");pages.push(currentPage - 1);pages.push(currentPage);pages.push(currentPage + 1);pages.push("...");pages.push(totalPage);}return pages;};}function templateFunction() {return '<nav>' +'<ul class="pagination pagination-sm" style="font-size:15px;">' +'<li><a ng-click="setCurrentPage(currentPage-1)" style="font-size:13px;">&laquo;</a></li>' +'<li ng-class="{active: pageno == currentPage}" ng-repeat="pageno in pages" style="font-size:13px;">' +'<a ng-click="setCurrentPage(pageno)">{{pageno}}</a></li>' +'<li><a ng-click="setCurrentPage(currentPage-0+1)" style="font-size:13px;">&raquo;</a></li>' +'<li><span>每页' +'<select ng-model="pageSize" ng-change="changeSize()" style="width: 55px;" ng-options="item for item  in pageItmes">' +'</select></span>' +'</li>' +'<li><span><input type="text" style="width: 30px;" ng-model="GO"/></span></li>' +'<li><a ng-disabled="false" class="ng-binding" ng-click="setCurrentPage(GO)">GO</a></li>' +'</ul>' +'</nav>';}
}).name;

页面中调用

<page-directive total-count="param.page.totalCount" page-size="param.page.pageSize" param="param"page-itmes="param.selectCount" show-max-page="9" current-page="param.page.currentPage"go-page="queryList(param.page.currentPage)"></page-directive>

页面中获取数据的方法是queryList，go-page的时候把currentpage作为传递过去即可发送请求，取得想要的结果。

controller中需要传入初始化的数据

//初始化分页信息
$scope.param = {selectCount: [5, 10, 15],page: {currentPage: 1,pageSize: 5}
};