分页设计思想

//前端控制层
//构建分页栏	
//这是保证页面显示五个页码的设计
    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}}页&nbsp;</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>