Servlet+Html5+ajax 实现简单分页

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>

结果展示：