分页显示
目录
一、分析
1.1PageBean内的存储变量
//总记录数，
int totalCount;
//总页数
int totalPage;
//当前页码
int currentPage;
//每页显示的条数
int pageSize;
//每页战术的数据集合
List list;
totalCount，和list可通过数据库查询
totalPage需要计算获得
当前页码和每页下
1.2客户端页面
-
客户端页面发送ajax请求PageBean数据
-
携带
-
currentPage(当前页码)
-
pageSize(每页显示的条目)
-
cid(分页id)
-
二、代码编写
2.1服务器编写
2.1.1建立RouteServlet, 编写 分页查询功能
1.接受客户端传来的
- currentPage(当前页码)
- pageSize(每页显示的条目)
- cid(分页id)
String currentPageStr = request.getParameter("currentPage");
String pageSizeStr = request.getParameter("pageSize");
String cidStr
2.处理参数，并且添加默认值
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 {
//不传参，每页最大的数据为5个
pageSize = 5;
}
int cid = 0;
if(cidStr != null && cidStr.length()>0){
cid = Integer.parseInt(cidStr);
}
3.调用Service查询pageBean
RouteService routeService = new RouteServiceImpl();
PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);
4.格式化为json响应给客户端
writeValue(pb,response);
方法：
/**
* 直接将传入的对象序列化为json，并且写回客户端
* @param obj
*/
public void writeValue(Object obj,HttpServletResponse response) throws IOException {
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),obj);
}
2.1.2创建RouteService和RouteDao
1.DAO
方法一：查询总记录数
方法二：查询每页的数据集合
/**
* 查询总记录数
* @param cid
* @return
*/
@Override
public int findTotalCount(int cid) {
//编写sql
String sql = "select count(*) from tab_route where cid =?";
//执行返回int型
Integer totalCount = template.queryForObject(sql, Integer.class, cid);
return totalCount;
}
/**
* 查询每页数据
* @param cid
* @param start
* @param pageSize
* @return
*/
@Override
public List<Route> findByPage(int cid, int start, int pageSize) {
String sql = "select * from tab_route where cid =? limit ?, ?";
//执行返回List
List<Route> routeList = template.query(sql, new BeanPropertyRowMapper<Route>(Route.class), cid, start, pageSize);
return routeList;
}
2.Service
通过cid，返回不同的PageBean对象
//1.创建空pageBean
PageBean<Route> pageBean = new PageBean<Route>();
//2.设置属性
pageBean.setCurrentPage(currentPage);
pageBean.setPageSize(pageSize);
int totalCount = routeDao.findTotalCount(cid);
pageBean.setTotalCount(totalCount);
//总页数 = 总记录数/每页记录数 ， 除不开加一
int totalPage = totalCount%pageSize == 0?totalCount/pageSize:(totalCount/pageSize)+1;
pageBean.setTotalPage(totalPage);
//Route数据集合
//开始记录为 （当前页码-1）*每页记录数
int start = (currentPage - 1)*pageSize;
List<Route> routeList = routeDao.findByPage(cid, start, pageSize);
pageBean.setList(routeList);
//3.返回pageBean
return pageBean;
2.2客户端编写
-
回显服务端相应的数据
* 总页码
* 总记录数
-
分页工具条展示
-
列表数据展示
$(function () {
var search = location.search;
//alert(search);//?id=5
// 切割字符串，拿到第二个值
var cid = search.split("=")[1];
//当页码加载完成后，调用load方法，发送ajax请求加载数据
load(cid);
});
function load(cid ,currentPage){
//发送ajax请求，请求route/pageQuery,传递cid
$.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb) {
//解析pagebean数据，展示到页面上
//1.分页工具条数据展示
//1.1 展示总页码和总记录数
$("#totalPage").html(pb.totalPage);
$("#totalCount").html(pb.totalCount);
var lis = "";
var fristPage = '<li onclick="javascipt:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';
//计算上一页的页码
var beforeNum = pb.currentPage - 1;
if(beforeNum <= 0){
beforeNum = 1;
}
var beforePage = '<li onclick="javascipt:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
lis += fristPage;
lis += beforePage;
//1.2 展示分页页码
/*
1.一共展示10个页码，能够达到前5后4的效果
2.如果前边不够5个，后边补齐10个
3.如果后边不足4个，前边补齐10个
*/
// 定义开始位置begin,结束位置 end
var begin; // 开始位置
var end ; // 结束位置
//1.要显示10个页码
if(pb.totalPage < 10){
//总页码不够10页
begin = 1;
end = pb.totalPage;
}else{
//总页码超过10页
begin = pb.currentPage - 5 ;
end = pb.currentPage + 4 ;
//2.如果前边不够5个，后边补齐10个
if(begin < 1){
begin = 1;
end = begin + 9;
}
//3.如果后边不足4个，前边补齐10个
if(end > pb.totalPage){
end = pb.totalPage;
begin = end - 9 ;
}
}
for (var i = begin; i <= end ; i++) {
var li;
//判断当前页码是否等于i
if(pb.currentPage == i){
li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}else{
//创建页码的li
li = '<li onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}
//拼接字符串
lis += li;
}
var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';
lis += nextPage;
lis += lastPage;
//将lis内容设置到 ul
$("#pageNum").html(lis);
//2.列表数据展示
var route_lis = "";
for (var i = 0; i < pb.list.length; i++) {
//获取{rid:1,rname:"xxx"}
var route = pb.list[i];
var li = '<li>\n' +
' <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></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);
//定位到页面顶部
window.scrollTo(0,0);
});
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/115202.html原文链接：https://javaforall.net
