angular表格带筛选分页，本地json

最新推荐文章于 2020-12-20 05:36:20 发布

原创最新推荐文章于 2020-12-20 05:36:20 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

angularJS 专栏收录该内容

11 篇文章

订阅专栏

这篇博客展示了如何使用AngularJS实现一个表格，该表格包含筛选和分页功能。用户可以通过选择城市和国家来筛选数据，并通过按钮在本地JSON数据中进行前后翻页。表格的数据源是一个包含多个对象的数组，每个对象包含Name、City和Country属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body ng-app="formTest" >
		<div class="container">
			<div class="add" ng-controller="formCtrl">			
				<h1>list</h1>
				<table border="1" cellspacing="0px" width="100%" >
					<thead>
						<tr>
							
							<th width="35%">name</th>
							<th width="35%"><select ng-model="data1.City" class="select">
								<option value="">city</option>
								<option value="Bergamo">Bergamo</option>
								<option value="London">London</option>
							</select></th>
							<th width="25%"><select ng-model="data1.Country" class="select">
								<option value="">country</option>
								<option value="Canada">Canada</option>
								<option value="Italy">Italy</option>
							</select></th>
						</tr>
					</thead>
					<tbody>
						<tr  ng-repeat="student in (stu=(students|filter:data1|orderBy:'Name')).slice((currentNum - 1) * pageSize, currentNum * pageSize)" >
							
							<td >{{student.Name}}</td>
							<td>{{student.City}}</td>
							<td>{{student.Country}}</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="3">
								<div class="turnPageButtonArea" >
								    <button ng-click="previous()">Previous</button>
								    <button ng-click="next()">Next</button>
								    <input type="number" ng-model="toPage" class="pageNum" placeholder="{{currentNumber}}">
								    <button ng-click="goToPage()">Go</button>
								    <span class="totalPages" >共  {{(stu.length/pageSize)|ceil}}页</span>
								</div>
							</td>
						</tr>
					</tfoot>
				</table>
				
			</div>
			
		</div>
	
	</body>

script

var app = angular.module('formTest', []);
	app.factory('pageService',[
		function page(){
			return{
				setPage:function(data, currentPage, pageSize){
						 var pagedData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
		       			 return pagedData;
				}				
			}
		}
		]);
	app.filter('ceil', function() {
 		return function(input) {
 			return Math.ceil(input);
 		};
	});
	app.controller('formCtrl', ['$rootScope','$scope','$http','$filter','pageService',
		function($rootScope,$scope,$http,$filter,pageService) {
			var url="stu.json";	
			$scope.pageSize=4;	
			
			$http.get(url).success( function(response) {
				$rootScope.students = response;
				$scope.currentNum=1;
				$scope.currentNumber=$scope.currentNum;
	   		});
	   		
   			$scope.previous=function(){
   				//console.log($scope.stu.length);
   				if($scope.currentNum>1){
   					$scope.currentNum-=1;
   					$scope.currentNumber=$scope.currentNum;
   				}
   				else{alert("第一页")};	
   			}
   			$scope.next=function (){
   				//max=$scope.stu.length;
   				max=Math.ceil($scope.stu.length/$scope.pageSize);
		   		if($scope.currentNum<max){
		   			$scope.currentNum+=1;
		   			$scope.currentNumber=$scope.currentNum;
	   			}
	   			else{alert("最后一页")};
   			}
   			$scope.goToPage=function(){
	   			var num=$scope.toPage;
	   			max=Math.ceil($scope.stu.length/$scope.pageSize);
	   			if(num>=1&&num<=max){
	   				$scope.currentNum=num;
	   				$scope.toPage="";
	   				$scope.currentNumber=$scope.currentNum;
	   			}
	   			else{
	   				alert("请重新输入");
	   			}
   		}
	}]);

json

[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
}
]