当前位置: 58彩票app下载 > 计算机网络 > 正文

AngularJS与BootStrap模仿百度分页,AngularJS与BootStr

时间:2019-09-23 11:44来源:计算机网络
模仿百度的每页显示10条数据, 实现了当前页居中的算法. 模仿百度的每页显示10条数据, 实现了当前页居中的算法. !DOCTYPE htmlhtml head meta charset="UTF-8" titleBootStrap+AngularJS分页显示 /title sc

模仿百度的每页显示10条数据, 实现了当前页居中的算法.

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

<!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" /> <script type="text/javascript" src="../js/angular.min.js"></script> </head> <body ng-app="paginationApp" ng-controller="paginationCtrl"> <table > <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 > <li> <a href ng-click="prev()">上一页</a> </li> <li ng-repeat="page in pageList" ng-> <a href ng-click="selectPage">{{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 超出范围 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.error(function(data, status, headers, config) { // 当响应以错误状态返回时调用 alert("出错,请联系管理员 "); }); } // 判断是否为当前页 $scope.isActivePage = function { return page === $scope.currentPage; } // 初始化,选中第一页 $scope.selectPage; </script></html>
{
 "totalCount":100,
 "products":[
  {"id":"1001","name":"苹果手机","price":"5000"},
  {"id":"1002","name":"三星手机","price":"6000"}

 ]

}

1_1.json

1_2.json

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

 ]
}

1_2.json

实现的效果如图:

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

图片 1

实现的效果如图:

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

图片 2

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

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

如下图所示

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

图片 3

如下图所示

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

图片 4

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

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

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

<li ng-repeat="page in pageList" ng-> <a href ng-click="selectPage">{{page}}</a></li>

您可能感兴趣的文章:

  • angularjs+bootstrap实现自定义分页的实例代码
  • AngularJS 与Bootstrap实现表格分页实例代码

编辑:计算机网络 本文来源:AngularJS与BootStrap模仿百度分页,AngularJS与BootStr

关键词: