Java Web分页显示实现思路

最新推荐文章于 2024-05-12 05:25:38 发布

渔溪大王

最新推荐文章于 2024-05-12 05:25:38 发布

阅读量1.5w

点赞数 35

分类专栏： java web 文章标签： java web 分页显示实现

本文链接：https://blog.csdn.net/weixin_41047704/article/details/81104804

版权

java web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现效果

一.需求描述

从数据库中将所有数据查询出来，分页显示在前端页面上，每页显示若干条数据，并实现"首页"，"上一页"，"下一页"，"尾页"，"跳转至指定页码"，"显示当前页码"等功能

二.实现思路

我的思路是将当前页码的值作为参数传给servlet，作为查询时传入持久层的参数，查询出对应页的五条数据（我的项目中规定一页显示五条），然后将查询出来的对象集合传给jsp显示，下面是前端实现代码（此处请注意！实体对象的属性字段开头两个字母不能一个大写一个小写，这不符合JavaBean的属性命名规范，开头字母必须小写，例如username，不能写成UserName,否则在EL表达式中将报异常:javax.el.PropertyNotFoundException:Property 'UserName' not found on，因为我之前不清楚这个规范，所以当时在这个地方卡了很久）

<script type="text/javascript">
  	function remove(node){
  		 var tr1 = node.parentNode.parentNode;
             var username = tr1.cells[1].innerText;
             alert(username);
             var newurl = "DeleteServlet?username="+username;
             location.href = newurl;
  	}
  	
  	function First(){
  		location.href = "PageServlet?pageno=1";
  	}
  	
  	function Last(){
  		var pageno =<%= (Integer)request.getAttribute("pageno")  %>
  		if(pageno<=1){
  			alert("这已经是最前面一页！");
  			return;
  		}else{
  			pageno = pageno - 1;
  			location.href = "PageServlet?pageno="+pageno;
  		}
  	}
  	
  	function Next(){
  		var pageno =<%= (Integer)request.getAttribute("pageno")  %>
  		var pagenum =<%= (Integer)request.getAttribute("pagenum") %>
  		if(pageno>=pagenum){
  			alert("没有下一页了！");
  			return;
  		}else{
  			pageno++;
  			
  			location.href = "PageServlet?pageno="+pageno;	
  		}
  	}
  	
  	function End(){
  		var pagenum =<%= (Integer)request.getAttribute("pagenum") %>
  		location.href = "PageServlet?pageno="+pagenum;
  	}
  	
  	function random(){
  		var spage=document.getElementById("randompage").value;
  		var pagenum =<%= (Integer)request.getAttribute("pagenum") %>
  		
  		if((spage>=1) && (spage<=pagenum)){
  			var pageno = spage;
  			location.href = "PageServlet?pageno="+pageno;	
  		}else{
  			alert("超出页码范围！请重新输入");
  		}		
  	}
 	</script>
	 <body>
   	<table border="1" id="no1">
   			<tr>
	   			<th>序号</th>
	   			<th>用户名</th>
	   			<th>用户密码</th>
	   			<th>用户邮箱</th>
	   			<th>用户性别</th>
	   			<th>用户所在地区</th>
	   			<th>用户密保序列号</th>
	   			<th>操作</th>
	   		</tr>
   		<c:forEach items="${us}" var="user">
   			<tr>
   				<td><%= count+=1 %></td>
	   			<td>${user.username}</td>
	   			<td>${user.password}</td>
	   			<td>${user.useremail}</td>
	   			<td>${user.sex}</td>
	   			<td>${user.country}</td>
	   			<td>${user.passwordstring}</td>
	   			<td><button onclick="remove(this)">删除</button></td>
   			</tr>
   		</c:forEach>
   	</table>
   	<table id="no2">
   		<tr>
   			<td><button onclick="First()">首页</button></td>
   			<td><button onclick="Last()">上一页</button></td>
   			<td><button onclick="Next()">下一页</button></td>
   			<td><button onclick="End()">尾页</button></td>
   			<label>当前数据库中共有<%= (Integer)request.getAttribute("pagenum") %>页</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   			<label>跳转至第</label>
   			<input id="randompage" type="text"  />页
     			<button onclick="random()">跳转</button>
     			<label>当前是第<%= (Integer)request.getAttribute("pageno") %>页</label>
   		</tr>
   	</table>
  </body>

使用SQL查询语句 select * from table_name limit n,m;(从指定表中查询第n条开始的m数据)，将查询出来的数据放入集合中保存，以下是dao层的方法实现

	//查询当前页面的五条记录
	public List<User> queryuserlimit(int pageno) throws ClassNotFoundException, SQLException {
		Class.forName("com.mysql.jdbc.Driver");
		Connection conn = DriverManager.getConnection(url,username,pwd);
		String sql = "select * from user limit ?,?";
		//企业级应用中通常使用preparedstatement而不使用statement
		PreparedStatement ps = conn.prepareStatement(sql);
		ResultSet rs = null;
		//pageno是当前要查询的页码值
		ps.setInt(1,(pageno*5)-5);
		ps.setInt(2,5);
		rs = ps.executeQuery();
		//将查询返回的结果集中的对象保存到集合中，方便jsp页面显示
		List<User> us = new ArrayList();
		while(rs.next()){
			User user = new User();
			user.setUsername(rs.getString("username"));
			user.setPassword(rs.getString("password"));
			user.setUseremail(rs.getString("useremail"));
			user.setSex(rs.getString("sex"));
			user.setCountry(rs.getString("country"));
			user.setPasswordstring(rs.getString("passwordstring"));
			us.add(user);
		}
		//关闭资源
		rs.close();
		ps.close();
		conn.close();
		return us;
	}

下面是Servlet的实现代码，将pageno作为参数传入servlet执行控制层的任务

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//获取页面传来的pageno页码值
		String pageno1 = request.getParameter("pageno");
		int pageno = Integer.parseInt(pageno1);
		System.out.println("JSP中传来的参数pageno="+pageno);
		UserdaoImpl ul = new UserdaoImpl();
		List<User> us = new ArrayList();
		try {
			us = ul.queryuserlimit(pageno);
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
			try {
				//查询数据库里所有信息   以获得pagenum(总页数)和usernum(总记录条数)
				ul.queryAll();
			} catch (ClassNotFoundException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		
		//获取总页数的值
		int pagenum = ul.getPagenum();
		System.out.println("当前有"+pagenum+"页数据");
		//获取总记录条数的值
		int usernum = ul.getUsernum();
		System.out.println("当前有"+usernum+"条记录");
		for(User i : us){
			System.out.println(i.toString());
		}
		request.setAttribute("pageno", pageno);
		request.setAttribute("pagenum", pagenum);
		//传递usernum的值
		request.setAttribute("usernum", usernum);
		//传递保存User对象的集合us
		request.setAttribute("us", us);
		request.getRequestDispatcher("RootManage.jsp").forward(request, response);
	}

这个地方我们必须要获取当前数据库中的数据如果以五条一页显示时的总页码数以及数据库中的总记录条数，这个地方我处理的有点愚，数据库中的总记录数可以用select count(*) from table_name这条SQL语句来查询，而我是查询了所有数据保存在集合中，再获取它的size()，这个办法有点愚。

我们在进入到显示前端的JSP时，应该给一些关键参数初始化，例如pageno（当前页码数）和pagenum（当前总页码数），如果不给pageno初始化值的话，会报空指针异常！这个地方很关键，下面是我JSP中的java代码

<%	
  	//打开浏览器时给pageno初始化，不然会报空指针异常
  	UserdaoImpl ul = new UserdaoImpl();
  	if(request.getAttribute("pageno") == null){
  		request.setAttribute("pageno",1);
  	}
  	//给每条数据编序号
  	int count = 5*(Integer)request.getAttribute("pageno")-5;
  	
  	if(request.getAttribute("us") == null){
  		List<User> al = ul.queryuserlimit(1);
  		request.setAttribute("us",al);
  		int pagenum = ul.getPagenum();
  		request.setAttribute("pagenum",pagenum);
  	}
   %>

每次点击触发js事件来改变pageno的值，然后传给servlet，servlet调用持久层的方法来查询数据并转发到JSP，JSP再获取相应值发生改变。这就是我实现简单分页显示的思路。

三.文末总结

因为最近在学习java web22，所以一直在写相关的功能实现，今天写完这个分页显示的功能，突然想要在CSDN上写一篇技术类博客，一方面是因为自己一直在CSDN上免费获取各位大牛的知识，所以想为CSDN贡献点东西来回馈社区，真的很希望这篇博客能帮助到其他有需要的同学。另一方面是为了把自己这个阶段的所学所想记录下来，方便日后回看对比。

最后还是那句老话：不积跬步，无以至千里。不积小流，无以成江海。勉励自己，也勉励看到此文章的朋友。

渔溪大王

关注

35
点赞
踩
90

收藏

觉得还不错? 一键收藏
8
评论
Java Web分页显示实现思路

实现效果一.需求描述从数据库中将所有数据查询出来，分页显示在前端页面上，每页显示若干条数据，并实现"首页"，"上一页"，"下一页"，"尾页"，"跳转至指定页码"，"显示当前页码"等功能二.实现思路我的思路是将当前页码的值作为参数传给servlet，作为查询时传入持久层的参数，查询出对应页的五条数据（我的项目中规定一页显示五条），然后将查询出来的对象集合传给jsp显示
复制链接

扫一扫