【JSP】ajax实现简单分页

最新推荐文章于 2023-12-01 14:09:21 发布

景谦Nice

最新推荐文章于 2023-12-01 14:09:21 发布

阅读量1k

点赞数 1

分类专栏： JSP 文章标签： JSP

本文链接：https://blog.csdn.net/qq_43705275/article/details/103478810

版权

JSP 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求：

在这里插入图片描述
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包、配置文件等相关操作参考ajax实现省市县三级级联

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 }">

附：最终的项目目录结构如下图

在这里插入图片描述

景谦Nice

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【JSP】ajax实现简单分页

需求：1、数据从数据库读取；2、点击上/下一页翻页，每页显示3条数据；3、已经是第一页再点击“上一页”提示“已经是第一页”，已经是最后一页再点击“下一页”提示“已经是最后一页”；4、第一个文本框接收value进行与name字段的模糊查询，第二个文本框接收value进行与address字段的模糊查询，可同时进行name与address的联合模糊查询。思路：1、浏览器直接请求index....
复制链接

扫一扫

专栏目录