使用AngularJS和BootStrap怎么模仿百度分页

这篇文章将为大家详细讲解有关使用AngularJS和BootStrap怎么模仿百度分页,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

成都一家集口碑和实力的网站建设服务商,拥有专业的企业建站团队和靠谱的建站技术,十多年企业及个人网站建设经验 ,为成都上千余家客户提供网页设计制作,网站开发,企业网站制作建设等服务,包括成都营销型网站建设,高端网站设计,同时也为不同行业的客户提供成都网站建设、做网站的服务,包括成都电商型网站制作建设,装修行业网站制作建设,传统机械行业网站建设,传统农业行业网站制作建设。在成都做网站,选网站制作建设服务商就选创新互联公司




 
  
  BootStrap+AngularJS分页显示 
  
  
  
  
 

 
  
   
    序号
    商品编号
    名称
    价格
   
   
    {{$index+1}}
    {{product.id}}
    {{product.name}}
    {{product.price}}
   
  
  
        
  •      上一页     
  •           {{page}}          
  •      下一页     
  •       
          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);    }   ]);  

    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 开始

    
         {{page}}
    

    关于使用AngularJS和BootStrap怎么模仿百度分页就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


    当前名称:使用AngularJS和BootStrap怎么模仿百度分页
    文章源于:http://scyanting.com/article/ghgodg.html