AngularJS分页实现

基本思路

一开始页码为1，Service向服务器端获取对应信息；点击上/下一页/跳转，通过对应的页码向服务器端获取对应的信息。

由于后台暂时没弄好，我实现的过程中直接读取准备好的JSON文件，通过页码获取对应的信息段并通过ng-repeat在页面显示具体信息。

展示

一开始直接在Controller中实现分页的功能代码

CSS部分

 /**
  * Pagination
  */
  .pagination{
   margin: 40px auto 20px auto;
  }
 
  .pagination ul{
   width: 500px;
  }
 
  .pagination-btn-group{
   float: left;
   margin-left: 40px;
  }
 
  .pagination-btn-group:after{
   display: table;
   content: " ";
   clear: both;
  }
 
  .pagination ul li:hover,.pagination-btn-group div:hover{
   cursor: pointer;
   background-color: #B6B6B6;
   color: #EBEBEB;
  }
 
  .pagination-btn,.pagination-input,.pagination-next,.pagination-jmp,.pagination-prev{
   display: block;
   float: left;
   height: 36px;
   text-align: center;
   margin-right: 8px;
   border-radius: 5px;
   margin-bottom: 40px;
  }
  .pagination-btn,.pagination-jmp{
   background-color: #EBEBEB;
   color: #B6B6B6;
   line-height: 36px;
   width: 60px;
  }
 
  .pagination-input{
   border-style: solid;
   border-color: #B6B6B6;
   border-width: 1px;
   width: 60px;
  }
 
 .pagination-next,.pagination-prev{
   width: 80px;
   background-color: #EBEBEB;
   color: #B6B6B6;
   line-height: 36px;
 }
 
 .active{
   background-color: #B6B6B6;
   color: #EBEBEB;
 }
 
 .disabled{
   display: none;
 }
 /*end of pagination*/

HTML部分

 <div class="pagination">
   <ul>
     <li class="pagination-btn" ng-class="{true:'active'}[currentPage == page]" ng-repeat="page in pages" ng-click="selectPage(page)">
       {{page}}
     </li>
     <input class="pagination-input" ng-model="destPage">
     <li class="pagination-jmp" ng-click="skipPage()">跳转</li>
   </ul>
   <div class="pagination-btn-group">
     <div class="pagination-prev" ng-click="prevPage()" ng-class="{true:'disabled'}[currentPage == 1]">&lt;上一页</div>
     <div class="pagination-next" ng-click="nextPage()" ng-class="{true:'disabled'}[currentPage == endPage]">下一页&gt;</div>
   </div>
 </div>

ng-class="{true:'active'}[currentPage == page]" 表示当page为当前页面时应用.active的CSS样式

在angular中为我们提供了3种方案处理class：

1.scope变量绑定

　　如：<div class=”{{test}}”></div> 然后在Controller中设置$scope.test值，不推荐使用，Controller中应该放业务逻辑部分，Service与服务器交互，Directive与页面交互

2.字符串数组形式

　　形如：<div ng-class="{true: 'active', false: 'inactive'}[expression]"> expression为true，则active；否则inactive

3.对象key/value处理

　　形如：<div ng-class {'selected': isSelected, 'car': isCar}"> isSelected为true，增加.selected样式；isCar为true，增加car样式

功能部分

 $scope.loadPagination = function() {
   $scope.pages = [];
   var i,j;
 
   if($scope.currentPage == "1..."){
     $scope.currentPage = 1;
   }else if($scope.currentPage == "..." + $scope.endPage){
     $scope.currentPage = $scope.endPage;
   }
 
   if(($scope.endPage <= 5) || ($scope.currentPage <= 3)){
     $scope.pages[0] = 1;
     for(i = 1;i < 5;i++){
       if(i == $scope.endPage)
         break;
       $scope.pages[i] = i + 1;
     }
     if(i < $scope.endPage){
       $scope.pages[4] = "..." + $scope.endPage;
     }
   }else if($scope.currentPage <= $scope.endPage-3){
     $scope.pages[0] = "1...";
     $scope.pages[1] = $scope.currentPage - 1;
     $scope.pages[2] = $scope.currentPage;
     $scope.pages[3] = $scope.currentPage + 1;
     $scope.pages[4] = "..." + $scope.endPage;
   }else{
     $scope.pages[0] = "1...";
     $scope.pages[1] = $scope.endPage - 3;
     $scope.pages[2] = $scope.endPage - 2;
     $scope.pages[3] = $scope.endPage - 1;
     $scope.pages[4] = $scope.endPage;
   }
 
   var start=($scope.currentPage - 1) * $scope.pageSize;
   var end=$scope.currentPage * $scope.pageSize;
   $scope.dialogList = $scope.realDialogList.slice(start,end);
 };
 
 $scope.prevPage = function() {
   $scope.currentPage -= 1;
   $scope.loadPagination();
 };
 
 $scope.nextPage = function() {
   $scope.currentPage += 1;
   $scope.loadPagination();
 };
 
 $scope.skipPage = function() {
   var destPage=Number($scope.destPage);
   $scope.destPage = "";
   if(isNaN(destPage) || destPage <= 0 || destPage > $scope.endPage){
     return ;
   }
   $scope.currentPage = destPage;
   $scope.loadPagination();
 };
 
 $scope.selectPage = function(selected) {
   $scope.currentPage=selected;
   $scope.loadPagination();
 };

$scope.realDialogList为Service获取的JSON信息，$scope.dialogList为要展示在页面上的信息

这里关键就是loadPagination()，我的思路是设置5个按钮的分页，第一个按钮作为首页链接，最后一个按钮作为末页链接，剩下三个按钮，将当前页码设置为中间按钮 。

根据分页栏首/末页按钮数字分为三种状态：

　　1. 首页为'1'，此时 页码<=3 或 末页<=5，当末页>5时，设置为'...X'

　　2. 首页为'1...'，末页为'...X'，此时 页码<=末页-3

　　3. 首页位'1...'，末页为‘X'，其他情况

代码：http://pan.baidu.com/s/1hqEZi0s

推荐将分页写成Directive