AngularJS分页实现

基本思路

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

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

 

展示

 

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

CSS部分

 1 /**
 2  * Pagination
 3  */
 4  .pagination{
 5   margin: 40px auto 20px auto;
 6  }
 7 
 8  .pagination ul{
 9   width: 500px;
10  }
11 
12  .pagination-btn-group{
13   float: left;
14   margin-left: 40px;
15  }
16 
17  .pagination-btn-group:after{
18   display: table;
19   content: " ";
20   clear: both;
21  }
22 
23  .pagination ul li:hover,.pagination-btn-group div:hover{
24   cursor: pointer;
25   background-color: #B6B6B6;
26   color: #EBEBEB;
27  }
28 
29  .pagination-btn,.pagination-input,.pagination-next,.pagination-jmp,.pagination-prev{
30   display: block;
31   float: left;
32   height: 36px;
33   text-align: center;
34   margin-right: 8px;
35   border-radius: 5px;
36   margin-bottom: 40px;
37  }
38  .pagination-btn,.pagination-jmp{
39   background-color: #EBEBEB;
40   color: #B6B6B6;
41   line-height: 36px;
42   width: 60px;
43  }
44 
45  .pagination-input{
46   border-style: solid;
47   border-color: #B6B6B6;
48   border-width: 1px;
49   width: 60px;
50  }
51 
52 .pagination-next,.pagination-prev{
53   width: 80px;
54   background-color: #EBEBEB;
55   color: #B6B6B6;
56   line-height: 36px;
57 }
58 
59 .active{
60   background-color: #B6B6B6;
61   color: #EBEBEB;
62 }
63 
64 .disabled{
65   display: none;
66 }
67 /*end of pagination*/

 

HTML部分

 1 <div class="pagination">
 2   <ul>
 3     <li class="pagination-btn" ng-class="{true:'active'}[currentPage == page]" ng-repeat="page in pages" ng-click="selectPage(page)">
 4       {{page}}
 5     </li>
 6     <input class="pagination-input" ng-model="destPage">
 7     <li class="pagination-jmp" ng-click="skipPage()">跳转</li>
 8   </ul>
 9   <div class="pagination-btn-group">
10     <div class="pagination-prev" ng-click="prevPage()" ng-class="{true:'disabled'}[currentPage == 1]">&lt;上一页</div>
11     <div class="pagination-next" ng-click="nextPage()" ng-class="{true:'disabled'}[currentPage == endPage]">下一页&gt;</div>
12   </div>
13 </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样式

 

功能部分

 1 $scope.loadPagination = function() {
 2   $scope.pages = [];
 3   var i,j;
 4 
 5   if($scope.currentPage == "1..."){
 6     $scope.currentPage = 1;
 7   }else if($scope.currentPage == "..." + $scope.endPage){
 8     $scope.currentPage = $scope.endPage;
 9   }
10 
11   if(($scope.endPage <= 5) || ($scope.currentPage <= 3)){
12     $scope.pages[0] = 1;
13     for(i = 1;i < 5;i++){
14       if(i == $scope.endPage)
15         break;
16       $scope.pages[i] = i + 1;
17     }
18     if(i < $scope.endPage){
19       $scope.pages[4] = "..." + $scope.endPage;
20     }
21   }else if($scope.currentPage <= $scope.endPage-3){
22     $scope.pages[0] = "1...";
23     $scope.pages[1] = $scope.currentPage - 1;
24     $scope.pages[2] = $scope.currentPage;
25     $scope.pages[3] = $scope.currentPage + 1;
26     $scope.pages[4] = "..." + $scope.endPage;
27   }else{
28     $scope.pages[0] = "1...";
29     $scope.pages[1] = $scope.endPage - 3;
30     $scope.pages[2] = $scope.endPage - 2;
31     $scope.pages[3] = $scope.endPage - 1;
32     $scope.pages[4] = $scope.endPage;
33   }
34 
35   var start=($scope.currentPage - 1) * $scope.pageSize;
36   var end=$scope.currentPage * $scope.pageSize;
37   $scope.dialogList = $scope.realDialogList.slice(start,end);
38 };
39 
40 $scope.prevPage = function() {
41   $scope.currentPage -= 1;
42   $scope.loadPagination();
43 };
44 
45 $scope.nextPage = function() {
46   $scope.currentPage += 1;
47   $scope.loadPagination();
48 };
49 
50 $scope.skipPage = function() {
51   var destPage=Number($scope.destPage);
52   $scope.destPage = "";
53   if(isNaN(destPage) || destPage <= 0 || destPage > $scope.endPage){
54     return ;
55   }
56   $scope.currentPage = destPage;
57   $scope.loadPagination();
58 };
59 
60 $scope.selectPage = function(selected) {
61   $scope.currentPage=selected;
62   $scope.loadPagination();
63 };

$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

posted @ 2015-04-22 09:23  cqq626  阅读(644)  评论(3)  编辑  收藏  举报