分页查询的简单实现
分页查询无非有两种实现方式:
1. 将数据库中全部数据读取出来, 在分段获取
2. 直接读取需要显示的数据条数
使用第一种方法需要专门的缓存服务器, 第二种方法适用在小流量使用的情况,这里简单的使用第二种方法实现。
流程:
1. 获取总记录数
2. 前端计算分页
3. 传递第几页,对应查询
4. 返回封装好的json
实例项目框架:
- Hibernate
- SpringMVC
- Jq
Hibernate 分页查询
Hibernate实现分页查询是很简单的。
public static ArrayList<Product> queryAllInfo(int currentPage, int limitPage) {
String hql = "from Product";
session = HibernateSessionFactory.getSession();
Query q = session.createQuery(hql);
q.setFirstResult((currentPage-1)*limitPage);
q.setMaxResults(limitPage);
ArrayList<Product> l = (ArrayList<Product>) q.list();
return l;
}
SpringMVC
SpringMVC的强大就不多说了,这里直接用注解了。
@RequestMapping("getProductCount")
public void getProductCount(HttpServletResponse response, HttpServletRequest request)throws IOException {
// 总记录数
int count = Math.toIntExact(ProductDAO.ProductCount());
// 通过 PrintWrite方法返回数据
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(count);
return;
}
// 使用ResponseBody注解 设置RequestMapping的produces值,就可以直接返回json
@RequestMapping(value = "queryInfo", produces = "application/json;charset=UTF-8")
@ResponseBody
public String queryInfo(String currentPage, String limitPage) {
ArrayList<Product> list = ProductDAO.queryAllInfo(Integer.parseInt(currentPage), Integer.parseInt(limitPage));
if (list.size() > 0) {
// 封装为json字符串 建议可以使用Gson 简单无比
String str = GsonUtil.listPtoJson(list);
return str;
}
return null;
}
前端使用jq
使用jq的ajax获取json数据,使用BootStrap让样式好看点
<html>
<head>
<meta charset="utf-8">
<title>Blank Page</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div>
<div class="row">
<%--table 表格的div--%>
<div class="table-responsive">
<table id="allproduct_tb" class="table table-hover tablesorter">
<thead>
<tr>
<th>产品名称 <i class="fa fa-sort"></i></th>
<th>产品价格 <i class="fa fa-sort"></i></th>
<th>供应商 <i class="fa fa-sort"></i></th>
<th>联系人电话 <i class="fa fa-sort"></i></th>
<th> 选中</th>
</tr>
</thead>
</table>
</div>
<%--/table--%>
<%-- pagination 选页的div --%>
<div>
<%--使用Bottstrap的 分页组件--%>
<ul class="pagination">
<li><a href="#">«</a></li>
</ul>
</div>
<%-- /pagination--%>
</div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script>
var count
var currentPage = 1
var limitPage = 4
var pageCount
// 注意要先全局设置同步 避免还没获取数据就计算页数
$.ajaxSetup({
async: false
});
$(document).ready(function () {
// 先在页面加载完成后自动获取总页数
$.get("mvc/getProductCount.do", function (data, status) {
// 注意要把值转为数字
count = parseInt(data)
})
// 计算一共有多少页
if (count <= limitPage) {
pageCount = 1
} else if ((count % limitPage) == 0) {
pageCount = count / limitPage
} else {
pageCount = (count / limitPage) + 1
}
// 根据页数来动态显示
for (var i = 0; i < pageCount; i++) {
var li = " <li><a href=\"javascript:void(0)\" onclick=\"getProducInfo(" + (i + 1) + ")\">" + (i + 1) + "</a></li>"
$(".pagination").append(li)
}
$(".pagination").append("<li><a >»</a></li>")
// 显示第一页的数据 从0行开始 显示多少行记录
// 获取json
var urlstr = "mvc/queryInfo.do?currentPage=" + currentPage + "&limitPage=" + limitPage
$.getJSON(urlstr, function (json) {
$("#allproduct_tb").html('<thead> <tr> <th>产品名称 <i class="fa fa-sort"></i></th><th>产品价格 <i class="fa fa-sort"></i></th> <th>供应商 <i class="fa fa-sort"></i></th> <th>联系人电话 <i class="fa fa-sort"></i></th> </tr> </thead>');
$.each(json, function (index, item) {
//循环获取数据
var price = json[index].pPrice;
var id = json[index].id
var name = json[index].pName;
var supplier = json[index].pSupplier;
var phone = json[index].pPhone;
var tbBody = "<tr><td><a href=\"javascript:void(0)\" onclick=\"getProducInfo(" + id + ")\">" + name + "</a></td><td>" + price + "</td><td>" + supplier + "</td><td>" + phone + "</td><td><input type=checkbox /></td></tr>"
$("#allproduct_tb").append(tbBody)
})
})
})
function getProducInfo(currentPage) {
var urlstr = "mvc/queryInfo.do?currentPage=" + currentPage + "&limitPage=" + limitPage
$.getJSON(urlstr, function (json) {
$("#allproduct_tb").html('加载中...');
$("#allproduct_tb").html('<thead> <tr> <th>产品名称 <i class="fa fa-sort"></i></th><th>产品价格 <i class="fa fa-sort"></i></th> <th>供应商 <i class="fa fa-sort"></i></th> <th>联系人电话 <i class="fa fa-sort"></i></th> </tr> </thead>');
$.each(json, function (index, item) {
//循环获取数据
var price = json[index].pPrice;
var id = json[index].id
var name = json[index].pName;
var supplier = json[index].pSupplier;
var phone = json[index].pPhone;
var tbBody = "<tr><td><a href=\"javascript:void(0)\" onclick=\"getProducInfo(" + id + ")\">" + name + "</a></td><td>" + price + "</td><td>" + supplier + "</td><td>" + phone + "</td><td><input type=checkbox /></td></tr>"
$("#allproduct_tb").append(tbBody)
})
})
}
</script>
</body>
</html>
总结
- 使用jq的ajax比较灵活简单
- bootstrap的样式简单够用了
- 没有缓存,效率太低了