Html:
<div id="content" ng-init="$ctrl.init()"> <div demo-pagination conf="$ctrl.paginationConf"></div> </div>
Controller.js:
angular.module('app.demo').controller('demoController', function ($scope,appMarketDataService) {
this.searchField = {
pageNo: 1,
pageSize: 10,
appName: ''
};
this.init = () => {
this.search();
};
this.paginationConf = {
currentPage: 1,
itemsPerPage: 10,
pagesLength: 10,
perPageOptions: [10, 25, 50],
totalItems: 0,
onChange: () => {
this.refresh();
}
};
this.search = () => {
this.paginationConf.currentPage = 1;
this.refresh();
};
this.refresh = () => {
let searchInfo = angular.copy(this.searchField);
searchInfo.pageSize = this.paginationConf.itemsPerPage;
searchInfo.pageNo = this.paginationConf.currentPage;
appMarketDataService.getAppMarketList(searchInfo).then(res => {
this.datas = res.data.appList;
this.paginationConf.totalItems = res.data.total;
});
};
});Module.js
angular.module('app.demo', ['ui.router'])
.config(function ($stateProvider) {
$stateProvider
.state('app.demo', {
params: {
title: 'demo'
}
})
.state('app.demo.list', {
url: '/demo/list',
params: {
title: 'demo List'
},
views: {
'content@app': {
templateUrl: 'app/demo/views/appList.tpl.html',
controller: 'demoController',
controllerAs: '$ctrl'
}
}
})
});Directive.js
angular.module('app').directive('demoPagination', function () {
return {
restrict: 'AE',
replace: true,
scope: {
conf: '='
},
template: '<div>' +
'<div><span class="black">{{ conf.startNumber }} - {{ conf.endNumber }}</span>' +
'of<span class="black">{{ conf.totalItems }}</span>items</div>' +
'<div ng-show="conf.totalItems > 0">' +
'show<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions" ng-change="changeItemsPerPage()"></select>' +
'</div>' +
'<ul class="pagination" ng-show="conf.totalItems > 0">' +
'<li ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()"><span><i class="fa fa-angle-left"></i></span></li>' +
'<li ng-repeat="item in pageList track by $index" ng-class="{active: item == conf.currentPage, separate: item == \'...\'}" ' +
'ng-click="changeCurrentPage(item)">' +
'<span>{{ item }}</span>' +
'</li>' +
'<li ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()"><span><i class="fa fa-angle-right"></i></span></li>' +
'</ul>' +
'</div>',
link: function (scope, element, attrs) {
let conf = scope.conf;
// 获取分页长度
if (conf.pagesLength) {
// 判断一下分页长度
conf.pagesLength = parseInt(conf.pagesLength, 10);
if (!conf.pagesLength) {
conf.pagesLength = defaultPagesLength;
}
// 分页长度必须为奇数，如果传偶数时，自动处理
if (conf.pagesLength % 2 === 0) {
conf.pagesLength += 1;
}
} else {
conf.pagesLength = defaultPagesLength;
}
// 分页选项可调整每页显示的条数
if (!conf.perPageOptions) {
conf.perPageOptions = defaultPagesLength;
}
// 定义pageList数组
function getPagination () {
// conf.currentPage
if (conf.currentPage) {
conf.currentPage = parseInt(scope.conf.currentPage, 10);
}
if (!conf.currentPage) {
conf.currentPage = 1;
}
if (conf.totalItems) {
// 总数
conf.totalItems = parseInt(conf.totalItems, 10);
// 当前页 startNumber
conf.startNumber = (conf.currentPage - 1) * conf.itemsPerPage + 1;
// 当前页 endNumber
conf.endNumber = conf.currentPage <= parseInt(conf.totalItems / conf.itemsPerPage)
? conf.currentPage * conf.itemsPerPage
: conf.startNumber + conf.totalItems % conf.itemsPerPage - 1;
}
// conf.totalItems
if (!conf.totalItems) {
conf.totalItems = 0;
return;
}
// conf.itemsPerPage
if (conf.itemsPerPage) {
conf.itemsPerPage = parseInt(conf.itemsPerPage, 10);
}
if (!conf.itemsPerPage) {
conf.itemsPerPage = defaultPerPage;
}
// numberOfPages
conf.numberOfPages = Math.ceil(conf.totalItems / conf.itemsPerPage);
// 如果分页总数>0，并且当前页大于分页总数
if (scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages) {
scope.conf.currentPage = scope.conf.numberOfPages;
}
// 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中
let perPageOptionsLength = scope.conf.perPageOptions.length;
// 定义状态
let perPageOptionsStatus;
for (var i = 0; i < perPageOptionsLength; i++) {
if (conf.perPageOptions[i] == conf.itemsPerPage) {
perPageOptionsStatus = true;
}
}
// 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中
if (!perPageOptionsStatus) {
conf.perPageOptions.push(conf.itemsPerPage);
}
// 对选项进行sort
conf.perPageOptions.sort(function (a, b) {
return a - b;
});
// 页码相关
scope.pageList = [];
if (conf.numberOfPages <= conf.pagesLength) {
// 判断总页数如果小于等于分页的长度，若小于则直接显示
for (i = 1; i <= conf.numberOfPages; i++) {
scope.pageList.push(i);
}
} else {
// 总页数大于分页长度（此时分为三种情况：1.左边没有...2.右边没有...3.左右都有...）
// 计算中心偏移量
let offset = (conf.pagesLength - 1) / 2;
if (conf.currentPage <= offset) {
// 左边没有...
for (i = 1; i <= offset + 1; i++) {
scope.pageList.push(i);
}
scope.pageList.push('...');
scope.pageList.push(conf.numberOfPages);
} else if (conf.currentPage > conf.numberOfPages - offset) {
scope.pageList.push(1);
scope.pageList.push('...');
for (i = offset + 1; i >= 1; i--) {
scope.pageList.push(conf.numberOfPages - i);
}
scope.pageList.push(conf.numberOfPages);
} else {
// 最后一种情况，两边都有...
scope.pageList.push(1);
scope.pageList.push('...');
for (i = Math.ceil(offset / 2); i >= 1; i--) {
scope.pageList.push(conf.currentPage - i);
}
scope.pageList.push(conf.currentPage);
for (i = 1; i <= offset / 2; i++) {
scope.pageList.push(conf.currentPage + i);
}
scope.pageList.push('...');
scope.pageList.push(conf.numberOfPages);
}
}
scope.$parent.conf = conf;
}
// prevPage
scope.prevPage = function () {
if (conf.currentPage > 1) {
conf.currentPage -= 1;
}
getPagination();
if (conf.onChange) {
conf.onChange();
}
};
// nextPage
scope.nextPage = function () {
if (conf.currentPage < conf.numberOfPages) {
conf.currentPage += 1;
}
getPagination();
if (conf.onChange) {
conf.onChange();
}
};
// 变更当前页
scope.changeCurrentPage = function (item) {
if (item == '...') {
return;
} else {
conf.currentPage = item;
getPagination();
// conf.onChange()函数
if (conf.onChange) {
conf.onChange();
}
}
};
// 修改每页展示的条数
scope.changeItemsPerPage = function () {
// 条数变更，当前页将重置为1
conf.currentPage = 1;
getPagination();
// conf.onChange()函数
if (conf.onChange) {
conf.onChange();
}
};
scope.$watch('conf.totalItems', function (value, oldValue) {
getPagination();
});
}
};
});