Servlet+AJAX+jsp 实现分页查询两个div模块的独立局部刷新

成功界面如下：

第一个水量记录报表

第二个是雨量记录报表

当点击水量记录报表到第三页

当点击雨量记录报表到第二页相互不影响

PageUtil.java

package cn.com.jdbc;

public class PageUtil {
	private Integer currentPage;// 当前页
	private Integer prePage;// 上一页
	private Integer nextPage;// 下一页
	private Integer lastPage;// 尾页
	private Integer pageSize;// 每页显示的条数
	private Integer counter;// 总数据

	public  PageUtil(String currentPage, Integer pageSize, Integer counter) {
		if (currentPage == null||"".equals(currentPage)) {
			// 如果当前页的页面是空值的话，当前页赋值为1
			currentPage = "1";
		}
		// 把当前页数传递过去
		this.currentPage = Integer.parseInt(currentPage);
		// 求总页数
		this.lastPage = counter / pageSize;
		// 如果总条数不能整除每页显示的条数的时候，就+1；例如93/10=9;93%10=3;还有三条数据要做一页，总共10页；
		if (counter % pageSize != 0) {

			this.lastPage = this.lastPage + 1;
		}

		// 把上一页传递过去
		this.prePage = (this.currentPage == 1) ? this.currentPage
				: this.currentPage - 1;
		// 把下一页传递过去
		this.nextPage = (this.currentPage == this.lastPage) ? this.currentPage
				: this.currentPage + 1;
	}

	public Integer getCurrentPage() {
		return currentPage;
	}

	public Integer getPrePage() {
		return prePage;
	}

	public void setPrePage(Integer prePage) {
		this.prePage = prePage;
	}

	public Integer getNextPage() {
		return nextPage;
	}

	public void setNextPage(Integer nextPage) {
		this.nextPage = nextPage;
	}

	public Integer getLastPage() {
		return lastPage;
	}

	public void setLastPage(Integer lastPage) {
		this.lastPage = lastPage;
	}

	public Integer getPageSize() {
		return pageSize;
	}

	public void setPageSize(Integer pageSize) {
		this.pageSize = pageSize;
	}

	public Integer getCounter() {
		return counter;
	}

	public void setCounter(Integer counter) {
		this.counter = counter;
	}

	public void setCurrentPage(Integer currentPage) {
		this.currentPage = currentPage;
	}



}

水量记录部分代码

PageService.java

package cn.com.condition;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import cn.com.jdbc.JdbcUtils_DBCP;
import cn.com.pack.Water;

public class PageService {
	// 1.写个查询分页的方法
	public static List<Water> getPageList(Integer i, Integer j) {
		// 1.1连接数据库
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<Water> list = new ArrayList<Water>();
		Water w = null;
		try {
			conn = JdbcUtils_DBCP.getConnection();
			ps = conn.prepareStatement("select * from water limit ?,?");
			ps.setInt(1, i);
			ps.setInt(2, j);
			rs = ps.executeQuery();
			while (rs.next()) {
				w = new Water(rs.getString(1), rs.getString(2), rs.getString(3));
				list.add(w);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			JdbcUtils_DBCP.release(conn, ps, rs);
		}

		return list;
	}

	// 2写个数据库总量查询方法
	public static Integer getCounter() {
		// 1.1连接数据库
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		Integer i = 0;
		try {
			conn = JdbcUtils_DBCP.getConnection();
			ps = conn.prepareStatement("select * from water");
			rs = ps.executeQuery();
			while (rs.next()) {

				i++;
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			JdbcUtils_DBCP.release(conn, ps, rs);
		}

		return i;

	}

}

Water_Page.java

package cn.com.servlet;
import java.io.IOException;
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.alibaba.fastjson.JSON;
import cn.com.condition.PageService;
import cn.com.jdbc.PageUtil;
import cn.com.pack.Water;
public class Water_Page extends HttpServlet {
	private PageUtil pageUtils = null;
	final Integer PAGESIZE = 10;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String method = request.getParameter("method");
		if ("getPage".equals(method)) {
			getPage(request, response);
		} else if ("changePage".equals(method)) {
			changePage(request, response);
		} else {
			getGooList(request, response);
		}

	}

	private void getPage(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		response.setContentType("application/json;charset=UTF-8");
		String string = JSON.toJSONString(pageUtils);
		response.getWriter().write(string);
	}

	private void changePage(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		response.setContentType("application/json;charset=UTF-8");
		List<Water> w = null;
		List<Object> list = new ArrayList<>();
		String page = request.getParameter("page");
		pageUtils = new PageUtil(page, PAGESIZE, PageService.getCounter());
		w = PageService.getPageList(
				(pageUtils.getCurrentPage() - 1) * PAGESIZE, PAGESIZE);
		list.add(pageUtils);
		list.add(w);
		String string = JSON.toJSONString(list);
		response.getWriter().write(string);
	}

	private void getGooList(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		response.setContentType("application/json;charset=UTF-8");
		List<Water> w = null;
		String currentPage = null;
		pageUtils = new PageUtil(currentPage, PAGESIZE,
				PageService.getCounter());
		w = PageService.getPageList(
				(pageUtils.getCurrentPage() - 1) * PAGESIZE, PAGESIZE);
		String string = JSON.toJSONString(w);
		response.getWriter().write(string);
	}

}

print.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<title>安全智能预测-报表打印</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
.button{
width:3%;
height: 3%;
}
</style>
<body>
	<jsp:include page="common.jsp"></jsp:include>
	<div class="right">
		<div class="container">
			<div class="col-md-5">
				<!-- 水中间部分 -->
				<table class="table table-bordered" id="table1">
					<caption>水量记录报表</caption>
					<thead>
						<tr>
							<th>日期</th>
							<th>水位高度</th>
							<th>当日水流量</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td colspan="3">
								<button onclick="page(this)" class="frstn">首页</button>
								<button onclick="page(this)" class="prvtn">上一页</button> <span
								id="page"></span>
								<button onclick="page(this)" class="nxttn">下一页</button>
								<button onclick="page(this)" class="lsttn">尾页</button>
							</td>
						</tr>
					</tbody>
				</table>

			</div>
			<div class="col-md-4">
				<!-- 雨中间部分 -->
				<table class="table table-bordered" id="table2">
					<caption>雨量记录报表</caption>
					<thead>
						<tr>
							<th>日期</th>
							<th>降雨量</th>
						</tr>
					</thead>
					<tbody>
					<tr>
							<td colspan="2">
								<button onclick="pages(this)" class="prvt">上一页</button> <span
								id="pages"></span>
								<button onclick="pages(this)" class="nxtt">下一页</button>
							</td>
						</tr>	
					</tbody>
				</table>
		</div>
	</div>


	</div>
	</div>
	</div>
	<!-- 报表打印 -->
	<jsp:include page="foot.jsp"></jsp:include>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript" src="js/ajaxs.js"></script>
</body>
</html>

ajax.js

$(function() {
	$.ajax({
		url : "/BootStrap/Water_Page",
		data : "",
		dataType : "json",
		type : "post",
		success : function(obj) {
			for (var i = 0; i < obj.length; i++) {
				$("table tr:first").after(
						"<tr id='list'><td>" + obj[i].date + "</td><td>"
								+ obj[i].height + "</td><td>" + obj[i].ll
								+ "</td></tr>")
			}
		}

	});
})
$(function() {
	$.ajax({
		url : "/BootStrap/Water_Page?method=getPage",
		data : "",
		dataType : "json",
		type : "post",
		success : function(obj) {
			$("#page").text(obj.currentPage + "/" + obj.lastPage);
			$(".frstn")[0].id = 1;
			$(".prvtn")[0].id = obj.prePage;
			$(".nxttn")[0].id = obj.nextPage;
			$(".lsttn")[0].id = obj.lastPage;
		}
	});
})
function page(btn) {
	var page = btn.id;
	$.ajax({
		url : "/BootStrap/Water_Page?method=changePage&page=" + page,
		type : "post",
		data : {},
		dataType : "json",
		success : function(obj) {
			$("#page").text(obj[0].currentPage + "/" + obj[0].lastPage);
			$(".frstn")[0].id = 1;
			$(".prvtn")[0].id = obj[0].prePage;
			$(".nxttn")[0].id = obj[0].nextPage;
			$(".lsttn")[0].id = obj[0].lastPage;
			for(var i = 0; i <10; i++) {
				$("#list").remove();
			}
			for (var i = 0; i < obj[1].length; i++) {
				$("table tr:first").after(
						"<tr id='list'><td>" + obj[1][i].date + "</td><td>"
								+ obj[1][i].height + "</td><td>" + obj[1][i].ll
								+ "</td></tr>")
			}
		}
	});
}

雨量记录部分代码

RainService.java

package cn.com.condition;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import cn.com.jdbc.JdbcUtils_DBCP;
import cn.com.pack.Rain;
public class RainService {
	// 1.写个查询分页的方法
	public static List<Rain> getPageList(Integer i, Integer j) {
		// 1.1连接数据库
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<Rain> list = new ArrayList<Rain>();
		Rain w = null;
		try {
			conn = JdbcUtils_DBCP.getConnection();
			ps = conn.prepareStatement("select * from rain limit ?,?");
			ps.setInt(1, i);
			ps.setInt(2, j);
			rs = ps.executeQuery();
			while (rs.next()) {
				w = new Rain(rs.getString(1), rs.getString(2));
				list.add(w);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			JdbcUtils_DBCP.release(conn, ps, rs);
		}

		return list;
	}

	// 2写个数据库总量查询方法
	public static Integer getCounter() {
		// 1.1连接数据库
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		Integer i = 0;
		try {
			conn = JdbcUtils_DBCP.getConnection();
			ps = conn.prepareStatement("select * from rain");
			rs = ps.executeQuery();
			while (rs.next()) {

				i++;
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			JdbcUtils_DBCP.release(conn, ps, rs);
		}

		return i;

	}

}

Rain_Page.java

package cn.com.servlet;
import java.io.IOException;
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 cn.com.condition.RainService;
import cn.com.jdbc.PageUtil;
import cn.com.pack.Rain;
import com.alibaba.fastjson.JSON;
public class Rain_Page extends HttpServlet {
	private PageUtil pageUtils = null;
	final Integer PAGESIZE = 10;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String method = request.getParameter("method");
		if ("getPage".equals(method)) {
			getPage(request, response);
		} else if ("changePage".equals(method)) {
			changePage(request, response);
		} else {
			getGooList(request, response);
		}

	}

	private void getPage(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		response.setContentType("application/json;charset=UTF-8");
		String string = JSON.toJSONString(pageUtils);
		response.getWriter().write(string);
	}

	private void changePage(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		response.setContentType("application/json;charset=UTF-8");
		List<Rain> w = null;
		List<Object> list = new ArrayList<>();
		String page = request.getParameter("page");
		pageUtils = new PageUtil(page, PAGESIZE, RainService.getCounter());
		w = RainService.getPageList(
				(pageUtils.getCurrentPage() - 1) * PAGESIZE, PAGESIZE);
		list.add(pageUtils);
		list.add(w);
		String string = JSON.toJSONString(list);
		response.getWriter().write(string);
	}

	private void getGooList(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		response.setContentType("application/json;charset=UTF-8");
		List<Rain> w = null;
		String currentPage = null;
		pageUtils = new PageUtil(currentPage, PAGESIZE,
				RainService.getCounter());
		w = RainService.getPageList(
				(pageUtils.getCurrentPage() - 1) * PAGESIZE, PAGESIZE);
		String string = JSON.toJSONString(w);
		response.getWriter().write(string);
	}

}

ajaxs.js

$(function() {
	$.ajax({
		url : "/BootStrap/Rain_Page",
		data : "",
		dataType : "json",
		type : "post",
		success : function(obj) {
			for (var i = 0; i < obj.length; i++) {
				$("#table2  tr:eq(0)").after(
						"<tr id='lists'><td>" + obj[i].date + "</td><td>"
								+ obj[i].yl
								+ "</td></tr>")
			}
		}

	});
})
$(function() {
	$.ajax({
		url : "/BootStrap/Rain_Page?method=getPage",
		data : "",
		dataType : "json",
		type : "post",
		success : function(obj) {
			$("#pages").text(obj.currentPage + "/" + obj.lastPage);
			$(".prvt")[0].id = obj.prePage;
			$(".nxtt")[0].id = obj.nextPage;
		}
	});
})
function pages(btn) {
	var page = btn.id;
	$.ajax({
		url : "/BootStrap/Rain_Page?method=changePage&page=" + page,
		type : "post",
		data : {},
		dataType : "json",
		success : function(obj) {
			$("#pages").text(obj[0].currentPage + "/" + obj[0].lastPage);
			$(".prvt")[0].id = obj[0].prePage;
			$(".nxtt")[0].id = obj[0].nextPage;
			for(var i = 0; i <10; i++) {
				$("#lists").remove();
			}
			for (var i = 0; i < obj[1].length; i++) {
				$("#table2 tr:eq(0)").after(
						"<tr id='lists'><td>" + obj[1][i].date + "</td><td>"
								 + obj[1][i].yl
								+ "</td></tr>")
			}
		}
	});
}

所需的JSON jar包都这里：https://download.csdn.net/download/qq_37591637/10812632

Servlet+AJAX+jsp 实现分页查询 两个div模块的独立局部刷新

猜你喜欢

Servlet+AJAX+jsp 实现分页查询两个div模块的独立局部刷新