虽然有很多分页的插件可以直接使用例如pagehelper等,但是在学习的过程中还是手敲的一遍原生的代码实现功能。
实现应该定义一个pageBean对象,代表的分页对象,里面有以下几个属性
private int totalCount; // 总记录数
private int totalPage; // 总页数
private int currentPage; // 当前页码
private int pageSize; // 没页显示的条数
private List<T> list; // 每页显示的数据结合
$(function () {
//alert(location.search)
var id = location.search.split("=")[1]
load(id);
})
页面加载完成后发送Ajax,发送当前页面currentPage 请求pageBean对象,第一次请求默认设置currentPage为1
function load(id,currentPage) {
$.get("RouteServlet/pageQuery",{cid:id,currentPage:currentPage},function (pb) {
Servlet代码
public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 接受参数
String currentPagestr = request.getParameter("currentPage");
String pageSizestr = request.getParameter("pageSize");
String cidstr = request.getParameter("cid");
int cid = 0;
if (cidstr != null && cidstr.length() > 0) {
cid = Integer.parseInt(cidstr);
}
int currentPage = 0;
if (currentPagestr!= null && currentPagestr.length() > 0) {
currentPage = Integer.parseInt(currentPagestr);
}else {
currentPage = 1;
}
int pageSize = 0;
if (pageSizestr!= null && pageSizestr.length() > 0) {
pageSize = Integer.parseInt(pageSizestr);
}
else {
pageSize = 5;
}
PageBean<Route> queryall = routeService.queryall(cid, currentPage, pageSize);
// 序列化返回
ObjectMapper objectMapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
objectMapper.writeValue(response.getOutputStream(),queryall);
}
前端获取到参数后,解析数据,展示在页面上
function load(id,currentPage) {
$.get("RouteServlet/pageQuery",{cid:id,currentPage:currentPage},function (pb) {
// 解析数据
// 1.分页数据条展示
$("#totalCount").html(pb.totalCount);
$("#totalPage").html(pb.totalPage);
var lis = ""
var firstPage = '<li onclick="javascript:load('+id+')"><a href="javascript:void(0)">首页</a></li>'
// 计算上一页
var before = pb.currentPage -1;
if (before <=0) {
before = 1;
}
var beforePage = '<li onclick="javascript:load('+id+','+before+')" class="threeword"><a href="#">上一页</a></li>'
lis += firstPage;
lis += beforePage;
// 定义开始位置,结束位置 一共显示10条数据
var begin;
var end;
if (pb.totalPage < 10) {
begin = 1;
end = pb.totalPage;
}
else {
begin = pb.currentPage - 5;
end = pb.currentPage + 4;
// 补齐
if (begin < 1) {
begin = 1;
end = begin + 9;
}
if (end > pb.totalPage) {
end = pb.totalPage;
begin = end - 9;
}
}
for (var i = begin; i<=end;i++){
if (currentPage==i){
var li = '<li class="curPage" onclick="load('+id+','+i+')"><a>'+i+'</a></li>'
}
else {
var li = '<li onclick="load('+id+','+i+')"><a>'+i+'</a></li>'
}
lis += li;
}
var next = pb.currentPage +1;
if (next >= pb.totalPage) {
next = pb.totalPage;
}
var lastPage = '<li onclick="javascript:load('+id+','+pb.totalPage+')" class="threeword"><a href="javascript:;">末页</a></li>'
var nextPage = '<li onclick="javascript:load('+id+','+next+')" class="threeword"><a href="javascript:;">下一页</a></li>'
lis += nextPage;
lis += lastPage;
$("#pageNum").html(lis)
var route_lis = "";
for (var i = 0;i < pb.list.length;i++) {
var route = pb.list[i];
var li = '<li>\n' +
'<div class="img"><img src="'+route.rimage+'" style="width:299px" alt=""></div>\n' +
'<div class="text1">\n' +
'<p>'+route.rname+'</p>\n' +
'<br/>\n' +
'<p>'+route.routeIntroduce+'</p>\n' +
'</div>\n' +
'<div class="price">\n' +
'<p class="price_num">\n' +
'<span>¥</span>\n' +
'<span>'+route.price+'</span>\n' +
'<span>起</span>\n' +
'</p>\n' +
'<p><a href="route_detail.html">查看详情</a></p>\n' +
'</div>\n' +
'</li>';
route_lis += li;
}
$("#route").html(route_lis);
})
}
页面效果