分页代码

本文详细介绍了一种基于HTML和JavaScript的手动实现分页效果的方法,包括前端页面设计及交互逻辑,以及后端数据处理流程。通过具体实例展示了如何通过调整URL参数来实现不同页面间的跳转,并保持查询条件的一致性。

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

1 分页效果


1实现-表单页面

html:
<div class="page">
           找到${totalRows}条记录,现在是第${currentPage}页,共${totalPages}页
    <a href="#" onclick="return pagination('${ctx}/hy/navHyDjList.do',${totalRows},1,10);">首页</a>
    <a href="#" onclick="return pagination('${ctx}/hy/navHyDjList.do',${totalRows},${currentPage}-1,10);">上一页</a>
    <a href="#" onclick="return pagination('${ctx}/hy/navHyDjList.do',${totalRows},${currentPage}+1,10);">下一页</a>
    <a href="#" onclick="return pagination('${ctx}/hy/navHyDjList.do',${totalRows},${totalPages}, 10);">末页</a>
            跳转:<input type="text" class="text" id='gotoPage' value='${currentPage}'/>页
    <input type="button" class="gobtn" value="" onclick="pageGoTo('${ctx}/hy/navHyDjList.do',${totalRows}, 10);"/>     
</div>
    
<form name="paginationForm" method="post" action="${ctx}/hy/navHyDjList.do">
	<input type="hidden" name="firstRow" value="0"/><!-- 每页第一条记录的起始索引 -->
	<input type="hidden" name="maxRows" value="10"/><!-- 每页显示的记录数量 -->
	<input type="hidden" name="currentPage" value="${currentPage}"/><!-- 当前显示的页数 -->
	<!-- 
	    /*******************************************************
	     *以下这些参数是在条件搜索的结果中,进行翻页操作时所需要的搜索条件 *
	     *这样在查询结果中,进行翻页操作时,请求被再次提交,而查询条件的参 *
	     *数不会被遗漏掉										   *
	     *******************************************************/
	 -->
	 <input type="hidden" id='hyname_parm' name="hyname_parm" value="${hyname}"/>
	 <input type="hidden" id='stdate_parm' name="stdate_parm" value="${stdate}"/>
	 <input type="hidden" id='enddate_parm' name="enddate_parm" value="${enddate}"/>
</form> 
js
/********************************/
/**本脚本用于控制自定义表格的分页操作**/
/********************************/
//分页操作
//urlIn:表单所提交的请求地址
//totalRowsIn:总记录数
//currentPageIn:要跳转到的页数,第一页为1
//maxRowsIn:每页的记录数
//若当前页数(currentPageIn)小于第一页(1),或大于末页(总记录数除以每页的记录数,然后依情况取整),则弹出提示
function pagination(urlIn,totalRowsIn,currentPageIn,maxRowsIn){
	
	totalRowsIn = parseInt(totalRowsIn);
	currentPageIn = parseInt(currentPageIn);
	maxRowsIn = parseInt(maxRowsIn);
	if(urlIn==""){
		alert("入数错误:缺少请求地址");
		return false;
	}
	else if(totalRowsIn<0){
		alert("入参错误:缺少总记录数量");
		return false;
	}
	else if(currentPageIn<0){
		alert("入参错误:缺少当前要显示的页数");
		return false;
	}
	else if(maxRowsIn<=0){
		alert("入参错误:缺少每页显示的记录数量");
		return false;
	}
	else if(totalRowsIn==0){
		alert("没有找到记录");
		return false;
	}
	//计算出最大页数
	var maxPages = 1;
	var temp01 = Math.floor(totalRowsIn / maxRowsIn);//总记录数除以每页显示的记录数,然后向下取整
	
	var temp02 = totalRowsIn % maxRowsIn;//总记录数除以每页显示的记录数的余数,这里要用的是两种,余数等于0,或余数不为0
	if(temp01<1){//总记录数小于每页显示的记录数,则全部都只显示在第一页中
		maxPages = 1;
	}
	else if(temp02==0){//总记录数除以每页显示的记录数,除得尽,则最大页数即为所除的结果
		maxPages = temp01;
	}
	else if(temp02!=0){//总记录数除以每页显示的记录数,除不尽,则最大页数要+1
		maxPages = temp01+1;
	}
	
	//判断当前页数(currentPageIn)是否合法,若当前页数(currentPageIn)小于第一页(1),或大于末页(总记录数除以每页的记录数,然后依情况取整),则弹出提示
	if(currentPageIn<1){
		//alert("已达到第一页");
		currentPageIn = 1
		// return false;
	}
	else if(currentPageIn>maxPages){
		//alert("已达到最后一页");
		currentPageIn = maxPages
		// return false;
	}
	//设置请求参数
	var paginationForm = document.paginationForm;
	paginationForm.action = urlIn;
	paginationForm.maxRows.value = maxRowsIn;
	paginationForm.currentPage.value = currentPageIn;
	
	//根据当前页数和每页显示的页数,计算该页的第一条记录的索引数firstRow
	var fr = (currentPageIn - 1) * maxRowsIn; 
	
	paginationForm.firstRow.value = fr;
	
	paginationForm.submit();
	return true;
}

function pageGoTo(url,totalRows,maxRow){
	var currPage = document.all.gotoPage.value;
	// alert("currPage:"+currPage);
	return pagination(url,totalRows,currPage,maxRow);
}

2.实现- 后台方法

controller
public ModelAndView navHyDjList(HttpServletRequest request,HttpServletResponse response)throws Exception{
		User user = (User)request.getSession().getAttribute("user");
		String userid = user.getUserid().getValue();
		
		//先获取页面上的分页显示要用的参数
		String firstRowStr = StringFilter.getRequestParameter(request, "firstRow");
		String maxRowsStr = StringFilter.getRequestParameter(request, "maxRows");
		String currentPageStr = StringFilter.getRequestParameter(request, "currentPage");
		
		String hyname = StringFilter.getRequestParameter(request, "hyname_parm");
		String stdate = StringFilter.getRequestParameter(request, "stdate_parm");
		String enddate = StringFilter.getRequestParameter(request, "enddate_parm");
		
		int firstRow = "".equals(firstRowStr)?0:Integer.parseInt(firstRowStr);//每页数据的起始索引
		int maxRows = "".equals(maxRowsStr)?10:Integer.parseInt(maxRowsStr);//每页取几条数据
		int currentPage = "".equals(currentPageStr)?1:Integer.parseInt(currentPageStr);//当前显示的是哪一页
		
		@SuppressWarnings("rawtypes")
		List lsit = hyglHyManager.findbyAuthid(userid,hyname,stdate,enddate,firstRow,maxRows);
		
		int totalRows = this.hyglHyManager.findbyAuthid(userid,hyname,stdate,enddate,0,Integer.MAX_VALUE).size();//使用自定义方法从数据库中统计记录总数(这样统计记录总数方法适用于几十页的情况,如记录数大于几千条不推荐使用)
		int totalPages = totalRows/maxRows; //计算总页数
		if(totalRows%maxRows!=0){
			totalPages += 1;
		}
		
		Map<String, Object> map = new HashMap<String, Object>();
		List outList = hyglHyManager.turnToWebModel(lsit);
		map.put("list", outList);
		map.put("totalRows", totalRows);
		map.put("currentPage", currentPage);
		map.put("totalPages", totalPages);
		
		map.put("hyname", hyname);
		map.put("stdate", stdate);
		map.put("enddate", enddate);
		return new ModelAndView("hy/hyDjList",map);
	}
service
/**
	 * 获取会议记录列表 通过创建者
	 * @param authid
	 * @return
	 */
	public List<HyglHy> findbyAuthid(String authid,String hyname,String stdate,String enddate, int firstRow, int maxRows){
		try {
			String hqlString="from HyglHy hyglHy where hyglHy.iseffect='y' ";
			hqlString = hqlString+" and hyglHy.authid='"+authid+"'";
			// 会议名称
			if(!hyname.equals("")){
				hqlString = hqlString+" and hyglHy.hyname like '%"+hyname+"%'";
			}
			// 会议时间范围
			if(!stdate.equals("") && !enddate.equals("")){
				hqlString = hqlString+" and hyglHy.hydate >="+OracleString.append_Oracle_toDateCol_str(stdate);
				hqlString = hqlString+" and hyglHy.hydate <="+OracleString.append_Oracle_toDateCol_str(enddate);
			}
			
			hqlString = hqlString+" order by djdate desc";
			HibernateCallback hcb = new MyCallback(hqlString,firstRow,maxRows);
			List<HyglHy> list = this.getHibernateTemplate().executeFind(hcb);
			
			return list;
		} catch (RuntimeException re) {
			// TODO: handle exception
			log.error("find all failed",re);
			throw re;
		} 
	}

备注:
    如果用query的话,使用一下语句
    query.setFirstResult((pageNo - 1) * pageSize);
    query.setMaxResults(maxResults);


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值