自定义分页插件
html
<div class="row">
<div class="col-xs-12 text-center">
<page page-conf="pageConf"></page>
</div>
</div>
js
$scope.pageConf = PageUtils.initPageConf();
//页面切换回调函数
$scope.pageConf.change = function (num) {
$('body,html').animate({scrollTop:0},100);//点击下一页或者页码等查询列表回到最上面
this.validatePageNo(num);
$scope.query();//加载数据(加载完一定要记得updatePageConf)
};
PageUtils.js(公司后台开发人员书写的)
var PageUtils = {
initPageNavData:function () {
return {
pageNo:1,
nums:['1','2','3','4','5'],
totalPages:5,
isFirst:true,
isLast:true
}
},
getPageNavDataFromPageContent:function (pageData) {
var pageNav = {};
pageNav.isFirst = pageData.first;
pageNav.isLast = pageData.last;
pageNav.pageNo = pageData.number+1;
pageNav.totalPages = pageData.totalPages;
var endPageNavNum = 5;
if(pageData.totalPages <= 5){
endPageNavNum = pageData.totalPages;
}else{
if( pageNav.pageNo >=3 ){
if( pageNav.pageNo >= (pageData.totalPages-2)){
endPageNavNum = pageData.totalPages;
}else{
endPageNavNum = pageNav.pageNo+2;
}
}
}
var nums = [];
for(var i=1;i<=endPageNavNum;i++){
nums.push(i);
}
pageNav.nums = nums;
return pageNav;
},
initPageConf:function () {
return {
currentNo:1,
nums:['1','2','3','4','5'],
totalPages:5,
isFirst:true,
isLast:true,
validatePageNo:function (num) {
if(num < 1){
num = 1;
}
if(this.totalPages > 0 && num > this.totalPages){
num = this.totalPages;
}
this.currentNo = num;
},
updatePageConf : function (pageData) {
this.isFirst = pageData.first;
this.isLast = pageData.last;
this.currentNo = pageData.number+1;
this.totalPages = pageData.totalPages;
var endPageNavNum = 5;
if(pageData.totalPages <= 5){
endPageNavNum = pageData.totalPages;
}else{
if( this.currentNo >=3 ){
if( this.currentNo >= (pageData.totalPages-2)){
endPageNavNum = pageData.totalPages;
}else{
endPageNavNum = this.currentNo+2;
}
}
}
var nums = [];
var startPageNavNum = 1;
if(endPageNavNum > 5){
startPageNavNum = endPageNavNum-4;
}
for(var i=startPageNavNum;i<=endPageNavNum;i++){
nums.push(i);
}
this.nums = nums;
}
}
}
}
效果
注:此为个人笔记及总结,有误或有更好的解决方案请指正!谢谢