分页

最新推荐文章于 2024-10-08 05:30:00 发布

xiaoyueyue_2017

最新推荐文章于 2024-10-08 05:30:00 发布

阅读量274

点赞数

html代码

<!-- 分页-->
<div class="paging clearfix">
    <span style="vertical-align: 12px;float: right;">  共：{{pages}} 页</span>
    <ul class="fr">
        <li class="fl sy"><a href="javascript:" ng-click="selectPageF(1)">首页</a></li>
        <li class="fl sy"><a ng-click="Previous()">上一页</a></li>
        <li class="fl num" ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
            <a ng-click="selectPage(page)">{{page}}</a>
        </li>
        <li class="fl wy"><a ng-click="Next()">下一页</a></li>
        <li class="fl wy"><a ng-click="selectPage(pages)">尾页</a></li>
    </ul>
</div>

js代码

$http.get("js/package.json") //获取json数据
    .then(function(res){
        $scope.resp = res.data.rows;
        console.log($scope.resp,$scope.resp.length);

        //分页
        $scope.pageSize =10;
        $scope.pages = Math.ceil($scope.resp.length / $scope.pageSize); //分页数
        console.log($scope.pages);
        $scope.newPages = $scope.pages > 10 ? 10 : $scope.pages;
        console.log($scope.newPages);
        $scope.pageList = [];
        $scope.selPage = 1;

        //设置表格数据源(分页)
        $scope.setData = function() {
            $scope.con = $scope.resp.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize)); //通过当前页数筛选出表格当前显示数据

        }
        $scope.con = $scope.resp.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));
        console.log($scope.con);

        //分页要repeat的数组
        for(var i = 0; i < $scope.newPages; i++) {
            $scope.pageList.push(i + 1);
        }

        $scope.selectPageF = function(page) { //首页
            //不能小于1大于最大
            if(page < 1 || page > $scope.pages) return;
            //最多显示分页数5
            if(page == 1) {
                var newpageList = [];
                for(var i = 0; i < (5 > $scope.pages ? $scope.pages : 5); i++) {
                    newpageList.push(i + 1);
                }
                $scope.pageList = newpageList;
                console.log($scope.pageList)
            }
            $scope.selPage = page;
            $scope.setData();
            $scope.isActivePage(page);
            console.log($scope.isActivePage(page));
            console.log($scope.selPage);

        };
        //设置当前选中页样式
        $scope.isActivePage = function(page) {
            return $scope.selPage == page;
        };
        //打印当前选中页索引
        $scope.selectPage = function(page) {
            //不能小于1大于最大
            if(page < 1 || page > $scope.pages) return;
            //最多显示分页数5
            if(page > 2) {
                //因为只显示5个页数，大于2页开始分页转换
                var newpageList = [];
                for(var i = (page - 3); i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)); i++) {
                    newpageList.push(i + 1);
                }
                $scope.pageList = newpageList;

            }
            $scope.selPage = page;
            console.log($scope.selPage);
            $scope.setData();
            $scope.isActivePage(page);
        };

        //上一页
        $scope.Previous = function() {
            $scope.selectPage($scope.selPage - 1);
        }
        //下一页
        $scope.Next = function() {
            $scope.selectPage($scope.selPage + 1);
        };


    })