Servlet+Html5+ajax 实现简单分页

ゞ浴缸里的玫瑰 2023-10-16 20:22 2阅读 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>
    
    <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>
    
    	
    	<script src="js/jquery-1.9.1.min.js"></script>
    	
    	<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>

结果展示：

![Center][]

[Center]: https://img-blog.csdn.net/20140817160004760?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center