需求：
1、数据从数据库读取；
2、点击上/下一页翻页，每页显示3条数据；
3、已经是第一页再点击“上一页”提示“已经是第一页”，已经是最后一页再点击“下一页”提示“已经是最后一页”；
4、第一个文本框接收value进行与name字段的模糊查询，第二个文本框接收value进行与address字段的模糊查询，可同时进行name与address的联合模糊查询。
思路：
1、浏览器直接请求index.jsp页面，该页面执行page()方法，此时pageNo的值为1——>向DataServlet发送请求并将pageNo传到该Servlet——>Servlet收到请求，根据pageNo的值返回第一页数据和一共有多少页，并将这些数据通过request转发的方式转发到data.jsp页面——>data.jsp页面将第一页数据遍历出来并将总页数存到input中——>Web服务器响应结果——>浏览器执行index.jsp中$("#data").append(data);代码将结果显示index.jsp中在div内并给该jsp内pageTotal赋值，至此本次请求结束；
2、点击“上一页”按钮——>执行up()方法——>先判断当前是否为第一页，如果是则终止执行，否则pageNo减1——调用page()方法，执行过程回到第一步；
3、点击“下一页”按钮——>执行down()方法——>先判断当前是否为最后一页，如果是则终止执行，否则pageNo加1——调用page()方法，执行过程回到第一步；
4、定义两个文本框，用于接收用户输入的数据，将其按照相应的规则进行sql语句where条件的拼接
步骤：
1、数据准备：
2、拷贝DBUtil、jar包、配置文件
3、新建“index.jsp”文件：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页</title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//初始化pageNo页码为1
var pageNo=1;
//初始化pageTotal总页数为0
var pageTotal = 0;
//定义“上一页”方法绑定给“上一页”按钮
function up(){
if(pageNo==1){
alert("已经是第一页！");
return;
}
//将页码减1
pageNo --;
//调用page()方法时页码已经减1
page();
}
//定义“下一页”方法绑定给“下一页”按钮
function down(){
if(pageNo==pageTotal){
alert("已经是最后一页！");
return;
}
//将页码加1供page()使用
pageNo ++;
page();
}
//该方法实现刷新页面的效果，实现页码变动后，将对应页码的数据显示在页面中
function page(){
//将页码传递给DataServlet用来处理与该页码相关的jdbc操作
var path = "./DataServlet?pageNo="+pageNo;
//接收name与address文本框的值用于模糊查询
var name = $("[name='name']").val();
var address = $("[name='address']").val();
//如果两个文本框中传值了，就将他们的值与path进行拼接，传递给DataServlet
if(name!="" && name != undefined){
path = path + "&name=" + name;
}
if(address!="" && address != undefined){
path = path + "&address=" + address;
}
//定义一个异步
var object={
url:path,
type:"get",
//此时的data数据是data.jsp文件中的所有标签对象
success:function(data){
$("#data").html(data);
//将收到的pageTotal隐藏框的值赋值给pageTotal
pageTotal = $("#pageTotal").val();
}
}
//触发异步
$.ajax(object);
}
//在第一次加载页面时就执行page()显示第一页数据
page();
//为了避免点击下一页后搜索功能失效的bug，所以每次搜索时将页码重置为1
function search(){
pageNo=1;
page();
}
</script>
</head>
<body>
<style>
table{
border:black 1px solid;
border-collapse:collapse;
}
th,td{
border:black 1px solid;
}
</style>
<input type="text" name="name"><input type="text" name="address"><input type="button" value="搜索" onclick="search()">
<!--声明一个空的div标签用于填充data.jsp文件传过来的标签-->
<div id="data">
</div>
<input type="button" value="上一页" onclick="up()">
<input type="button" value="下一页" onclick="down()">
</body>
</html>4、新建一个UserInfo类用于将查询到的每条数据存储在一个UserInfo对象中：
package com.jpc.vo;
public class UserInfo {
private int id;
private String name;
private String mobile;
private String address;
public UserInfo(int id, String name, String mobile, String address) {
this.id = id;
this.name = name;
this.mobile = mobile;
this.address = address;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
@Override
public String toString() {
return "id=" + id + ", name=" + name + ", mobile=" + mobile + ", address=" + address;
}
}5、新建一个“DataServlet.java”文件用于接收请求和处理请求(JDBC查询操作)：
package com.jpc.fenye;
import java.io.IOException;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.jpc.dbutil.DBUtil;
import com.jpc.dbutil.IRowMapper;
import com.jpc.vo.UserInfo;
public class DataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//声明变量接收页码、name、address
int pageNo = Integer.parseInt(request.getParameter("pageNo"));
String name = request.getParameter("name");
String address = request.getParameter("address");
//声明字符串where用于进行sql语句where条件的拼接
String where = " where 1=1 ";
//每页显示3条数据
int pageSize = 3;
//定义一个实现了IRowMapper接口RowMapper内部类用于接口回调
class RowMapper implements IRowMapper {
List<UserInfo> list = new ArrayList<UserInfo>();
public void rowMapper(ResultSet resultSet) {
try {
while (resultSet.next()) {
list.add(new UserInfo(resultSet.getInt("id"), resultSet.getString("name"),
resultSet.getString("mobile"), resultSet.getString("address")));
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//拼接sql语句的where条件以进行模糊查询
if(name!=null) {
where = where + " and name like '%"+ name +"%'";
}
if(address!=null) {
where = where + " and address like '%"+ address +"%'";
}
//生成最终的sql查询语句
String sql = "select * from user_info " + where + " limit " + (pageNo - 1) * pageSize + "," + pageSize;
//创建内部类对象，用于存储接口回调时生成的存储了UserInfo对象的list集合
RowMapper rowMapper = new RowMapper();
//调用DBUtil中的select方法
DBUtil.select(sql, rowMapper);
//将rowMapper.list添加给request对象
request.setAttribute("userInfos", rowMapper.list);
//再次定义一个内部类用于接收数据条数count
class CountRowMapper implements IRowMapper {
int count;
public void rowMapper(ResultSet resultSet) {
try {
if (resultSet.next()) {
count = resultSet.getInt("count");
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
CountRowMapper countRowMapper = new CountRowMapper();
sql = "select count(id) count from user_info" + where;
DBUtil.select(sql, countRowMapper);
int count = countRowMapper.count;
int pageTotal = count % pageSize == 0 ? count / pageSize : count / pageSize + 1;
request.setAttribute("pageTotal", pageTotal);
request.getRequestDispatcher("data.jsp").forward(request, response);
}
}6、定义一个“data.jsp”用于数据的html填充：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="zzu" %>
<table>
<tr>
<th>id</th>
<th>name</th>
<th>mobile</th>
<th>address</th>
<th>编辑</th>
</tr>
<zzu:forEach var="userinfo" items="${userInfos }">
<tr>
<td>${userinfo.getId() }</td>
<td>${userinfo.getName() }</td>
<td>${userinfo.getMobile() }</td>
<td>${userinfo.getAddress() }</td>
<td><a>查看</a><a>编辑</a><a>删除</a></td>
</tr>
</zzu:forEach>
</table>
<input id="pageTotal" type="hidden" value="${pageTotal }">附：最终的项目目录结构如下图
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
