angular.js+bootstrap 自己做分页插件（二）带数据加载的分页插

发布时间：2020-12-17 08:16:56 所属栏目：安全来源：网络整理

导读：代码实现： !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /script type="text/javascript" src="js/angular.min.js"/scriptscript type="text/javascript" src="js/jquer

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
	</head>
	<body ng-app="myApp" ng-controller="ctr1" class="container" style="margin-top: 100px;">
		<p>每页显示<input type="text" ng-model="pagenum" ng-blur="getPages(1)"/>条数 </p>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>ID</th>
					<th>NAME</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="v in data">
					<td>{{v.id}}</td>
					<td>{{v.name}}</td>
				</tr>
			</tbody>
		</table>
		<ul class="pagination">
			<li ng-class="{disabled:1==page}"><a href="#" ng-click="getPages(page-1<1?1:page-1)">?</a></li>
			<li ng-repeat="item in pages" ng-class="{active:item==page}"><a href="#" ng-click="getPages(item)" >{{item}}</a></li>
			<li ng-class="{disabled:totalPages==page}"><a href="#" ng-click="getPages(page+1>totalPages?totalPages:page+1)">?</a></li>
		</ul>
		<script>
			var data=[{id:1,name:'name1'},{id:2,name:'name2'},{id:3,name:'name3'},{id:4,name:'name4'},{id:5,name:'name5'},{id:6,name:'name6'},{id:7,name:'name7'},{id:8,name:'name8'},{id:9,name:'name9'},{id:10,name:'name10'},{id:11,name:'name11'},{id:12,name:'name12'},{id:13,name:'name13'},{id:14,name:'name14'},{id:15,name:'name15'},{id:16,name:'name16'},{id:17,name:'name17'},{id:18,name:'name18'},{id:19,name:'name19'},{id:20,name:'name20'},{id:21,name:'name21'},{id:22,name:'name22'},{id:23,name:'name23'},{id:24,name:'name24'},{id:25,name:'name25'},{id:26,name:'name26'},{id:27,name:'name27'},{id:28,name:'name28'},{id:29,name:'name29'},{id:30,name:'name30'},{id:31,name:'name31'},{id:32,name:'name32'}
				];
			var app = angular.module('myApp',[]);
			function getPages(currentpage,firstPage,endPage,pageNum){
				var pages = [];
				console.log("f:"+firstPage);console.log("e:"+endPage);
				for(var i=firstPage;i<=endPage;i++){
					pages.push(i);
				}
				console.log(pages);
				return pages;
			}
			
			app.controller('ctr1',function($scope){
				var size = data.length;
				$scope.pagenum = 5
				$scope.getPages = function(page){
					$scope.totalPages = size%$scope.pagenum==0?(size/$scope.pagenum):Math.ceil(size/$scope.pagenum);
					var firspage=0,endpage=0;
					if(page<$scope.pagenum){
						firspage = 1;
						endpage = $scope.pagenum>$scope.totalPages?$scope.totalPages:$scope.pagenum;
					}else{
						var index = $scope.totalPages-page;
						if(index<($scope.pagenum-1)){
							firspage = $scope.totalPages-($scope.pagenum-1);
							endpage = $scope.totalPages;
						}else{
							firspage = page-(Math.ceil($scope.pagenum/2));
							endpage = page+(Math.ceil($scope.pagenum/2));
						}
					}
					$scope.pages = getPages(0,firspage,endpage,$scope.pagenum);
					$scope.page = page;
					var indexS = ($scope.page-1)*$scope.pagenum;
					var indexE = parseInt(indexS)+parseInt($scope.pagenum);
					var indexEnd = indexE>data.length?data.length:indexE;
					var tableD = []
					for(var s=indexS;s<indexEnd;s++){
						tableD.push(data[s]);
					}
					$scope.data = tableD;
				}
				$scope.getPages(1);
			});
		</script>
	</body>
	
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!