AngularJS分頁實現

1. AngularJs 分頁按鈕原理: 這樣生成的分頁是有多少頁顯示多少個分頁按鈕:
    1.首先在頁面創建按鈕區:
        <!--  分頁按鈕 -->
        <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>
    
    2.然後編寫腳本,讀取資源並生成分頁按鈕:
        <script type="text/javascript" charset="utf-8">
                //1. 初始化 paginationApp 模塊 ,其中 [] 爲依賴列表
                var paginationApp = angular.module("paginationApp",[]);
                //2. 初始化 paginationCtrl
                paginationApp.controller("paginationCtrl",["$scope","$http",
                        
                    function($scope,$http){
                                
                        $http({
                            method:'GET',
                            url:'6_2.json',
                            params:{
                                
                            }
                            
                        }).success(function(data,status,headers,config){
                            //把接收到的 products 數據賦值給 products
                            $scope.products= data.products;
                            $scope.totalCount = data.totalCount;
                            $scope.totalPages=Math.ceil($scope.totalCount/$scope.pageSize);
                                                
                            for(var i=0; i<$scope.totalPages ; i++){
                                $scope.pageList.push(i);
                            }
                            
                        }).error(function(data,status,headers,config){
                            alert("出錯了,請聯繫管理員");
                        });
                        
                    }
                        
                ]);
            </script>    
            
            
2. AngularJS實現顯示10個分頁按鈕,當前頁居中格式(左5右4):
    1.思路分析:首先得到當前頁 currentPage, 然後找到起始頁 begin = currentPage-5; 但是這樣計算會導致begin<1 所以
        要做一個修正判斷: if(begin<1){begin=1;} 得到了begin 就可以得到: end=begin+9; 但是這樣計算還有可能導致
        end>totalPages 所以要做一個修正判斷: if(end>totalPages){end=totalpages;} ,這意味着:end 越界了,所以end變小了,
        這樣導致總頁數沒法保證10頁了,所以要修正一下: begin=end-9; 當然還是要判斷修正begin,防止越界:if(begin<1){begin=1;}
            
    2. 代碼如下:
        //加載指定頁碼數據
        $scope.selectPage=function(page){
            //校驗數據,當數據越界時不進行處理
            if(page<1){
                return;
            }
            if($scope.totalPages!=0 && page>$scope.totalPages){
                return;
            }
                                    
            //根據頁碼發送ajax請求獲得數據
            $scope.currentPage=page;
            $http({
                method:'GET',
                url:'6_2.json',
                params:{
                    "page":$scope.currentPage,
                    "rows":$scope.pageSize
                }
                
            }).success(function(data,status,headers,config){
                //把接收到的 products 數據賦值給 products
                $scope.products= data.products;
                $scope.totalCount = data.totalCount;
                $scope.totalPages=Math.ceil($scope.totalCount/$scope.pageSize);
                
                //仿百度顯示方式生成分頁條:
                
                //1.首先確定起始頁
                var begin = page-5;
                //2.判斷修正起始頁
                if(begin<1){
                    begin=1;
                }
                //3.根據第一頁獲得最後一頁
                var end = begin+9;
                //4.判斷修正最後一頁
                if(end>$scope.totalPages){
                    end=$scope.totalPages;
                    //一旦需要修正,那麼起始頁也要修正
                    begin=end-9;
                    if(begin<1){
                        begin=1;
                    }
                }
                alert("begin: "+begin);
                alert("end: "+end);    
                                                            
                // 將頁碼加入 PageList集合
                var count=end-begin;
                for(var i=0;i<=count;i++){
                    $scope.pageList[i] = begin+i;
                }
                alert($scope.pageList[0])
                
            }).error(function(data,status,headers,config){
                alert("警告","出錯了,請聯繫管理員","warning");
            });
            
        }