AngularJS与BootStrap模仿百度分页的示例代码

190 阅读 0 评论 126 点赞

我是靠谱客的博主激情电脑，这篇文章主要介绍AngularJS与BootStrap模仿百度分页的示例代码，现在分享给大家，希望可以做个参考。

模仿百度的每页显示10条数据, 实现了当前页居中的算法.

复制代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>BootStrap+AngularJS分页显示 </title>
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript" src="../js/bootstrap.js"></script>
  <link rel="stylesheet" href="../css/bootstrap/bootstrap.css" rel="external nofollow" />
  <script type="text/javascript" src="../js/angular.min.js"></script>
 </head>

<body ng-app="paginationApp" ng-controller="paginationCtrl">
  <table class="table table-bordered">
   <tr>
    <th>序号</th>
    <th>商品编号</th>
    <th>名称</th>
    <th>价格</th>
   </tr>
   <tr ng-repeat="product in products">
    <td>{{$index+1}}</td>
    <td>{{product.id}}</td>
    <td>{{product.name}}</td>
    <td>{{product.price}}</td>
   </tr>
  </table>
  <div>
   <ul class="pagination pull-right">
    <li>
     <a href ng-click="prev()">上一页</a>
    </li>
    <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
     <a href ng-click="selectPage(page)">{{page}}</a>
    </li>
    <li>
     <a href ng-click="next()">下一页</a>
    </li>
   </ul>
  </div>
 </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>BootStrap+AngularJS分页显示 </title>
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript" src="../js/bootstrap.js"></script>
  <link rel="stylesheet" href="../css/bootstrap/bootstrap.css" rel="external nofollow" />
  <script type="text/javascript" src="../js/angular.min.js"></script>
 </head>

 <body ng-app="paginationApp" ng-controller="paginationCtrl">
  <table class="table table-bordered">
   <tr>
    <th>序号</th>
    <th>商品编号</th>
    <th>名称</th>
    <th>价格</th>
   </tr>
   <tr ng-repeat="product in products">
    <td>{{$index+1}}</td>
    <td>{{product.id}}</td>
    <td>{{product.name}}</td>
    <td>{{product.price}}</td>
   </tr>
  </table>
  <div>
   <ul class="pagination pull-right">
    <li>
     <a href ng-click="prev()">上一页</a>
    </li>
    <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
     <a href ng-click="selectPage(page)">{{page}}</a>
    </li>
    <li>
     <a href ng-click="next()">下一页</a>
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript ">
  var paginationApp = angular.module("paginationApp", []);
  paginationApp.controller("paginationCtrl", ["$scope", "$http",
   function($scope, $http) {![现的效果](实现的效果1.jpg)![现的效果](实现的效果1.jpg)
    // 分页组件 必须变量
    $scope.currentPage = 1; // 当前页 （请求数据）
    $scope.pageSize = 4; // 每页记录数 （请求数据）
    $scope.totalCount = 0; // 总记录数 （响应数据）
    $scope.totalPages = 0; // 总页数 （根据 总记录数、每页记录数 计算 ）
    
    // 要在分页工具条显示所有页码 
    $scope.pageList = new Array();
    
    
    // 加载上一页数据
    $scope.prev = function(){
     $scope.selectPage($scope.currentPage-1);
    }
    
    // 加载下一页数据 
    $scope.next = function(){
     $scope.selectPage($scope.currentPage+1);
    }
    
    // 加载指定页数据 
    $scope.selectPage = function(page) {
     // page 超出范围 
     if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)){
      return ;
     }
     
     $http({
      method: 'GET',
      url: '6_'+page+'.json',
      params: {
       "page" : page , // 页码
       "pageSize" : $scope.pageSize // 每页记录数 
      }
     }).success(function(data, status, headers, config) {
      // 显示表格数据 
      $scope.products = data.products;
      
      // 根据总记录数 计算 总页数 
      $scope.totalCount = data.totalCount;
      $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
      // 更新当前显示页码 
      $scope.currentPage = page ;
      
      // 显示分页工具条中页码 
      var begin ; // 显示第一个页码
      var end ; // 显示最后一个页码 
      
      // 理论上 begin 是当前页 -5 
      begin = $scope.currentPage - 5 ;
      if(begin < 1){ // 第一个页码 不能小于1 
       begin = 1 ;
      }
      
      // 显示10个页码，理论上end 是 begin + 9
      end = begin + 9; 
      if(end > $scope.totalPages ){// 最后一个页码不能大于总页数
       end = $scope.totalPages; 
      }
      
      // 修正begin 的值, 理论上 begin 是 end - 9
      begin = end - 9;
      if(begin < 1){ // 第一个页码 不能小于1 
       begin = 1 ;
      }
      
      
      // 要在分页工具条显示所有页码 
      $scope.pageList = new Array();
      // 将页码加入 PageList集合
      for(var i=begin ; i<= end ;i++){
       $scope.pageList.push(i);
      }
 
     }).error(function(data, status, headers, config) {
      // 当响应以错误状态返回时调用
      alert("出错，请联系管理员 ");
     });
    }
    
    // 判断是否为当前页 
    $scope.isActivePage = function(page) {
     return page === $scope.currentPage;
    }
    
    // 初始化，选中第一页
    $scope.selectPage(1);
   }
  ]);
 </script>
</html>

1_1.json

复制代码

1
2
3
4
5
6
7
8
9
{
 "totalCount":100,
 "products":[
  {"id":"1001","name":"苹果手机","price":"5000"},
  {"id":"1002","name":"三星手机","price":"6000"}

 ]

}

1_2.json

复制代码

1
2
3
4
5
6
7
8
{
 "totalCount":100,
 "products":[
  {"id":"1001","name":"华为手机","price":"5000"},
  {"id":"1002","name":"vivo手机","price":"6000"}

 ]
}

实现的效果如图:

遇到的问题 : 下面的代码, 如果把begin不小心写成了0 , 则页码上,会出现从0开始的bug

复制代码

1
2
3
4
// 将页码加入 PageList集合
for(var i=begin ; i<= end ;i++){
 $scope.pageList.push(i);
}

如下图所示

原因是begin代表的是页面显示的第一个页码, 如果i从0开始开始遍历, 那么pageList数组中的第一个元素就是0 ,因此在如下的angularJS的遍历页码的过程中, 就会从0开始遍历. 在页面上, 就会显示从0 开始

复制代码

1
2
3
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
     <a href ng-click="selectPage(page)">{{page}}</a>
</li>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。

最后

以上就是激情电脑最近收集整理的关于AngularJS与BootStrap模仿百度分页的示例代码的全部内容，更多相关AngularJS与BootStrap模仿百度分页内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：JavaScript
浏览次数：190 次浏览
发布日期：2022-05-13 16:20:03
本文链接：https://www.kaopuke.com/article/k-p-k_14_u_7_ogf5_14_jg1.html

AngularJS与BootStrap模仿百度分页的示例代码

最后

评论列表共有 0 条评论

发表评论取消回复

AngularJS与BootStrap模仿百度分页的示例代码

最后

微信扫一扫：分享

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复