首页 > 代码库 > angularjs中的分页指令
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;">«</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;">»</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 } };
angularjs中的分页指令
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。