Bootstrap结合angularjs分页显示,实现当前选中居中效果

最新推荐文章于 2021-01-15 06:00:17 发布

ip15988

最新推荐文章于 2021-01-15 06:00:17 发布

阅读量476

点赞数

本文链接：https://blog.csdn.net/ip15988/article/details/82532966

版权

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);

}]);