实现效果:
实现步骤:
1.分页页面:page.html,页面多余样式,需要自己去除。
<div class="row" ng-show="conf.totalItems > 0"> <div class="col-md-5 col-sm-12"> <div class="dataTables_info" id="sample_1_info" role="status" aria-live="polite" ng-show="true"> <!--Showing 1 to 5 of 25 entries--> <!--total {{ conf.numberOfPages }} page,total {{ conf.totalItems }}--> the<input type="text" class="form-control input-xsmall input-inline" ng-model="jumpPageNum" ng-keyup="jumpToPage($event)"/>page, per page<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions " ng-change="changeItemsPerPage()" class="form-control input-xsmall input-inline"></select> /total<strong>{{ conf.totalItems }}</strong>item <!--A total of {{ conf.numberOfPages }} pages article {{ conf.totalItems }}--> </div> </div> <div class="col-md-7 col-sm-12"> <div class="dataTables_paginate paging_bootstrap_full_number" id="sample_1_paginate"> <ul class="pagination" style="visibility: visible;"> <li ng-click="firstPage()" ng-class="{disabled:isFirst()}"><a href="javascript:" title="first"><i class="fa fa-angle-double-left"></i></a> </li> <li ng-click="prevPage()" ng-class="{disabled:isFirst()}"><a href="javascript:" title="prev"><i class="fa fa-angle-left"></i></a></li> <li ng-repeat="item in pageList track by $index" ng-click="changeCurrentPage(item)" ng-class="{active: item == conf.currentPage, separate: item == '...'}"><a href="javascript:">{{ item }}</a> </li> <li ng-click="nextPage()" ng-class="{disabled:isEnd()}"><a href="javascript:" title="next"><i class="fa fa-angle-right"></i></a></li> <li ng-click="lastPage()" ng-class="{disabled:isEnd()}"><a href="javascript:" title="{{ getText('last') }}"><i class="fa fa-angle-double-right"></i></a></li> </ul> </div> </div> </div>
2.分页控件:
angular.module('bet.paging', []) .constant('pageSizeArray', [10, 15, 20, 30, 50]) .constant('pagingConstant', { CURRENTPAGE: 1, ITEMSPERPAGE: 20 }) .directive('paging', paging); function paging(pageSizeArray) { return { restrice: 'EA', templateUrl: '/utils/page.html', replace: true, scope: { conf: '=' }, link: function (scope, element, attrs) { scope.changeCurrentPage = function (item) { if (item == '...') { return; } else { scope.conf.currentPage = item; } }; scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : 9; if (scope.conf.pagesLength % 2 === 0) { scope.conf.pagesLength = scope.conf.pagesLength - 1; } // conf.erPageOptions if (!scope.conf.perPageOptions) { scope.conf.perPageOptions = pageSizeArray; } // pageList function getPagination() { // conf.currentPage scope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : 1; // conf.totalItems scope.conf.totalItems = parseInt(scope.conf.totalItems); // conf.itemsPerPage (default:15) if (scope.conf.rememberPerPage) { if (!parseInt(localStorage[scope.conf.rememberPerPage])) { localStorage[scope.conf.rememberPerPage] = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15; } scope.conf.itemsPerPage = parseInt(localStorage[scope.conf.rememberPerPage]); } else { scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15; } // numberOfPages scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems / scope.conf.itemsPerPage); // judge currentPage > scope.numberOfPages if (scope.conf.currentPage < 1) { scope.conf.currentPage = 1; } if (scope.conf.currentPage > scope.conf.numberOfPages) { scope.conf.currentPage = scope.conf.numberOfPages; } // jumpPageNum scope.jumpPageNum = scope.conf.currentPage; var perPageOptionsLength = scope.conf.perPageOptions.length; // define state var perPageOptionsStatus; for (var i = 0; i < perPageOptionsLength; i++) { if (scope.conf.perPageOptions[i] == scope.conf.itemsPerPage) { perPageOptionsStatus = true; } } if (!perPageOptionsStatus) { scope.conf.perPageOptions.push(scope.conf.itemsPerPage); } scope.conf.perPageOptions.sort(function (a, b) { return a - b }); scope.pageList = []; if (scope.conf.numberOfPages <= scope.conf.pagesLength) { for (i = 1; i <= scope.conf.numberOfPages; i++) { scope.pageList.push(i); } } else { var offset = (scope.conf.pagesLength - 1) / 2; if (scope.conf.currentPage <= offset) { for (i = 1; i <= offset + 1; i++) { scope.pageList.push(i); } scope.pageList.push('...'); scope.pageList.push(scope.conf.numberOfPages); } else if (scope.conf.currentPage > scope.conf.numberOfPages - offset) { scope.pageList.push(1); scope.pageList.push('...'); for (i = offset + 1; i >= 1; i--) { scope.pageList.push(scope.conf.numberOfPages - i); } scope.pageList.push(scope.conf.numberOfPages); } else { scope.pageList.push(1); scope.pageList.push('...'); for (i = Math.ceil(offset / 2); i >= 1; i--) { scope.pageList.push(scope.conf.currentPage - i); } scope.pageList.push(scope.conf.currentPage); for (i = 1; i <= offset / 2; i++) { scope.pageList.push(scope.conf.currentPage + i); } scope.pageList.push('...'); scope.pageList.push(scope.conf.numberOfPages); } } if (scope.conf.onChange) { scope.conf.onChange(); } scope.$parent.conf = scope.conf; } // firstPage scope.firstPage = function () { scope.conf.currentPage = 1; }; // prevPage scope.prevPage = function () { if (scope.conf.currentPage > 1) { scope.conf.currentPage -= 1; } }; // nextPage scope.nextPage = function () { if (scope.conf.currentPage < scope.conf.numberOfPages) { scope.conf.currentPage += 1; } }; //lastPage scope.lastPage = function () { scope.conf.currentPage = scope.conf.numberOfPages; }; //is first page scope.isFirst = function () { if (scope.conf.currentPage > 1) { return false; } return true; }; //is end page scope.isEnd = function () { if (scope.conf.currentPage < scope.conf.numberOfPages) { return false; } return true; }; // 跳转页 scope.jumpToPage = function () { scope.jumpPageNum = scope.jumpPageNum.replace(/[^0-9]/g, ''); if (scope.jumpPageNum !== '') { scope.conf.currentPage = scope.jumpPageNum; } }; scope.changeItemsPerPage = function () { if (scope.conf.rememberPerPage) { localStorage.removeItem(scope.conf.rememberPerPage); } }; scope.$watch(function () { var newValue = scope.conf.currentPage + ' ' + scope.conf.totalItems + ' '; if (scope.conf.rememberPerPage) { if (localStorage[scope.conf.rememberPerPage]) { newValue += localStorage[scope.conf.rememberPerPage]; } else { newValue += scope.conf.itemsPerPage; } } else { newValue += scope.conf.itemsPerPage; } return newValue; }, getPagination); //scope.getText = function (key) { // return currentPage.text[key]; //}; } } };
3.页面调用:
<paging conf="pagingConf"></paging>
//声明user模块并引入bet.paging子模块 angular.module('bet.user', ['bet.paging']); angular .module('bet.user') .controller('userAppCtrl', userAppCtrl); //依赖注入pagingConstant userAppCtrl.$inject = ['$scope', 'pagingConstant']; function userAppCtrl($scope, pagingConstant) { //paging config $scope.pagingConf = { currentPage: pagingConstant.CURRENTPAGE, itemsPerPage: pagingConstant.ITEMSPERPAGE, totalItems:500 }; });