Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS与BootStrap模仿百度分页大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

AngularJS与BootStrap模仿@L_450_0@分页

  • 模仿@L_450_0@的每页显示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        <"../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) {![现的效果](实现的效果1.jpg)![现的效果](实现的效果1.jpg)  47 // 分页组件 必须变量  48 $scope.currentPage = 1; // 当前页 (请求数据)  49 $scope.pageSize = 4; // 每页记录数 (请求数据)  50 $scope.@R_21_10586@lCount = 0; // 总记录数 (响应数据)  51 $scope.@R_21_10586@lPages = // 总页数 (根据 总记录数、每页记录数 计算 )  52 // 要在分页工具条显示所有页码   53 $scope.Pagelist = new @H_@R_489_11284@_379@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.@R_21_10586@lPages != 0 && (page < 1 || page > $scope.@R_21_10586@lPages)){  66 return ;  67 }  68 $http({  69 @H_67_35@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.@R_21_10586@lCount = data.@R_21_10586@lCount;  80 $scope.@R_21_10586@lPages = @H_@R_489_11284@_379@math.ceil($scope.@R_21_10586@lCount / $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.@R_21_10586@lPages ){// 最后一个页码不能大于总页数  94 end = $scope.@R_21_10586@lPages;  95 }  96 // 修正begin 的值,理论上 begin 是 end - 9  97 begin = end -  98  99 begin = 100 } 101 @H_772_564@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    "@R_21_10586@lCount":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>

大佬总结

以上是大佬教程为你收集整理的AngularJS与BootStrap模仿百度分页全部内容,希望文章能够帮你解决AngularJS与BootStrap模仿百度分页所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。