//前端控制层
//构建分页栏
//这是保证页面显示五个页码的设计
buildPageLabel=function(){
$scope.pageLabel=[];
//处理起始页码 = 当前页码 - 2
var firstPage=$scope.searchMap.pageNo - 2 <= 1 ? 1 : $scope.searchMap.pageNo - 2;
//处理末尾页码 = 起始页码 + 4;
var lastPage=firstPage + 4 > $scope.resultMap.totalPages ? $scope.resultMap.totalPages : firstPage + 4;//截止页码
//找回起始页码 = 末尾页码 -4;
firstPage = lastPage - 4 <= 1 ? 1 : lastPage - 4;
for(var i=firstPage;i<=lastPage;i++){
$scope.pageLabel.push(i);
}
}
//前端页面 禁用启用样式设计 用到angularjs指令
<div class="fr page">
<div class="sui-pagination pagination-large">
<ul>
<li class="prev disabled" ng-class="{'disabled':searchMap.pageNo==1}">
<a href="javascript:void(0);" ng-click="queryByPage(searchMap.pageNo - 1)">«</a>
</li>
<li class="dotted" ng-if="resultMap.totalPages>5&&searchMap.pageNo>3">
<span>...</span>
</li>
<li class="active">
<a href="#" ng-repeat="page in pageLabel" ng-click="queryByPage(page)">{{page}}</a>
</li>
<li class="dotted" ng-if="resultMap.totalPages>5&&searchMap.pageNo+2<resultMap.totalPages">
<span>...</span>
</li>
<li class="next" ng-class="{'disabled':searchMap.totalPages==searchMap.pageNo}">
<a href="javascript:void(0);" ng-click="queryByPage(searchMap.pageNo + 1)">»</a>
</li>
</ul>
<div><span>共{{resultMap.totalPages}}页 </span><span>
到第<!--此时pageNo变成了字符串 向后端传递时用integer接收会报错所以前台控制层要加以判断-->
<input type="text" class="page-num" ng-model="searchMap.pageNo" style="width: 20px">
页 <button class="page-confirm" ng-model="searchMap.pageNo" ng-click="queryByPage(searchMap.pageNo)">确定</button></span></div>
</div>
</div>