angular+spring data solr 实现原生分页功能

本文详细介绍了如何在后端实现分页查询功能,并与前端进行数据交互的过程。包括页码、每页记录数的设置,以及如何从前端接收参数并进行数据查询。同时,还展示了如何在前端构建分页标签,实现用户友好的页面导航。

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

需求分析

在这里插入图片描述
在这里插入图片描述

实现代码:

  • 后台
//1.6 分页查询
		//1.页码 pageNo
		Integer pageNo = (Integer) searchMap.get("pageNo");
		//如果每页获取的页码,则设置默认是第一页
		if(pageNo == null) {
			pageNo = 1;
		}
		//2.每页记录数 pageSize 每页默认展示20条数据
		Integer pageSize = (Integer) searchMap.get("pageSize");
		if(pageSize == null) {
			pageSize = 20;
		}
		//3.
		//设置第几条记录开始查询
		query.setOffset((pageNo-1)*pageSize);
		//设置查询多少条记录
		query.setRows(pageSize);
		//返回总页数
		map.put("totalPages", page.getTotalPages());
		//返回总记录数
		map.put("total", page.getTotalElements());

前台:

app.controller('searchController',function($scope,searchService){
	//搜索对象  分类category  品牌brand  规格spec 前端传递数据
	//'pageNo':1 (初始页码) 'pageSize':40 (每页查询记录数)
	$scope.searchMap = {'keywords': '','category':'','brand':'','spec':{},'price':'','pageNo':1,'pageSize':40};
	//搜索
	$scope.search = function(){
		//页码输入的数字进行类型转换
		$scope.searchMap.pageNo= parseInt($scope.searchMap.pageNo);
			searchService.search($scope.searchMap).success(
				function(response){
					//后台返回结果集
					$scope.resultMap = response;
					//价格数组
					$scope.priceArr = ['0-500','500-1000','1000-1500','1500-2000','2000-2500','2500-3000','3000-*'];
					//构建页码
					buildPageLabel();
				}
			);
	}
	
	//添加搜索项
	$scope.addSearchItem = function(key,value){
		if(key == 'category' || key == 'brand'|| key == 'price'){ //如果点击的是分类或者品牌
			$scope.searchMap[key] = value;	
		}else{
			$scope.searchMap.spec[key] = value;
		}
		$scope.search();
	}
	
	//移除面包屑选项
	$scope.removeSearchItem = function(key){
		if(key == 'category' || key == 'brand'|| key == 'price'){ //如果点击的是分类或者品牌
			$scope.searchMap[key] = '';
		}else{
			delete $scope.searchMap.spec[key];
		}
		$scope.search();
	}
	
	//构建分页标签(totalPages为总页数)
	buildPageLabel=function(){
		
		//页码产生 数组
		$scope.pageLabel=[];
		//起始页
		var firstPage = 1;
		//尾页 
		var lastPage = $scope.resultMap.totalPages;
		//前面有点
		$scope.firstDot=true;
		//后边有点
		$scope.lastDot=true;	
		
		//总页数= $scope.resultMap.totalPages;  当前页 = $scope.resultMap.pageNo
		**if($scope.resultMap.totalPages>5){
			if($scope.searchMap.pageNo<=3){
				//当前页 <= 3时 前面没点 
				$scope.firstDot = false;
				lastPage = 5;
			}
			// $scope.searchMap.pageNo>=lastPage-2  
			else if(lastPage-$scope.searchMap.pageNo<=2){ 
				//当前页是倒数前3页时 后面没点 
				$scope.lastDot = false;
				firstPage = $scope.resultMap.totalPages - 4;
			}else{
				firstPage = $scope.searchMap.pageNo - 2;
				lastPage = $scope.searchMap.pageNo + 2;
			}
		}else{
			//当总页码 <= 5
			$scope.firstDot=false;//前面无点
			$scope.lastDot=false;//后边无点
		}
		//循环起始页 和尾页 加入数据入数组
		for(var i = firstPage;i <= lastPage;i++){
			$scope.pageLabel.push(i);
		}**
	}
	
	//根据页码查询
	$scope.queryByPage=function(pageNo){
		//页码验证
		if(pageNo<1 || pageNo>$scope.resultMap.totalPages){
			return;
		}		
		$scope.searchMap.pageNo=pageNo;			
		$scope.search();
	}
	
	//判断当前页为第一页
	$scope.isTopPage=function(){
		if($scope.searchMap.pageNo==1){
			return true;
		}else{
			return false;
		}
	}
	
	//判断当前页是否未最后一页
	$scope.isEndPage=function(){
		if($scope.searchMap.pageNo==$scope.resultMap.totalPages){
			return true;
		}else{
			return false;
		}
	}
	
	
});

页面:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值