（首页上一页下一页尾页 + 下拉框跳转）分页功能

最新推荐文章于 2026-05-16 05:54:52 发布

原创最新推荐文章于 2026-05-16 05:54:52 发布 · 2.7w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

.....JavaScript/jQuery 同时被 3 个专栏收录

11 篇文章

订阅专栏

.....jsp

11 篇文章

订阅专栏

.....html/css

7 篇文章

订阅专栏

本文介绍了使用Bootstrap和jQuery，结合Struts2 MVC，实现（首页、上一页、下一页、尾页+下拉框跳转）的分页功能。文章强调该方法适用于页数不多的情况，因为页数过多时获取总记录数会较慢。详细讲解了Java后台Model、DAO层、Action层以及JSP层的实现步骤，并指出在JSP层的下拉框选择和onchange函数是关键。最后，提出了可以使用Ajax进行优化，以实现无刷新分页。

说在前头（本人用的是bootstrap +jQuery 和 struts2 + MVC）不影响分页功能

制作一个分页功能：

效果如下：

由上图可知，此功能只适合页数不是特别多的情况下，页数多的时候，每次都要求得总记录数，太慢了。

【一】：1、总记录数，2、总页数，3、每页记录数，4、当前页

【三】：直接跳转

一、java后台分页model

省略了get，set函数，和构造函数

public class PageModel<T> {
	private int pageSize;   //分页每一页的记录数
	private int pageNum=1;  //当前页号
	private int totalCount; //总记录数
	private List<T> result; //整个记录
		//totalpage        总页数，通过计算 直接get得到
	/*。。。。。。。*/
	public int getTotalPage(){
		return (totalCount - 1) / pageSize + 1;
	}
	/*。。。。。*/
}

二、DAO层

这层就不写了，主要就是获取列表

sql 语句我用的是 StringBuilder ，动态添加需要的参数

int totalCount = queryForInt(countSql.toString(), params.toArray());
List<ProductBean> result = query(ProductBean.class,sql.toString(), params.toArray());

PageModel<ProductBean> pageModel = new PageModel<ProductBean>(pageSize,pageNum,totalCount,result);

三、Action层

private PageModel<ProductBean> pageModel ; 
private List<KindBean> upList ;
private List<KindBean> dols;
private int pagesize=2;//初始化，为了第一次进来能有个值
private int pagenum = 1;//同上

参数：省略get，set

public int getPagebegin(){
	return (pagenum-1)*pagesize;
}
public int getPageend(){
	int a=pagenum*pagesize-1 , b=pageModel.getResult().size()-1;//注意这个，两个都要-1
	if(a < b) return a;
	else return b;
}

在以上get，set以外，再加两个

System.out.println("page:" +pagesize + " " + pagenum );
pageModel = dao.searchForPage(pagesize, pagenum);
if(pageModel.getResult().size() == 0 ){
	return "error";
}

获得到pagesize 和pagenum，再将要用的值传到DAO层，去数据库里找值，

【注意】当size为0时要返回错误，跳向没有数据的查询失败页面

四、JSP层

<s:iterator value="pageModel.result " var="pro" begin="pagebegin " end="pageend ">
	<div>
	</div>
</s:iterator>

中间加上循环的部分，pagebegin 直接会调用后面的getPagebegin函数，pageend同理。

<div class="row" style="text-align:center">
	<div class="col-md-6">
		<span>共有</span>
		<span class="text-primary"> ${pageModel.totalCount } </span><span>条记录  共</span>  
		<span class="text-primary"> ${pageModel.totalPage } </span><span>页  每页</span>
		<span class="text-primary"> ${pageModel.pageSize } </span><span>条记录 当前</span>
		<span class="text-primary"> ${pageModel.pageNum } / ${pageModel.totalPage } </span><span>页</span>
	</div>
	<div class="col-md-6">
		<span>
			<a href="productAction?pagenum=1 " >首页</a> 
		<s:if test="pageModel.pageNum == 1">
			<a href="productAction?pagenum=1" >上一页</a> 
		</s:if>
		<s:else>
			<a href="productAction?pagenum=${pageModel.pageNum-1 } >上一页</a> 
		</s:else>
		<s:if test="pageModel.pageNum == pageModel.totalPage">
			<a href="productAction?pagenum=${pageModel.totalPage } >下一页</a> 
		</s:if>
		<s:else>
			<a href="productAction?pagenum=${pageModel.pageNum+1 } >下一页</a> 
		</s:else>
			<a href="productAction?pagenum=${pageModel.totalPage } >尾页</a> 
		</span>
		<span>转到</span>
		
		<select class="control" id="pagenum" name="pageModel.pageNum" onchange="turnPage()" style="width:40px" >
			<s:iterator var="num" begin="1" end="pageModel.totalPage">
				<option value="${num }" >${num }</option>
			</s:iterator>
		</select>
		<span>页</span>
	</div>
</div>

【一】：应该没什么号说明的，直接取出值来
【二】：分页的时候，首页和尾页直接就是固定值。上一页和下一页要判断一下。

【三】：重点一、在于下拉框里的值从1到总页数，重点二、onchange函数，

jquery：

// 选框跳转页面
function turnPage(){
	var num = $("#pagenum").val();
	//alert(num );
	window.location.href="productAction?pagenum="+num;
}

这个时候看似完美了，你会发现还缺少一点，因为跳转完后，下拉框的值还是原来的1，所以这个也要进行改变。

jsp：

<!-- 用来将当前页面的值设置到 页面跳转框里  -->
<input type="hidden" id="pageNum" name="pageNum" value="${pageModel.pageNum }" >

jquery：

$(function(){
	//设置跳转页面框里的值
	$("#pagenum").val( $("#pageNum").val());
});

可以再优化的部分：

【一】可以用ajax分页，这样不刷新网页，更好