您的位置：首页 > Web前端 > AngularJS

AngularJS分页显示的简单案例

2018-01-30 12:59 183 查看

由于我下载的anjularJs是1.3的,所以有些代码会和1.5以及之后的有些不同.虽然代码可能不同,但是分页思想还是差不多的.

<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>

效果:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： AngularJS 分页显示

相关文章推荐

新的分享

章节导航