1. 程式人生 > >Bootstrap結合angularjs分頁顯示,實現當前選中居中效果

Bootstrap結合angularjs分頁顯示,實現當前選中居中效果

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(1); }]);