1.html
<ul class="carListFy" ng-show="carLists.length">
<li class="carListPre" ng-class="{'prePageGry':pageNum==1}" ui-sref="m.carList({pageNum:pageNum-1<1?1:pageNum-1,groupKey:groupKey,searchKey:carListKey})"></li>
<li class="carListPage" ng-repeat="page in carListPages" ui-sref="m.carList({pageNum:page,groupKey:groupKey,searchKey:carListKey})" ng-class="{'bluePage':page==pageNum}">{{page}}</li>
<li class="carListAfter" ng-class="{'aftPageGry':pageNum==carListTotal}" ui-sref="m.carList({pageNum:pageNum-(-1)>carListTotal?carListTotal:pageNum-(-1),groupKey:groupKey,searchKey:carListKey})"></li>
<li class="carListPageTo">
<span>{{'tur-page' | translate}}</span>
<input type="text" ng-model="turnToPage">
</li>
<li class="carListSure">
<span ng-click="goToPage(turnToPage)">{{'sure' | translate}}</span>
</li>
</ul>
2.js
// 分页(pageTotal:总页数,pageCount:一页的条目数,currentPage:当前页数)
ddpAdminApp.service('Pagination', function () {
this.page = function (pageTotal, pageCount, currentPage) {
this.pageNumArray = [];
var pageStart;
var pageEnd;
if (currentPage <= pageCount / 2 + 1) {
pageStart = 1;
pageEnd = pageCount;
} else if (currentPage > pageCount / 2 + 1) {
pageStart = currentPage - pageCount / 2;
pageEnd = currentPage + pageCount / 2 - 1;
}
// 对pageEnd 进行校验,并重新赋值
if (pageEnd > pageTotal) {
pageEnd = pageTotal;
}
if (pageEnd <= pageCount) {// 当不足pageNum数目时,要全部显示,所以pageStart要始终置为1
pageStart = 1;
}
for (var i = pageStart; i <= pageEnd; i++) {
this.pageNumArray.push(i);
}
return (this.pageNumArray);
}
})
3.css
.carListFy {
float: right;
}
.carListFy > li {
display: inline-block;
vertical-align: middle;
font-size: 12px;
font-weight: normal;
}
.carListPre {
height: 20px;
width: 20px;
cursor: pointer;
background: url(../images/page_pre_black.png) no-repeat center center/20px 20px;
}
.carListPage {
height: 20px;
min-width: 20px;
padding: 0 2px;
cursor: pointer;
border: 1px solid #dadada;
color: #27282A;
text-align: center;
line-height: 19px;
}
.carListAfter {
height: 20px;
width: 20px;
cursor: pointer;
background: url(../images/page_aft_black.png) no-repeat center center/20px 20px;
}
.carListPageTo {
margin-left: 20px;
}
.carListPageTo > span {
color: #686868;
}
.carListPageTo > input {
border: 1px solid #dadada;
width: 30px;
text-align: center;
line-height:19px;
}
.carListSure {
color: #188AE2;
margin-left: 20px;
cursor: pointer;
}