BootStrap+AngularJS分页显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/angular.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
    <title>BootStrap+AngularJS分页显示</title>
    <style>
        td {
            text-align: center;
        }
    </style>
</head>

<body ng-app="myapp" ng-controller="myCtrl">
<table class="table table-bordered">
    <tr>
        <td>序号</td>
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品价格</td>
    </tr>
    <tr ng-repeat="product in products">
        <td>{{$index + 1}}</td>
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
        <td>{{product.price}}</td>
    </tr>
</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 href ng-click="selectPage(page)">{{page}}</a>
        </li>
        <li>
            <a href ng-click="next()">下一页</a>
        </li>
    </ul>
</div>
</body>

<script type="text/javascript">
    var myapp = angular.module("myapp", []);
    // 初始化控制器
    myapp.controller("myCtrl", ["$scope", "$http",
        function ($scope, $http) {

            //分页组件必须的变量
            $scope.currenPage = 1,      //当前页码
            $scope.pageSize = 4,        //每页的记录数
            $scope.totalPage = 0,       //总页数
            $scope.totalCount = 0,      //总的记录数

            //所有的页码
            $scope.pageList = new Array(),

            // 加载上一页的数据
            $scope.prev = function () {
                $scope.selectPage($scope.currenPage - 1);
            },
            // 加载下一页的数据
            $scope.next = function () {
                $scope.selectPage($scope.currenPage + 1);
            },
            // 加载当前页的数据
            $scope.selectPage = function (page) {

                //page超出范围
                if($scope.totalPage != 0 &&(page < 1 || page > $scope.totalPage)){
                    return;
                }

                $http({
                    method: "GET",
                    url: "demo"+page+".json",
                    params: {
                        page : page, //当前页的页码
                        pageSize : $scope.pageSize  //每页的记录数
                    }
                }).success(function (data, status, headers, config) {
                    // 显示表格数据
                    $scope.products = data.products;
                    // 根据总记录数获取总页数
                    $scope.totalCount = data.totalCount;
                    // 获取总页数
                    $scope.totalPage = Math.ceil($scope.totalCount / $scope.pageSize);
                    // 更显当前页码
                    $scope.currenPage = page;
                    // 显示分页工具条中的页码
                    var begin;  // 第一个页码
                    var end;    // 最后一个页码

                    //理论上的begin
                    begin = $scope.currenPage - 5;
                    if(begin < 1){
                        begin = 1;
                    }

                    // 理论上的end
                    end = begin + 9;
                    if(end > $scope.totalPage ){
                        end = $scope.totalPage;
                    }

                    //修正begin的值
                    begin = end - 9;
                    if(begin < 1){
                        begin = 1;
                    }

                    //将页码加入到list集合
                    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.currenPage;
            },
            // 初始化选中第一页
            $scope.selectPage(1);
        }]);
</script>
</html>
BootStrap+AngularJS分页显示

猜你喜欢
