- 模仿百度的每頁顯示10條數據, 實現了當前頁居中的算法.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootStrap+AngularJS分頁顯示 </title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body ng-app="paginationApp" ng-controller="paginationCtrl">
<table class="table table-bordered">
<tr>
<th>序號</th>
<th>商品編號</th>
<th>名稱</th>
<th>價格</th>
</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 paginationApp = angular.module("paginationApp", []);
paginationApp.controller("paginationCtrl", ["$scope", "$http",
function($scope, $http) {
// 分頁組件 必須變量
$scope.currentPage = 1; // 當前頁 （請求數據）
$scope.pageSize = 4; // 每頁記錄數 （請求數據）
$scope.totalCount = 0; // 總記錄數 （響應數據）
$scope.totalPages = 0; // 總頁數 （根據 總記錄數、每頁記錄數 計算 ）
// 要在分頁工具條顯示所有頁碼
$scope.pageList = new Array();
// 加載上一頁數據
$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 ;
}
$http({
method: 'GET',
url: '6_'+page+'.json',
params: {
"page" : page , // 頁碼
"pageSize" : $scope.pageSize // 每頁記錄數
}
}).success(function(data, status, headers, config) {
// 顯示表格數據
$scope.products = data.products;
// 根據總記錄數 計算 總頁數
$scope.totalCount = data.totalCount;
$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
// 更新當前顯示頁碼
$scope.currentPage = page ;
// 顯示分頁工具條中頁碼
var begin ; // 顯示第一個頁碼
var end ; // 顯示最后一個頁碼
// 理論上 begin 是當前頁 -5
begin = $scope.currentPage - 5 ;
if(begin < 1){ // 第一個頁碼 不能小于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){ // 第一個頁碼 不能小于1
begin = 1 ;
}
// 要在分頁工具條顯示所有頁碼
$scope.pageList = new Array();
// 將頁碼加入 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>
</html>
1_1.json
{
"totalCount":100,
"products":[
{"id":"1001","name":"蘋果手機","price":"5000"},
{"id":"1002","name":"三星手機","price":"6000"}
]
}
1_2.json
{
"totalCount":100,
"products":[
{"id":"1001","name":"華為手機","price":"5000"},
{"id":"1002","name":"vivo手機","price":"6000"}
]
}
實現的效果如圖:
遇到的問題 : 下面的代碼, 如果 把begin不小心寫成了0 , 則頁碼上,會出現從0開始的bug
// 將頁碼加入 PageList集合
for(var i=begin ; i<= end ;i++){
$scope.pageList.push(i);
}
如下圖所示
原因是begin代表的是頁面顯示的第一個頁碼, 如果i從0開始開始遍歷, 那么pageList數組中的第一個元素就是0 ,因此在如下的angularJS的遍歷頁碼的過程中, 就會從0開始遍歷. 在頁面上, 就會顯示從0 開始
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
<a href ng-click="selectPage(page)">{{page}}</a>
</li>
