分页

来源:互联网 发布:uboot源码详解 编辑:程序博客网 时间:2024/05/22 12:37

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



原创粉丝点击