[Servlet+Html5+ajax 实现简单分页]
2017-01-16 本文已影响120人
LH_0811
原文：http://blog.csdn.net/zhouzhiwengang/article/details/38639607
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](http://lib.csdn.net/base/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>
结果展示：
