AngularJS与BootStrap模仿百度分页

AngularJS与BootStrap模仿百度分页

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

  1
  2
  3
  4    
  5        
  6        BootStrap+AngularJS分页显示 
  7        
  8        
  9        
 10        
 11    
 12
 13    
 14        
 15            
 16                序号
 17                商品编号
 18                名称
 19                价格
 20            
 21            
 22                {{$index+1}}
 23                {{product.id}}
 24                {{product.name}}
 25                {{product.price}}
 26            
 27        
 28        
 29            
 30                
 31                    上一页
 32                
 33                
 34                    {{page}}
 35                
 36                
 37                    下一页
 38                
 39            
 40        
 41    
 42
 43    
 44        var paginationApp = angular.module("paginationApp", []);
 45        paginationApp.controller("paginationCtrl", ["$scope", "$http",
 46            function($scope, $http) {![现的效果](实现的效果1.jpg)![现的效果](实现的效果1.jpg)
 47                // 分页组件 必须变量
 48                $scope.currentPage = 1; // 当前页 （请求数据）
 49                $scope.pageSize = 4; // 每页记录数 （请求数据）
 50                $scope.totalCount = 0; // 总记录数 （响应数据）
 51                $scope.totalPages = 0; // 总页数 （根据 总记录数、每页记录数 计算 ）
 52                // 要在分页工具条显示所有页码 
 53                $scope.pageList = new Array();
 54                // 加载上一页数据
 55                $scope.prev = function(){
 56                    $scope.selectPage($scope.currentPage-1);
 57                }
 58                // 加载下一页数据 
 59                $scope.next = function(){
 60                    $scope.selectPage($scope.currentPage+1);
 61                }
 62                // 加载指定页数据 
 63                $scope.selectPage = function(page) {
 64                    // page 超出范围 
 65                    if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)){
 66                        return ;
 67                    }
 68                    $http({
 69                        method: 'GET',
 70                        url: '6_'+page+'.json',
 71                        params: {
 72                            "page" : page , // 页码
 73                            "pageSize" : $scope.pageSize // 每页记录数 
 74                        }
 75                    }).success(function(data, status, headers, config) {
 76                        // 显示表格数据 
 77                        $scope.products = data.products;
 78                        // 根据总记录数 计算 总页数 
 79                        $scope.totalCount = data.totalCount;
 80                        $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
 81                        // 更新当前显示页码 
 82                        $scope.currentPage = page ;
 83                        // 显示分页工具条中页码 
 84                        var begin ; // 显示第一个页码
 85                        var end ;  // 显示最后一个页码 
 86                        // 理论上 begin 是当前页 -5 
 87                        begin = $scope.currentPage - 5 ;
 88                        if(begin < 1){ // 第一个页码 不能小于1 
 89                            begin = 1 ;
 90                        }
 91                        // 显示10个页码，理论上end 是 begin + 9
 92                        end = begin + 9; 
 93                        if(end > $scope.totalPages ){// 最后一个页码不能大于总页数
 94                            end = $scope.totalPages; 
 95                        }
 96                        // 修正begin 的值, 理论上 begin 是 end - 9
 97                        begin = end - 9;
 98                        if(begin < 1){ // 第一个页码 不能小于1 
 99                            begin = 1 ;
100                        }
101                        // 要在分页工具条显示所有页码 
102                        $scope.pageList = new Array();
103                        // 将页码加入 PageList集合
104                        for(var i=begin ; i{page}}