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 设计模式 推荐
Oct 28 Javascript
详细讲解JS节点知识
Jan 31 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 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
php xfocus防注入资料
2008/04/27 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
实例解析php的数据类型
2018/10/24 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
讲解Python中的递归函数
2015/04/27 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
python解析基于xml格式的日志文件
2017/02/25 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python实现视频压缩功能
2020/12/18 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
小学教师评语大全
2014/04/23 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
出国导师推荐信
2015/03/25 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书