AngularJS与BootStrap模仿百度分页
发布时间：2020-12-17 08:14:01 所属栏目：安全 来源：网络整理
导读：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.
AngularJS与BootStrap模仿百度分页
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 <"../js/bootstrap.js"></ 9 <link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
10 <"../js/angular.min.js"></ 11 </ 12
13 <body ng-app="paginationApp" ng-controller="paginationCtrl">
14 <table class="table table-bordered">
15 <tr>
16 <th>序号</th>
17 <th>商品编号</ 18 <th>名称</ 19 <th>价格</ 20 </ 21 <tr ng-repeat="product in products">
22 <td>{{$index+1}}</td>
23 <td>{{product.id}}</ 24 <td>{{product.name}}</ 25 <td>{{product.price}}</ 26 </ 27 </table>
28 <div>
29 <ul "pagination pull-right">
30 <li>
31 <a href ng-click="prev()">上一页</a>
32 </ 33 <li "page in pageList" ng-class="{active: isActivePage(page)}">
34 <"selectPage(page)">{{page}}</ 35 </ 36 < 37 <"next()">下一页</ 38 </ 39 </ul>
40 </ 41 </body>
42
43 <"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 = // 总页数 （根据 总记录数、每页记录数 计算 ） 52 // 要在分页工具条显示所有页码 53 $scope.pageList = new Array(); 54 // 加载上一页数据 55 $scope.prev = ){ 56 $scope.selectPage($scope.currentPage-1); 57 } 58 // 加载下一页数据 59 $scope.next = 60 $scope.selectPage($scope.currentPage+1); 61 } 62 // 加载指定页数据 63 $scope.selectPage = page) { 64 // page 超出范围 65 if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)){ 66 return ; 67 } 68 $http({ 69 method: 'GET',250);"> 70 url: '6_'+page+'.json',250);"> 71 params: { 72 "page" : page,// 页码 73 "pageSize" : $scope.pageSize // 每页记录数 74 } 75 }).success(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 - 98 99 begin = 100 } 101 102 $scope.pageList = 103 // 将页码加入 PageList集合 104 for(var i=begin ; i<= end ;i++){ 105 $scope.pageList.push(i); 106 } 107 }).error(108 // 当响应以错误状态返回时调用 109 alert("出错，请联系管理员 "); 110 }); 111 } 112 // 判断是否为当前页 113 $scope.isActivePage = 114 return page === $scope.currentPage; 115 } 116 // 初始化，选中第一页 117 $scope.selectPage(118 } 119 ]); 120 </121</html>
1_1.json 1{
2 "totalCount":100,250);">3 "products":[
4 {"id":"1001","name":"苹果手机",45);">"price":"5000"},250);">5 {"1002",112);">"三星手机",112);">"6000"}
6
7 ]
8
9}
1_2.json "华为手机",112);">"vivo手机",250);">8}
实现的效果如图: 遇到的问题 : 下面的代码,如果 把begin不小心写成了0,则页码上,会出现从0开始的bug 1// 将页码加入 PageList集合
2var i=begin ; i<= end ;i++){
3 $scope.pageList.push(i);
4}
如下图所示 原因是begin代表的是页面显示的第一个页码,如果i从0开始开始遍历,那么pageList数组中的第一个元素就是0,因此在如下的angularJS的遍历页码的过程中,就会从0开始遍历. 在页面上,就会显示从0 开始 1<2 <3</li>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |