Servlet+Html5+ajax 实现简单分页解析

不点 阅读:218 2021-03-31 22:56:49 评论:0
Servlet ------dao层
package com.vixuan.dao; 
 
import java.sql.Connection; 
import java.sql.ResultSet; 
import java.sql.SQLException; 
import java.sql.Statement; 
import java.util.ArrayList; 
 
import com.vixuan.database.MySQLUtil; 
import com.vixuan.model.LocationInfo; 
 
public class LocationInfoDao { 
	private static Connection conn; 
	private static ResultSet resultset; 
	private static Statement statement; 
	private static int pagesize = 5; // 分页大小 
 
	// 静态模块 
	static { 
		conn = MySQLUtil.getConn(); 
	} 
 
	// 公共静态方法 
	public static ResultSet ExecuteQuery(String sql) { 
		try { 
			statement = conn.createStatement(); 
			resultset = statement.executeQuery(sql); 
		} catch (SQLException e) { 
			e.printStackTrace(); 
		} 
 
		return resultset; 
	} 
 
	// 分页逻辑-----参数:当前页码 
	public static ArrayList<LocationInfo> getLocationInfoList(int currentpageno) { 
		ArrayList<LocationInfo> LocationInfoList = new ArrayList<LocationInfo>(); 
		int BeginRecord; 
		 
			BeginRecord= (currentpageno - 1) * pagesize; // 开始位置 
		 
		 
	 
		resultset = ExecuteQuery("select * from t_locationinfo limit " 
				+ BeginRecord + "," + pagesize); 
		try { 
			while (resultset.next()) { 
				LocationInfo locationinfo = new LocationInfo(); 
				locationinfo.setAddress(resultset.getString("address")); 
				locationinfo.setLat(resultset.getString("lat")); 
				locationinfo.setLng(resultset.getString("lng")); 
				locationinfo.settId(resultset.getInt("t_id")); 
				locationinfo.setUmobile(resultset.getString("umobile")); 
				locationinfo.setUpdateTime(resultset.getString("update_time")); 
				LocationInfoList.add(locationinfo); 
			} 
		} catch (SQLException e) { 
			// TODO Auto-generated catch block 
			e.printStackTrace(); 
		} 
		return LocationInfoList; 
	} 
 
	// 分页统计 
	public static int getPageCount() { 
		int total = 0; // 总记录数 
		int PageCount = 0; // 页码总数 
		resultset = ExecuteQuery("select count(*) from t_locationinfo"); 
		try { 
			if (resultset.next()) { 
				total = resultset.getInt(1); 
				PageCount = (total - 1) / pagesize + 1; 
			} 
		} catch (SQLException e) { 
			e.printStackTrace(); 
		} 
		return PageCount; 
	} 
	 
	public static int geTotalPage() { 
		int total = 0; // 总记录数		 
		resultset = ExecuteQuery("select count(*) from t_locationinfo"); 
		try { 
			if (resultset.next()) { 
				total = resultset.getInt(1);				 
			} 
		} catch (SQLException e) { 
			e.printStackTrace(); 
		} 
		return total; 
	} 
 
} 


Servlet   -----service服务层

package com.vixuan.service; 
 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.ArrayList; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
import net.sf.json.JSONArray; 
import net.sf.json.JSONObject; 
 
import com.vixuan.dao.LocationInfoDao; 
import com.vixuan.model.LocationInfo; 
 
public class LocationServer extends HttpServlet { 
 
	/** 
	 * 地理位置信息分页查询:Servlet 
	 */ 
	private static final long serialVersionUID = 1L; 
 
	@Override 
	public void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException { 
		// TODO Auto-generated method stub 
		//请求参数:当前页面 
		Integer pageNo=Integer.parseInt(request.getParameter("pageno")); 
		//返回相关数据信息 
		ArrayList<LocationInfo> list=LocationInfoDao.getLocationInfoList(pageNo); 
		//总页面数 
		Integer totalpage=LocationInfoDao.getPageCount(); 
		//数据总记录数 
		Integer total=LocationInfoDao.geTotalPage(); 
		 
		StringBuilder builder=new StringBuilder(); 
		builder.append("["); 
		for(int i=0;i<list.size();i++){ 
			StringBuilder content=new StringBuilder(); 
			String address=list.get(i).getAddress(); 
			content.append("{ \"address\":\"").append(list.get(i).getAddress()).append("\""); 
			String lat=list.get(i).getLat(); 
			content.append(",\"lat\":").append(list.get(i).getLat()).append(""); 
			content.append(",\"lng\":").append(list.get(i).getLng()).append(""); 
			content.append(",\"mobile\":\"").append(list.get(i).getUmobile()).append("\""); 
			content.append(",\"no\":").append(list.get(i).gettId()).append("}"); 
			if(i<list.size()-1){ 
				content.append(","); 
			} 
			builder.append(content.toString()); 
			 
		} 
		builder.append("]"); 
		 
		StringBuilder json=new StringBuilder(); 
		json.append("{\"total\":").append(totalpage).append(""); 
		json.append(",\"totalPage\":").append(totalpage).append(""); 
		json.append(",\"page\":").append(pageNo).append(""); 
		json.append(",\"pageSize\":").append("5").append(""); 
		json.append(",\"list\":").append(builder.toString()).append("}"); 
		response.setCharacterEncoding("utf-8"); 
		response.setContentType("text/json"); 
		 PrintWriter out = response.getWriter();    
		 out.print(json.toString());  
		 System.out.println(json.toString()); 
		 out.flush(); 
		 out.close();	 
		 
		 
	} 
 
	@Override 
	public void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException { 
		// TODO Auto-generated method stub 
		this.doGet(request, response); 
	} 
	 
 
} 


Html5  相关页面和ajax函数

<!DOCTYPE html> 
<html lang="zh-cn"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title></title> 
<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
 
 
</head> 
<body> 
	<div class="container"> 
		<div class="row"> 
			<div class="col-md-1"></div> 
			<div class="col-md-4"></div> 
			<div class="col-md-6"> 
				<div class="row"> 
					<table class="table table-bordered table-hover table-condensed"> 
						<thead> 
							<tr> 
								<th>员工编号</th> 
								<th>员工姓名</th> 
								<th>经度</th> 
								<th>纬度</th> 
								<th>地理位置</th> 
								<th>操作</th> 
							</tr> 
						</thead> 
						<tbody id="content"> 
							<tr> 
								<td>01</td> 
								<td>张三</td> 
								<td>112.35</td> 
								<td>39.85</td> 
								<td>中国北京</td> 
								<td>查看</td> 
							</tr> 
							<tr> 
								<td>02</td> 
								<td>李四</td> 
								<td>112.12</td> 
								<td>32.23</td> 
								<td>中国,武汉</td> 
								<td>查看</td> 
							</tr> 
							<tr> 
								<td>01</td> 
								<td>王五</td> 
								<td>110.89</td> 
								<td>31.67</td> 
								<td>中国,成都</td> 
								<td>查看</td> 
							</tr> 
						</tbody> 
					</table> 
				</div> 
				<div class="row"> 
					<div class="col-md-5"></div> 
					<div class="col-md-7" id="pageCount"></div> 
				</div> 
			</div> 
			<div class="col-md-1"></div> 
		</div> 
	</div> 
 
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
	<script src="js/jquery-1.9.1.min.js"></script> 
	<!-- Include all compiled plugins (below), or include individual files as needed --> 
	<script src="js/bootstrap.min.js"></script> 
	<script type="text/javascript"> 
		var curPage = 1; //当前页码   
		var total, pageSize, totalPage; 
		$(document).ready(function() { 
		 
			getData(1); 
 
		}); 
		//获取分页条   
		function getPageBar() { 
			//页码大于最大页数   
			if (curPage > totalPage) 
				curPage = totalPage; 
			//页码小于1   
			if (curPage < 1) 
				curPage = 1; 
			pageStr = "<span>共" + total + "条</span><span>" + curPage + "/" 
					+ totalPage + "</span>"; 
 
			//如果是第一页   
			if (curPage == 1) { 
				pageStr += "<span>首页</span><span>上一页</span>"; 
			} else { 
				pageStr += "<span><a href='javascript:getData(1)' rel='1'>首页</a></span><span><a href='javascript:getData("+(curPage - 1)+")' rel='" 
						+ (curPage - 1) + "'>上一页</a></span>"; 
			} 
 
			//如果是最后页   
			if (curPage >= totalPage) { 
				pageStr += "<span>下一页</span><span>尾页</span>"; 
			} else { 
				pageStr += "<span><a href='javascript:getData("+((curPage) + 1)+")' rel='" 
						+ (parseInt(curPage) + 1) 
						+ "'>下一页</a></span><span><a href='javascript:getData("+totalPage+")' rel='" 
						+ totalPage + "'>尾页</a></span>"; 
			} 
 
			$("#pageCount").html(pageStr); 
		} 
 
		function getData(page) { 
		   
			$.ajax({ 
				type : 'POST', 
				url : 'http://localhost:8080/LocationManager/location', 
				data : { 
					'pageno' : page 
				}, 
				dataType : 'json', 
				success : function(json) { 
					$("#content").empty(); 
					total = json.total; //总记录数   
					pageSize = json.pageSize; //每页显示条数   
					curPage = json.page; //当前页   
					totalPage = json.totalPage; //总页数   
 
					var list = json.list;//返回内容 
					for(var i=0;i<list.length;i++){ 
					 var body="<tr>"; 
				    body=body+"<td>"+list[i].no+"</td>"; 
				    body=body+"<td>"+"01"+"</td>"; 
				    body=body+"<td>"+list[i].lat+"</td>"; 
				    body=body+"<td>"+list[i].lng+"</td>"; 
				    body=body+"<td>"+list[i].address+"</td>"; 
				    body=body+"<td>"+"查看"+"</td>"; 
				    body=body+"</tr>" 
				     $("#content").append(body); 
					} 
				  
 
				}, 
				complete : function() { //生成分页条   
					getPageBar(); 
				}, 
				error : function() { 
					alert("数据加载失败"); 
				} 
			}); 
		} 
	</script> 
</body> 
</html>


结果展示:

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们