AngularJS与BootStrap模仿百度分页的方法-js教程-PHP中文网

首页

web前端

js教程

AngularJS与BootStrap模仿百度分页的方法

不言

Jul 04, 2018 am 11:42 AM

angularjsbootstrap分页

这篇文章主要介绍了AngularJS与BootStrap模仿百度分页的示例代码，分页在很多时候都能用到，现在分享给大家，也给大家做个参考。

模仿百度的每页显示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>
  <p>
   <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>
  </p>
 </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: &#39;GET&#39;,
      url: &#39;6_&#39;+page+&#39;.json&#39;,
      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"}

 ]
}

实现的效果如图:

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

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

如下图所示

原因是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>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

基于js原生和ajax的get和post方法以及jsonp的原生写法的介绍

Ajax的原生实现关于MIME类型的使用方法

以上是AngularJS与BootStrap模仿百度分页的方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。