JavaWeb&jsp网页分页的实现

方法一:一次性将数据都查询到存放到cookie中

只需查询一次数据库

该方法只查询一次数据库,然后利用前端将查到的内容放到网页上,需要前端验证过滤掉多余的数据,该方法的缺点是用户第一次进入网页时,若数据量过大,可能造成用户等待时间过久。
1.发送请求部分

<%request.getSession().setAttribute("begin",0); %>
<%request.getSession().setAttribute("page", 1); %>
<script>
var flag1;
	var flag2;
	
	$.ajaxSettings.async = false;
	
	$.post("/blog/typeServlet",{
		op:'getAllType'
	},function( data ){
		flag1 = data;
	});
	
	$.post("/blog/contentsServlet",{
		op:'getAllContent'
	},function( data ){
		flag2 = data;
	});
	
	$.ajaxSettings.async = true;
	
	if( flag1>0 && flag2>0 ){
		location.href="main.jsp"
	}else{
		location.href="error.html"
	}
</script>

2.查询数据

public List<Type> getTypeInfo() {
		String sql = "select * from type order by tid";
		List<Type> list = db.find(sql,null,Type.class);
		return list;
	}

3.1 servlet部分

private void getAllContent(HttpServletRequest req, HttpServletResponse resp, PrintWriter out) {
		List<Map<String, String>> list = cb.getAllContent();
		req.getSession().setAttribute("contents", list);
		req.getSession().setAttribute("pages", list.size()%5==0 ? list.size()/5 : list.size()/5+1 );
		req.getSession().setAttribute("counts", list.size());
		
		out.print( list.size() );
	}

3.2 servlet控制每页展示条数,页数

private void getContentByPage(HttpServletRequest req, HttpServletResponse resp, PrintWriter out) {
		String change =req.getParameter("change") ;
		Integer begin =(Integer) req.getSession().getAttribute("begin");
		Integer pages = (Integer) req.getSession().getAttribute("pages");
		Integer counts = (Integer) req.getSession().getAttribute("counts");
		Integer page = (Integer) req.getSession().getAttribute("page");
		if( "1".equals(change) ) {
			begin += 5;
			page++;
		}else {
			begin -= 5;
			page--;
		}
		
		begin = Math.max(1, Math.min(begin, counts-5));
		page = Math.max(1, Math.min(page, pages));
		//System.out.println(page+"-"+pages);
		//System.out.println(begin);
		req.getSession().setAttribute("page", page);
		req.getSession().setAttribute("begin", begin);
		out.print( begin );
	}

4.前端网页循环显示数据及页数显示:

<c:forEach var="content" items="${contents }" begin="${begin }" end="${begin+5 }" varStatus="status">
			<div class="listBox">
				<h1>${content.title }</h1>
				<p class="colDefault">
					作者:<span class="colInfo">${content.uname }</span> - 时间:<span class="colInfo">${content.addtime }</span>
					- 阅读:<span class="colInfo">${content.views }</span> - 评论:<span class="colInfo">0</span>
				</p>
				<dfn>
					<p>${content.discription }</p>
				</dfn>
				<div class="function">
					<a href="">阅读全文</a>
				</div>
			</div>
		</c:forEach>
		
		<div class="pager">
			<ul class="clear">
				<li class="previous"><a href="javascript:void(0);" onclick="changePage(-1);">上一页</a></li>
				<li><strong> ${page } / ${pages } </strong></li>
				<li class="next"><a href="javascript:void(0);" onclick="changePage(1);">下一页</a></li>
			</ul>
		</div>

方法二:java后台多次连接查询数据库分页

一次需要多少数据就查多少数据

该方法需要多次查询数据库,然后将每次查到的内容放到网页上,无需前端验证过滤不需要的数据。每次查出用户所需数据,首次进入网页时,用户不必等待过久的时间。
1.前端网页显示

<div class="container-fluid">
		<div class="jumbotron">
			<h3>用户列表</h3>
			<table class="table table-striped table-hover">
				<tr>
					<th style="text-align: center;">ID</th>
					<th style="text-align: center;">用户名</th>
					<th style="text-align: center;">密码</th>
					<th style="text-align: center;">是否为管理员</th>
				</tr>
				<c:forEach var="myuser" items="${users }" varStatus="status">
					<tr align="center">
						<td>${myuser.uid }</td>
						<td>${myuser.uname }</td>
						<td>${myuser.pwd }</td>
						<c:if test="${myuser.isadmin==0 }">
							<td></td>
						</c:if>
						<c:if test="${myuser.isadmin==1 }">
							<td></td>
						</c:if>
					</tr>
				</c:forEach>
			</table>
		</div>
	</div>

2.js发送请求

function changePage( page ){
			$.post("../userServlet",{
				op:'getAllUser',
				page:page,	//默认第一页
				size:'7'	//每页7条数据
			},function( data ){
				if( data>0 ){
					location.href = "users.jsp";
				}else{
					alert("网络错误!");
				}
			});
		}

3.后台数据库查询

public List<User> getAllUserByPage(int page, int size) {
		String sql = "select * from user order by uid limit "+(page-1)*size+","+size;
		return db.find(sql, null, User.class);
	}
发布了40 篇原创文章 · 获赞 16 · 访问量 8668

猜你喜欢

转载自blog.csdn.net/qq_40366738/article/details/98989080