AngularJS分页实现

基本思路

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

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

展示

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

CSS部分

/**
 * Pagination
 */
 .pagination{
  margin: 40px auto 20px auto;
 }

 .pagination ul{
   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;
   60px;
 }

 .pagination-input{
  border-style: solid;
  border-color: #B6B6B6;
  border- 1px;
   60px;
 }

.pagination-next,.pagination-prev{
   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