AngularJS分页实现

基本思路

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

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

 

展示

技术分享

技术分享

技术分享

 

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

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‘,其他情况

 

推荐将分页写成Directive或Service

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。