angularjs实现分页和搜索

最新推荐文章于 2024-06-23 09:38:21 发布

银狐被占用

最新推荐文章于 2024-06-23 09:38:21 发布

阅读量4k

点赞数 1

分类专栏： AngularJs

本文链接：https://blog.csdn.net/baby97/article/details/78042368

版权

AngularJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

话不多说,上代码

<html class="no-js" ng-app="myApp">
<body ng-controller="mainController">
<table class="am-table am-table-striped am-table-hover table-main">
<thead>
<tr>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in houses | limitTo:listsPerPage">
<td>{{item.c}}</td>
</tr>
</tbody>
</table>
<div class="am-cf">
共 {{dataNum}} 条记录/当前第 {{currentPage+1}} 页 共 {{pages}} 页
<div class="am-fr">
<ul class="am-pagination">
<li><a href="javascript:;" ng-click="prevPage()">«</a></li>
<li><a href="javascript:;" ng-click="nextPage()">»</a></li>
</ul>
</div>
</div>
<script src="plugins/angularjs/angular.min.js" type="text/javascript"></script>
</body>
</html>

<script>
var app = angular.module("myApp", []);
app.controller("mainController", function ($scope, $http) {
	//测试数据
	var $data = {"fs":[{"c":"张一"},{"c":"张二"},{"c":"张三"},{"c":"张四"},{"c":"李一"},{"c":"李二"},{"c":"李三"},{"c":"李四"},{"c":"王一"},{"c":"王二"},{"c":"王三"},{"c":"王四"}]};
    $scope.currentPage = 0;//设置当前页是 0
    $scope.listsPerPage = 3;//设置每页显示3个
	//上一页
    $scope.prevPage = function(){
		if($scope.currentPage > 0){
			$scope.currentPage--;
		}
	}
    //下一页
    $scope.nextPage = function(){
        if ($scope.currentPage < $scope.pages-1){
            $scope.currentPage++;
        }
    }
	//监听搜索条件
	$scope.$watch('search.c', function(){
		$scope.currentPage = 0;
		searchResult();
	});
	//监听翻页
	$scope.$watch('currentPage', function(){
		searchResult();
	});
	//搜索或翻页结果
	function searchResult(){
		var out = [];
		if($scope.search){
			angular.forEach($data.fs,function(k,v){
				if(k.c.indexOf($scope.search.c)>-1){
					out.push(k);
				}
			});
		}
		else{
			out = $data.fs;
		}
		$scope.houses = out.slice($scope.currentPage*$scope.listsPerPage);
		$scope.dataNum =  out.length;
		$scope.pages = Math.ceil($scope.dataNum/$scope.listsPerPage);
	}
});

</script>