angular实现表格的分页显示

　　　　最近项目中用到了一个功能，就是表格的分页显示。以前没整过，今天学会了，把它整理一下，下次可以直接用。

 　　　　实例代码：https://github.com/dreamITGirl/projectStudy

               参考博客:http://www.cnblogs.com/cyclone77/p/5381278.html

               

             这是我要实现的表格的分页及其显示

             这个demo 中有一个小问题，就是在点击首页后所有的页码全部显示出来，并没有按之前的显示5个页码。

　　　　把代码贴一下，有不足的地方，希望看到的朋友提出来，便于改正           

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>angular实现表格的分页与显示</title>

    <script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="../js/angular.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <style type="text/css">
        ul {
            list-style: none;
            display: flex;
            justify-content: flex-end;
            margin-right: 100px;
        }

        .pageList-item {
            border: 1px solid #DDDDDD;
            padding: 5px;
            margin: 5px;
        }

        table th {
            text-align: center;
        }

        .active {
            color: #C9302C;
            border: none;
        }

        a {
            cursor: pointer;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table border="" cellspacing="" cellpadding="" class="table" style="text-align: center;">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>民族</th>
    </tr>
    <tr ng-repeat="item in items">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.national}}</td>
    </tr>
</table>
<footer class="footer">
    <ul class="pageList">
        <li class="pageList-item" ng-click="firstPage()">首页</li>
        <li class="pageList-item" ng-click="previousPage()">上一页</li>
        <li class="pageList-item" ng-repeat="pages in pageList" ng-class="{active: isActive(pages)}">
            <a href="" ng-click="selectPage(pages)">{{pages}}</a></li>
        <li class="pageList-item" ng-click="nextPage()">下一页</li>
        <li class="pageList-item" ng-click="lastPage()">尾页</li>
        <li class="pageList-item">总页数{{pageNumbers}}</li>
    </ul>
</footer>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope, $http) {
        $http({
            method: "GET",
            url: "http://127.0.0.1:8020/projectStudy/json/data.json"
        }).then(function successCallBack(response) {
            $scope.peopleList = response.data.peopleList;
            console.log($scope.peopleList);
            $scope.pageTotal = $scope.peopleList.length;
            $scope.pageSize = 5;
            $scope.pageNumbers = Math.ceil($scope.pageTotal / $scope.pageSize);
            $scope.newPages = $scope.pageNumbers > 5 ? 5 : $scope.pageNumbers;
            $scope.pageList = [];
            $scope.selPage = 1;

//					设置数据源分页
            $scope.setData = function () {
                $scope.items = $scope.peopleList.slice($scope.pageSize * ($scope.selPage - 1), ($scope.selPage * $scope.pageSize))
            }
            $scope.items = $scope.peopleList.slice(0, $scope.pageSize);

            //循环数据
            for (var i = 0; i < $scope.pageNumbers; i++) {
                $scope.pageList.push(i + 1)//页码的显示
            }
            //打印当前选中也的索引
            $scope.selectPage = function (page) {
                if (page < 1 || page > $scope.pageNumbers) return;
                if (page > 2) {
                    var newPageList = [];

                    for (var i = (page - 3); i < ((page + 2) > $scope.pageNumbers ? $scope.pageNumbers : (page + 2)); i++) {
                        newPageList.push(i + 1);
                    }
                    $scope.pageList = newPageList;
                }

                $scope.selPage = page;
                $scope.setData();
                $scope.isActive(page);
            }
            $scope.isActive = function (page) {

                return $scope.selPage == page
            }

            //点击上一页
            $scope.previousPage = function () {
                $scope.selectPage($scope.selPage - 1)
            }
            //点击下一页
            $scope.nextPage = function () {
                $scope.selectPage($scope.selPage + 1)
            }
            //点击首页
            $scope.firstPage = function () {
                $scope.selectPage(1);
                $scope.pageList = [];
                //循环数据
                for (var i = 0; i < $scope.pageNumbers; i++) {
                    $scope.pageList.push(i + 1)//页码的显示
                }
            }
            //点击尾页
            $scope.lastPage = function () {
                console.log($scope.pageNumbers)
                $scope.selectPage($scope.pageNumbers)
            }


        }, function errorCallBack(response) {

        })
    })
</script>
</body>
</html>

　　

　　　　

            

posted @ 2018-04-06 22:17  前端加油站  阅读(698)  评论(0)  编辑  收藏  举报