AngularJS分页显示的简单案例
2018-01-30 12:59
239 查看
由于我下载的anjularJs是1.3的,所以有些代码会和1.5以及之后的有些不同.虽然代码可能不同,但是分页思想还是差不多的.
JS部分
效果:
<body ng-app="myApp" ng-controller="myController"> <table class="table table-bordered"> <tr> <th>序号</th> <th>后宫牌号</th> <th>花名</th> <th>价格</th> </tr> <tr ng-repeat="person in people"> <td>{{$index+1}}</td> <td>{{person.id}}</td> <td>{{person.name}}</td> <td>{{person.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>
JS部分
<script type="text/javascript"> var myApp=angular.module("myApp",[]); myApp.controller('myController',["$scope", "$http",function($scope,$http){ // 分页组件 必须变量 $scope.currentPage = 1; // 当前页 (请求数据) $scope.pageSize = 4; // 每页记录数 (请求数据) $scope.totalCount = 0; // 总记录数 (响应数据) $scope.totalPages = 0; // 总页数 (根据 总记录数、每页记录数 计算 ) //加载上一页 $scope.prev = function() { $scope.selectPage($scope.currentPage - 1); } //加载下一页 $scope.next = function() { $scope.selectPage($scope.currentPage + 1); } //加载指定页 $scope.selectPage = function(page) { // page 超出范围 if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)) { return; 4000 } //发送请求 $http({ method: 'GET', url: page + '.json', params: { page: page, // 页码 pageSize: $scope.pageSize // 每页记录数 } }).success(function(data, status, headers, config) { // 要在分页工具条显示所有页码 $scope.pageList = new Array(); // 显示表格数据 $scope.people = data.people; //先根据总记录数去计算总页数 $scope.totalCount = data.totalCount; //总记录数 $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize); //总页数 // 更新当前显示页码 $scope.currentPage = page; //显示分页工具条中间码 var begin; // 显示第一个页码 var end; // 显示最后一个页码 // 如果每页显示10页,理论上 begin 是当前页 -5 begin = $scope.currentPage - 5; if(begin < 1) { //begin不能小于1 begin = 1; } // 显示10个页码,理论上end 是 begin + 9 end = begin + 9; if(end > $scope.totalPages) { //最后一页不能大于总页数 end = $scope.totalPages; } // 修正begin 的值, 理论上 begin 是 end - 9 begin = end - 9; if(begin < 1) { //begin不能小于1 begin = 1; } // 将页码加入 PageList集合 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.currentPage; } // 初始化,选中第一页 $scope.selectPage(1); }]) </script>
效果:
相关文章推荐
- 案例21-分页显示某种类别的商品列表
- AngularJs最简单解决跨域问题案例
- JS实现简单分页,页码显示
- 简单织梦分页显示方式条数限制
- 夺命雷公狗---Redis---7-案例操作2(用户列表页,实现分页显示已经关注功能)完
- 分页显示的一个案例
- 简单Java 多表联查分页显示(初)
- AngularJs最简单解决跨域问题jsonp案例
- java web 简单的分页显示
- Struts简单分页显示
- 简单的javascript案例--在本页内切换显示内容
- Oracle学习笔记(十)——分页显示简单示例
- angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)
- AngularJS简单入门案例
- PHP简单实用的数据分页显示代码
- jquery ajax json简单的分页,模拟数据,没有封装,只显示原理
- AngularJS显示一个简单表格
- 【JavaScript】一个简单的分页,显示页首,中间页,页尾,当前页的前后三页,省略其它页
- AngularJs解决跨域问题案例详解(简单方法)
- Ajax几个简单的案例(ajax_用户唯一验证、ajax_返回xml数据的处理(包括分页处理)