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


Posted in Javascript onMay 23, 2018

模仿百度的每页显示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>

 <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

{
 "totalCount":100,
 "products":[
  {"id":"1001","name":"苹果手机","price":"5000"},
  {"id":"1002","name":"三星手机","price":"6000"}

 ]

}

1_2.json

{
 "totalCount":100,
 "products":[
  {"id":"1001","name":"华为手机","price":"5000"},
  {"id":"1002","name":"vivo手机","price":"6000"}

 ]
}

实现的效果如图:

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

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

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

如下图所示

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 #jQuery
vue的传参方式汇总和router使用技巧
May 22 #Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 #Javascript
Vue.js实现的表格增加删除demo示例
May 22 #Javascript
详解Chart.js轻量级图表库的使用经验
May 22 #Javascript
VUE2.0中Jsonp的使用方法
May 22 #Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python实现注册登录系统
2017/08/08 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
应届生求职推荐信
2013/10/28 职场文书
财务助理岗位职责
2013/11/10 职场文书
停电放假通知
2015/04/14 职场文书
开除员工通知
2015/04/22 职场文书