实现效果:
实现步骤:
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 to of 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', [, , , , ])
.constant('pagingConstant', {
CURRENTPAGE: ,
ITEMSPERPAGE:
})
.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) : ;
if (scope.conf.pagesLength % === ) {
scope.conf.pagesLength = scope.conf.pagesLength - ;
}
// 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) : ;
// 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) : ;
}
scope.conf.itemsPerPage = parseInt(localStorage[scope.conf.rememberPerPage]);
} else {
scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : ;
}
// numberOfPages
scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems / scope.conf.itemsPerPage);
// judge currentPage > scope.numberOfPages
if (scope.conf.currentPage < ) {
scope.conf.currentPage = ;
}
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 = ; 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 = ; i <= scope.conf.numberOfPages; i++) {
scope.pageList.push(i);
}
} else {
var offset = (scope.conf.pagesLength - ) / ;
if (scope.conf.currentPage <= offset) {
for (i = ; i <= offset + ; 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();
scope.pageList.push('...');
for (i = offset + ; i >= ; i--) {
scope.pageList.push(scope.conf.numberOfPages - i);
}
scope.pageList.push(scope.conf.numberOfPages);
} else {
scope.pageList.push();
scope.pageList.push('...');
for (i = Math.ceil(offset / ); i >= ; i--) {
scope.pageList.push(scope.conf.currentPage - i);
}
scope.pageList.push(scope.conf.currentPage);
for (i = ; i <= offset / ; 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 = ;
};
// prevPage
scope.prevPage = function () {
if (scope.conf.currentPage > ) {
scope.conf.currentPage -= ;
}
};
// nextPage
scope.nextPage = function () {
if (scope.conf.currentPage < scope.conf.numberOfPages) {
scope.conf.currentPage += ;
}
};
//lastPage
scope.lastPage = function () {
scope.conf.currentPage = scope.conf.numberOfPages;
};
//is first page
scope.isFirst = function () {
if (scope.conf.currentPage > ) {
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(/[^-]/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:
}; });