分页查询与前端加载-CSDN博客

本文链接：https://blog.csdn.net/lijie_insist/article/details/84813842

本文介绍了一种基于JSON参数的分页查询方法，并展示了如何将查询结果展示在前端页面上，实现滚动加载更多功能。文章详细解释了后端如何进行物理分页，从前端角度实现了基于滚动条位置自动加载更多数据的技术细节。

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

Integer pageSize = json.get("pageSize")==null?0:Integer.valueOf(StringUtil.trim(json.get("pageSize")));//每页的个数
				Integer pageNum = json.get("pageNum")==null?0:Integer.valueOf(StringUtil.trim(json.get("pageNum")));//第几页

					JSONArray ja = JSONArray.fromObject(listData);
					List<Map<Object, Object>> csImages = new ArrayList<Map<Object, Object>>(ja.size());

	Integer totalCount = ja.size();//总条数
					Integer totalPage = 0;
	if(pageSize!=0&&pageNum!=0){
						totalPage = totalCount%pageSize==0?totalCount/pageSize:totalCount/pageSize+1;//总页数
						//做物理分页
						int start = (pageNum-1)*pageSize; 
						int end = pageSize*pageNum;
						for(int i=start;i<end;i++){
							if(i<totalCount){
								Map<Object, Object> maptemp = (Map<Object, Object>)ja.get(i);
								Map<Object, Object> tempt = new HashMap<Object, Object>();
								//Map<Object, Object> config1 = dataCoreManager.initSystemCofCache(CHANNEL_ID);
								//String domain = StringUtil.trim(config1.get(CmsContants.FAST_DFS_IMAGE_URL));
								//tempt.put("imgUrl", domain+maptemp.get("imgSrc"));
								tempt.put("imgUrl",maptemp.get("imgSrc"));
								tempt.put("skipUrl", maptemp.get("imgUrl"));
								tempt.put("name", maptemp.get("imgTitle"));
								csImages.add(tempt);
							}else{
								break;
							}
						}
					}
//csImages即为结果


<script type="text/javascript">
var page = 2;
var allPage = ${result.pageAllSize!0};
var tag_id = "${tag_id!''}";
var searchWord = "${searchWord!''}";
function getMore(){
	var url = '${ctx}/wxapp/search_detail_list.html';
	url += "?pageNum=" + page + "&tag_id=" + tag_id + "&searchWord=" + searchWord + "&t=" + (+new Date().getTime());
	getList(url);
	try{
		myScroll.refresh();
	}catch(e){}
}

function getList(url){
	$.ajax({
		url:url,
		dataType:"html",
		async: false, 
		success:function(html){
			if(html.indexOf("-- no more imformation --") > 1){
			}else{
				$("#thelist").append(html);
				page = page + 1;
				document.cookie  = 'search_detail_page='+page;
			}
			if((page-1)==${result.pageAllSize!'0'}){
				$("#pullUp").removeClass("loading").find(".pullUpLabel").html("加载完毕");
			}else{
				$("#pullUp").removeClass("loading").find(".pullUpLabel").html("下滑加载更多");
			}
		},
		error:function(){
			alert("糟糕，出错了:(");
			$("#pullUp").removeClass("loading").find(".pullUpLabel").html("下滑加载更多");
		}
	});       
}
//下滑的相关方法=====================
function getScrollTop() { 
	var scrollTop = 0; 
	if (document.documentElement && document.documentElement.scrollTop) { 
		scrollTop = document.documentElement.scrollTop; 
	} 
	else if (document.body) { 
		scrollTop = document.body.scrollTop; 
	} 
		return scrollTop; 
}

//获取当前可是范围的高度 
function getClientHeight() { 
	var clientHeight = 0; 
	if (document.body.clientHeight && document.documentElement.clientHeight) { 
		clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
	} 
	else { 
		clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
	} 
	return clientHeight; 
} 

function getScrollHeight() { 
	return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
	} 
//下滑的相关方法=====================
//js的最下面协商
window.onscroll = function () { 
	if (getScrollTop() + getClientHeight() == getScrollHeight()) { 
                alert("记载到底部");
		$(this).addClass("loading").find(".pullUpLabel").html("加载中");
		getMore();
	}
}
</script>