<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
<title>BootStrap+AngularJS分页显示</title>
<style>
td {
text-align: center;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table class="table table-bordered">
<tr>
<td>序号</td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品价格</td>
</tr>
<tr ng-repeat="product in products">
<td>{{$index + 1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.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>
<script type="text/javascript">
var myapp = angular.module("myapp", []);
// 初始化控制器
myapp.controller("myCtrl", ["$scope", "$http",
function ($scope, $http) {
//分页组件必须的变量
$scope.currenPage = 1, //当前页码
$scope.pageSize = 4, //每页的记录数
$scope.totalPage = 0, //总页数
$scope.totalCount = 0, //总的记录数
//所有的页码
$scope.pageList = new Array(),
// 加载上一页的数据
$scope.prev = function () {
$scope.selectPage($scope.currenPage - 1);
},
// 加载下一页的数据
$scope.next = function () {
$scope.selectPage($scope.currenPage + 1);
},
// 加载当前页的数据
$scope.selectPage = function (page) {
//page超出范围
if($scope.totalPage != 0 &&(page < 1 || page > $scope.totalPage)){
return;
}
$http({
method: "GET",
url: "demo"+page+".json",
params: {
page : page, //当前页的页码
pageSize : $scope.pageSize //每页的记录数
}
}).success(function (data, status, headers, config) {
// 显示表格数据
$scope.products = data.products;
// 根据总记录数获取总页数
$scope.totalCount = data.totalCount;
// 获取总页数
$scope.totalPage = Math.ceil($scope.totalCount / $scope.pageSize);
// 更显当前页码
$scope.currenPage = page;
// 显示分页工具条中的页码
var begin; // 第一个页码
var end; // 最后一个页码
//理论上的begin
begin = $scope.currenPage - 5;
if(begin < 1){
begin = 1;
}
// 理论上的end
end = begin + 9;
if(end > $scope.totalPage ){
end = $scope.totalPage;
}
//修正begin的值
begin = end - 9;
if(begin < 1){
begin = 1;
}
//将页码加入到list集合
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.currenPage;
},
// 初始化选中第一页
$scope.selectPage(1);
}]);
</script>
</html>BootStrap+AngularJS分页显示
最新推荐文章于 2019-07-01 14:01:01 发布
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
