自定义分页查询． 基于 BootStrap + AngularJS

page.js
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);

}]);

结合html的展示页面 BootStrap + AngularJS

<div class="promotion" >
    <!-- banner-->
    <section class="bannerarea">
        <div class="bannerimg"><img src="images/show/suyun/banner.png" class="img-responsive" alt="Responsive image"></div>
    </section>
    <!-- maincontent-->
    <section class="container">
        <div ng-controller="ctrlRead">
            <table class="table table-striped table-condensed table-hover">
                <tbody>
                    <div class="activitybox row">
                        <div class="areatitle">
                            <h2 class="text-left"><span class="title">活动促销</span></h2>
                            <p class="english"><span class="subtitle">ACTIVITY PROMOTION</span></p>
                            <ul class="list-inline">
                                <li class="active">全国</li>
                                <li>华中</li>
                                <li>华南</li>
                                <li>华北</li>
                            </ul>
                        </div>
                        <div class="col-sm-6 col-md-3" ng-repeat="item in pageItems">
                            <div class="thumbnail">
                                <img ng-src="{{item.titleImg}}" alt="活动一">

                                <div class="caption">
                                    <p><a href="#/promotion_detail/{{item.id}}">{{item.title}}</a></p>
                                    <p class="text-right status">
                                        <span ng-show="item.status == '1'">进行中</span>
                                        <span ng-show="item.status == '2'">已结束</span>
                                    </p>
                                    <p class="text-right grey">{{item.startDate}}—{{item.endDate}}</p>
                                    <p class="text-right grey">{{item.activeScope}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </tbody>
            </table>
            <!--  分页按钮 -->
            <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>
        </div>
    </section>
</div>