AngularJS与BootStrap模仿百度分页
- 模仿百度的每页显示10条数据, 实现了当前页居中的算法.
1<!DOCTYPE html>
2<html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>BootStrap+AngularJS分页显示 </title>
7 <script type="text/javascript" src="../js/jquery.js"></script>
8 <script type="text/javascript" src="../js/bootstrap.js"></script>
9 <link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
10 <script type="text/javascript" src="../js/angular.min.js"></script>
11 </head>
12
13 <body ng-app="paginationApp" ng-controller="paginationCtrl">
14 <table class="table table-bordered">
15 <tr>
16 <th>序号</th>
17 <th>商品编号</th>
18 <th>名称</th>
19 <th>价格</th>
20 </tr>
21 <tr ng-repeat="product in products">
22 <td>{{$index+1}}</td>
23 <td>{{product.id}}</td>
24 <td>{{product.name}}</td>
25 <td>{{product.price}}</td>
26 </tr>
27 </table>
28 <div>
29 <ul class="pagination pull-right">
30 <li>
31 <a href ng-click="prev()">上一页</a>
32 </li>
33 <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
34 <a href ng-click="selectPage(page)">{{page}}</a>
35 </li>
36 <li>
37 <a href ng-click="next()">下一页</a>
38 </li>
39 </ul>
40 </div>
41 </body>
42
43 <script type="text/javascript ">
44 var paginationApp = angular.module("paginationApp", []);
45 paginationApp.controller("paginationCtrl", ["$scope", "$http",
46 function($scope, $http) {
47 // 分页组件 必须变量
48 $scope.currentPage = 1; // 当前页 （请求数据）
49 $scope.pageSize = 4; // 每页记录数 （请求数据）
50 $scope.totalCount = 0; // 总记录数 （响应数据）
51 $scope.totalPages = 0; // 总页数 （根据 总记录数、每页记录数 计算 ）
52 // 要在分页工具条显示所有页码
53 $scope.pageList = new Array();
54 // 加载上一页数据
55 $scope.prev = function(){
56 $scope.selectPage($scope.currentPage-1);
57 }
58 // 加载下一页数据
59 $scope.next = function(){
60 $scope.selectPage($scope.currentPage+1);
61 }
62 // 加载指定页数据
63 $scope.selectPage = function(page) {
64 // page 超出范围
65 if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)){
66 return ;
67 }
68 $http({
69 method: 'GET',
70 url: '6_'+page+'.json',
71 params: {
72 "page" : page , // 页码
73 "pageSize" : $scope.pageSize // 每页记录数
74 }
75 }).success(function(data, status, headers, config) {
76 // 显示表格数据
77 $scope.products = data.products;
78 // 根据总记录数 计算 总页数
79 $scope.totalCount = data.totalCount;
80 $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
81 // 更新当前显示页码
82 $scope.currentPage = page ;
83 // 显示分页工具条中页码
84 var begin ; // 显示第一个页码
85 var end ; // 显示最后一个页码
86 // 理论上 begin 是当前页 -5
87 begin = $scope.currentPage - 5 ;
88 if(begin < 1){ // 第一个页码 不能小于1
89 begin = 1 ;
90 }
91 // 显示10个页码，理论上end 是 begin + 9
92 end = begin + 9;
93 if(end > $scope.totalPages ){// 最后一个页码不能大于总页数
94 end = $scope.totalPages;
95 }
96 // 修正begin 的值, 理论上 begin 是 end - 9
97 begin = end - 9;
98 if(begin < 1){ // 第一个页码 不能小于1
99 begin = 1 ;
100 }
101 // 要在分页工具条显示所有页码
102 $scope.pageList = new Array();
103 // 将页码加入 PageList集合
104 for(var i=begin ; i<= end ;i++){
105 $scope.pageList.push(i);
106 }
107 }).error(function(data, status, headers, config) {
108 // 当响应以错误状态返回时调用
109 alert("出错，请联系管理员 ");
110 });
111 }
112 // 判断是否为当前页
113 $scope.isActivePage = function(page) {
114 return page === $scope.currentPage;
115 }
116 // 初始化，选中第一页
117 $scope.selectPage(1);
118 }
119 ]);
120 </script>
121</html>
1_1.json
1{
2 "totalCount":100,
3 "products":[
4 {"id":"1001","name":"苹果手机","price":"5000"},
5 {"id":"1002","name":"三星手机","price":"6000"}
6
7 ]
8
9}
1_2.json
1{
2 "totalCount":100,
3 "products":[
4 {"id":"1001","name":"华为手机","price":"5000"},
5 {"id":"1002","name":"vivo手机","price":"6000"}
6
7 ]
8}
实现的效果如图:
遇到的问题 : 下面的代码, 如果 把begin不小心写成了0 , 则页码上,会出现从0开始的bug
1// 将页码加入 PageList集合
2for(var i=begin ; i<= end ;i++){
3 $scope.pageList.push(i);
4}
如下图所示
原因是begin代表的是页面显示的第一个页码, 如果i从0开始开始遍历, 那么pageList数组中的第一个元素就是0 ,因此在如下的angularJS的遍历页码的过程中, 就会从0开始遍历. 在页面上, 就会显示从0 开始
1<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
2 <a href ng-click="selectPage(page)">{{page}}</a>
3</li>