Bootstrap結合angularjs分頁顯示,實現當前選中居中效果
阿新 • • 發佈:2018-12-01
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(1);
}]);