分页
来源:互联网 发布: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); }; })
阅读全文
0 0
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- centos安装pdf2htm转换软件详细教程
- Hadoop之Hdfs分布式文件系统
- Android锁屏的实现与难点总结
- 如何做成jar包?
- 一个数组中只有两个数字是出现一次,其他所有数字都出现了两次。
- 分页
- View 的测量
- 阿里前端笔试
- Centos 7的firewalld用法
- Spring多数据源的配置
- Allowance
- Sophix热修复问题以及加固
- 运行项目无法正常启动 常见粗心错误(SSM)
- Windows上安装ArcGIS Enterprise(ArcGIS 10.5为例)