基於angular實現分頁工具條展示

思路:
1）客戶端發送給服務器兩個參數：當前頁碼、每頁記錄數
2）服務器端根據當前頁碼和每頁記錄條數查詢結果返回：總記錄數、當前頁數據
3）客戶端將返回當前頁數據顯示到表格中，根據返回總記錄數和每頁記錄條數，計算總頁數，根據總頁數和當前頁碼，顯示分頁工具條（百度默認顯示10個頁碼，當前頁居中）

具體實現
在工具條上，將靜態數據換爲動態數據，綁定點擊事件

<!--  分頁按鈕 -->
<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 ng-click="selectPage(page)">{{ page }}</a>
        </li>
        <li>
            <a href ng-click="next()">下一頁</a>
        </li>
    </ul>
</div>

幾個重要的方法：
prev()加載上一頁數據
next()加載下一頁數據
selectPage(page)加載指定頁數據顯示
isActivePage(page)判斷是否爲當前顯示頁碼
將顯示所有頁碼，加入pageList集合對象，遍歷顯示出來

實現後臺數據異步查詢,計算顯示10頁頁碼的起始頁碼、結束頁碼

bosfore_app.controller("ctrlRead", ['$scope', '$http', function($scope, $http) {
    $scope.currentPage = 1;
    $scope.pageSize = 4;
    $scope.totalCount = 0;
    $scope.totalPages = 0;

    $scope.prev = function() {
        if($scope.currentPage > 1) {
            $scope.selectPage($scope.currentPage - 1);
        }
    }

    $scope.next = function() {
        if($scope.currentPage < $scope.totalPages) {
            $scope.selectPage($scope.currentPage + 1);
        }
    }

    $scope.selectPage = function(page) {
        // 如果頁碼超出範圍
        if($scope.totalPages != 0) {
            if(page < 1 || page > $scope.totalPages) return;
        }

        $http({
            method: 'GET',
            url: 'promotion_pageQuery.action',
            params: {
                "page": page, // 當前頁碼 
                "rows": $scope.pageSize // 每頁記錄數
            }
        }).success(function(data, status, headers, config) {
            // 顯示錶格數據 
            $scope.pageItems = data.pageData;
            // 計算總頁數
            $scope.totalCount = data.totalCount;
            $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);

            // 當前顯示頁，設爲當前頁
            $scope.currentPage = page;

            // 固定顯示10頁 (前5後4)
            var begin;
            var end;

            begin = page - 5;
            if(begin < 0) {
                begin = 1;
            }

            end = begin + 9;
            if(end > $scope.totalPages) {
                end = $scope.totalPages;
            }

            begin = end - 9;
            if(begin < 1) {
                begin = 1;
            }

            $scope.pageList = new Array();
            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($scope.currentPage);

}]);