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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
分析javascript原型及原型链
Mar 18 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
vue+canvas实现移动端手写签名
May 21 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php数组转成json格式的方法
2015/03/09 PHP
php构造函数与析构函数
2016/04/23 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Flask之请求钩子的实现
2018/12/23 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
mysql 获取相邻数据项
2022/05/11 MySQL
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python