分页算法

最新推荐文章于 2021-03-10 01:25:53 发布

关莫忆

最新推荐文章于 2021-03-10 01:25:53 发布

阅读量450

点赞数

分类专栏：前端文章标签： AngularJS

本文链接：https://blog.csdn.net/guan_moyi/article/details/80115750

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>
		<script type="text/javascript" src="../js/angular-route.min.js" ></script>
	</head>
	<body ng-app="paginationApp" ng-controller="paginationController">
		<table class="table table-bordered">
			<tr>
				<th>序号</th>
				<th>商品编号</th>
				<th>名称</th>
				<th>价格</th>
			</tr>
			<tr ng-repeat="p in rows">
				<td>{{$index+1}}</td>
				<td>{{p.id}}</td>
				<td>{{p.name}}</td>
				<td>{{p.price}}</td>
			</tr>
		</table>
			<div>
				<ul class="pagination pull-right">
					<li class="page-item">
						<a href="#" ng-click="prev()">上一页</a>
					</li>
					<li ng-repeat = "num in pageNumbers" ng-class = "{active : num == currentPage}">
						<a href="#" ng-click="selectPage(num)">{{num}}</a>
					</li>
					<li class="page-item">
						<a href="#" ng-click="next()">下一页</a>
					</li>
				</ul>
		</div>
	</body>
	<script type="text/javascript">
		var app = angular.module("paginationApp",[]);
		app.controller('paginationController',['$scope', '$http', function($scope, $http){
			
			$scope.pageSize = 10;			
			$scope.currentPage = 5;
			$scope.totalPages = 1;
			
			$scope.prev = function(){
				$scope.selectPage($scope.currentPage - 1);
			}
			
			$scope.next = function(){
				$scope.selectPage($scope.currentPage + 1);
			}
			
			$scope.selectPage = function(num){
				if(num < 1 || num > $scope.totalPages) return;
				
				$http({
					url : 'products_1.json',
					type : 'get',
					params : {
						page : num,
						rows : $scope.pageSize
					}
				}).success(function(data){
					$scope.currentPage = num;
					
					//算页码
					var total = data.total;
					var totalPages = Math.ceil(total / $scope.pageSize);
					
					
					$scope.pageNumbers = getPageNumbers(totalPages,$scope.currentPage);
					$scope.totalPages = totalPages;
					
					$scope.rows = data.rows;
				}).error(function(data){
					alert("请求出错！");
				});
			}
			
			$scope.selectPage(1);
		}]);
		
		function getPageNumbers(total, current){
			var pageNumbers = [];
			
			var start;
			var end;
			
			start = current -5;
			if(start < 1) start = 1;
			
			end = start + 9;
			if(end > total) end = total;
			
			start = end -9;
			if(start < 1) start = 1;
			
			for(var i = start; i <= end; i++){
				pageNumbers.push(i);
			}
			
			return pageNumbers;
		}
		
		console.log(getPageNumbers(14,7));
		console.log(getPageNumbers(14,1));
		console.log(getPageNumbers(14,6));
	</script>
</html>

关莫忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页算法

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;BootStrap+AngularJS分页显示 &lt;/title&gt; &lt;script type="text/javascript" src="../j
复制链接

扫一扫