bosfore_app.controller("ctrlRead", ['$scope', '$http', function($scope, $http) {
$scope.currentPage = 1;
$scope.pageSize = 4;
$scope.totalCount = 0;
$scope.totalPages = 0;
$scope.prev = function() {
if($scope.currentPage > 1) {
$scope.selectPage($scope.currentPage - 1);
}
}
$scope.next = function() {
if($scope.currentPage < $scope.totalPages) {
$scope.selectPage($scope.currentPage + 1);
}
}
$scope.selectPage = function(page) {
// 如果页码超出范围
if($scope.totalPages != 0) {
if(page < 1 || page > $scope.totalPages) return;
}
$http({
method: 'GET',
url: 'promotion_pageQuery.action',
params: {
"page": page, // 当前页码
"rows": $scope.pageSize // 每页记录数
}
}).success(function(data, status, headers, config) {
// 显示表格数据
$scope.pageItems = data.pageData;
// 计算总页数
$scope.totalCount = data.totalCount;
$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
// 当前显示页,设为当前页
$scope.currentPage = page;
// 固定显示10页 (前5后4)
var begin;
var end;
begin = page - 5;
if(begin < 0) {
begin = 1;
}
end = begin + 9;
if(end > $scope.totalPages) {
end = $scope.totalPages;
}
begin = end - 9;
if(begin < 1) {
begin = 1;
}
$scope.pageList = new Array();
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($scope.currentPage);
}] );
结合html的展示页面 BootStrap + AngularJS
<div class="promotion" >
<!-- banner-->
<section class="bannerarea">
<div class="bannerimg"><img src="images/show/suyun/banner.png" class="img-responsive" alt="Responsive image"></div>
</section>
<!-- maincontent-->
<section class="container">
<div ng-controller="ctrlRead">
<table class="table table-striped table-condensed table-hover">
<tbody>
<div class="activitybox row">
<div class="areatitle">
<h2 class="text-left"><span class="title">活动促销</span></h2>
<p class="english"><span class="subtitle">ACTIVITY PROMOTION</span></p>
<ul class="list-inline">
<li class="active">全国</li>
<li>华中</li>
<li>华南</li>
<li>华北</li>
</ul>
</div>
<div class="col-sm-6 col-md-3" ng-repeat="item in pageItems">
<div class="thumbnail">
<img ng-src="{{item.titleImg}}" alt="活动一">
<div class="caption">
<p><a href="#/promotion_detail/{{item.id}}">{{item.title}}</a></p>
<p class="text-right status">
<span ng-show="item.status == '1'">进行中</span>
<span ng-show="item.status == '2'">已结束</span>
</p>
<p class="text-right grey">{{item.startDate}}—{{item.endDate}}</p>
<p class="text-right grey">{{item.activeScope}}</p>
</div>
</div>
</div>
</div>
</tbody>
</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 ng-click="selectPage(page)">{{ page }}</a>
</li>
<li>
<a href ng-click="next()">下一页</a>
</li>
</ul>
</div>
</div>
</section>
</div>