用Javaservlet与jsp实现简单分页

最新推荐文章于 2025-06-21 17:10:26 发布

Answer_Ball

最新推荐文章于 2025-06-21 17:10:26 发布

阅读量698

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/BIackMamba/article/details/89984259

本文介绍使用JSP和Servlet实现分页功能的步骤，包括前端页面设计和后端数据处理。前端通过按钮触发页面跳转，后端通过接收参数调用数据库获取指定页面的数据。

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

用Javaservlet与jsp实现简单分页

- 第一步
- 第二步

第一步

首先创建一个jsp页面，采用form表单提交的方式，将想传递的数值传递给后台servlet

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link href="css/page.css" rel="stylesheet" type="text/css" />
</head>
<body>
		<div class="bor_c">		
			<div class="bor_b">
				<form action="searchServlet" id="form_1">
					<input id="name1" type="hidden" name="b" value="${page}"/>
				</form>
				<table border="1" >
						<tr><th>ID</th><th>书名</th><th>作者</th><th>类别</th></tr>
					<c:forEach var="book" items="${books}">
						<tr>
							<td>${book.id}</td>
							<td>${book.name}</td>
							<td>${book.author}</td>
							<td>${book.type}</td>
						</tr>
					</c:forEach>
				</table>
			</div>
			<div class="bor_d">
				<button class="but" onclick="HomePage()">首页</button>
				<button class="but_1" >1</button>
				<button class="but_1" >2</button>
				<button class="but_1" >3</button>
				<button class="but_1" >4</button>
				<button class="but_1" >5</button>
				
				<input class="inp" type="text" placeholder="页码"/>
				<button class="but">跳转</button>
				
				<button class="but_2" onclick="nextPage()">下一页</button>
				<button class="but_2" onclick="upPage()">上一页</button>
				<button class="but" onclick="footPage()">尾页</button>
			</div>
		</div>
	
</body>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><!-- 在百度上搜索线上JQ（线上jquery地址） -->
	<script type="text/javascript" src="js/HomePage.js"></script>
</html>

点击button按钮同时向后台传递向传递的参数，这采用js隐式传递form表单的方法，当点击首页按钮时，给这个方法设置一个常量1，并分别给input框和form设置id，以便js能实现form表单提交，此时的input框和表单内的提交按钮均可省略

var HomePage = function (){
	//alert("......");
	document.getElementById('name1').value='1';
	document.getElementById("form_1").submit();
}

var footPage = function (){
	//alert("......");
	document.getElementById('name1').value='5';
	document.getElementById("form_1").submit();
}

var nextPage = function (){
	//alert("......");
	document.getElementById("form_1").submit();
}

var upPage = function (){
	//alert("......");
	//document.getElementById("form_1").submit();
	var a = form_1.name1.value;
	a = a - 2;
	document.getElementById('name1').value=a;
	document.getElementById("form_1").submit();
}

第二步

servlet接收到数值后，通过这个数值调用数据库，取出想要显示在页面上的所有值，然后在servlet中定义一个List数组接收这些值，最后在把接收到的值加一后返回给页面。

		String b = request.getParameter("b");//接收到前端收到的值，括号里的b为input中的name值
		b= new String(b.getBytes("iso-8859-1"),"utf-8");
		System.out.println(b);
		if(b != null) {
			//select * from test where id between 2 and 4 ;
			//查询数据库
			String sql = "select * from books where id='"+b+"'";
			List<Map<String,String>> show = mysqlUtil.show(sql,new String[] {"id","name","author","type"});
			List<Book> list = new ArrayList<>();
			for (Map<String, String> map : show) {
				list.add(new Book(Integer.parseInt(map.get("id")),map.get("name"),map.get("author"),map.get("type")));
			}
			request.setAttribute("books", list);//返回给jsp，books为c标签中的items的值   // 将list放置到request中
			request.setAttribute("page",(Integer.parseInt(b)+1));//将取得的b值转换成int行，再加1
				request.getRequestDispatcher("page1.jsp").forward(request, response);/将上边两个值传递给page1，
				//forward的意思是这个请求响应并没有直接进入到page1，只是在page1取值后在当前网页上显示，域名（url）没有变化
				return ;
		}