基于angular实现分页工具条展示

思路:

1）客户端发送给服务器两个参数：当前页码、每页记录数

2）服务器端根据当前页码和每页记录条数查询结果返回：总记录数、当前页数据

3）客户端将返回当前页数据显示到表格中，根据返回总记录数和每页记录条数，计算总页数，根据总页数和当前页码，显示分页工具条（百度默认显示10个页码，当前页居中）

具体实现

在工具条上，将静态数据换为动态数据，绑定点击事件

<!--  分页按钮 -->
<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>

几个重要的方法：

prev()加载上一页数据

next()加载下一页数据

selectPage(page)加载指定页数据显示

isActivePage(page)判断是否为当前显示页码

将显示所有页码，加入pageList集合对象，遍历显示出来

实现后台数据异步查询,计算显示10页页码的起始页码、结束页码

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)
4000
{
// 当响应以错误状态返回时调用
alert("出错，请联系管理员 ");
});
}

$scope.isActivePage = function(page) {
return page == $scope.currentPage;
}

// 发起请求 显示第一页数据
$scope.selectPage($scope.currentPage);

}]);