|
目录
1.前端
?后端
service
查看架构图与总览?
?
很通用可以复制进其他项目
总体来说分页条借用分页查询的功能，因为有一部分功能重合，而且两个功能都不是经常更改的功能，所以没有解耦的必要，具体可以查看其他文章的dao层代码，复制部分即可，主要是前端
1.前端
<script>
$(function () {
/*let search = location.search;
let cid = search.split("=")[1];*/
var cid = getParameter("cid");
var rname = getParameter("rname");
if (rname) {
var rname = window.decodeURIComponent(rname);
}
/*alert(cid)
alert(rname)*/
load(cid,null,rname)
})
function load(cid,currentPage,rname) {
$.get("routServlet/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {
$("#totalPage").html(pb.totalPage);
$("#totalCount").html(pb.totalCount);
/*<!--<li><a href="">首页</a></li>
<li class="threeword"><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="threeword"><a href="javascript:;">下一页</a></li>
<li class="threeword"><a href="javascript:;">末页</a></li>-->*/
var lis ="";
var firstPage = '<li onclick="load('+cid+',1,\''+rname+'\')"><a >首页</a></li>';
var beforePageNum = pb.currentPage - 1;
if (beforePageNum <= 0) {
beforePageNum = 1;
}
var beforePage ='<li class="threeword" onclick="load('+cid+','+beforePageNum+',\''+rname+'\')"><a >上一页</a></li>';
lis += firstPage;
lis += beforePage;
/* for (let i = 1; i <= pb.totalPage; i++) {
var li;
if (pb.currentPage == i) {
li = '<li class="curPage" onclick="load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}else {
li = '<li onclick="load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}
lis += li;
}*/
/*
* 这是分页条的重点
* */
//给一个开始值
var begin;
//给一个结束值
var end;
//如果查出来的总页数小于10
if (pb.totalPage < 10) {
//开始值为1
begin = 1;
//结束值为最大的页码
end = pb.totalPage;
//如果大于10
}else {
//开始页面为当前页码-5
begin = pb.currentPage - 5;
//结束页码为当前页码+4 一起显示10条
end = pb.currentPage + 4;
//维护健壮性
if (begin <= 0) {
begin = 1;
end = begin + 9;
}
//指针越界时的处理方法
if (end > pb.totalPage) {
end = pb.totalPage;
begin = end - 9;
}
}
//遍历 从开始值到结束值，并包含结束值
//以下都是拼字符串
for (let i = begin; i <= end; i++) {
var li;
if (pb.currentPage == i) {
li = '<li class="curPage" onclick="load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
}else {
li = '<li onclick="load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
}
lis += li;
}
var lastPage = '<li class="threeword" onclick="load('+cid+','+pb.totalPage+',\''+rname+'\')"><a >末页</a></li>';
var nextPageNum = pb.currentPage + 1;
if (nextPageNum >= pb.totalPage ) {
nextPageNum = pb.totalPage;
}
var nextPage ='<li class="threeword" onclick="load('+cid+','+nextPageNum+',\''+rname+'\')"><a>下一页</a></li>';
lis += nextPage;
lis += lastPage;
//显示
$("#pageNum").html(lis)
/* <li>
<div class="img"><img src="images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>299</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>*/
var route_lis ="";
for (let 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;height: 169px"></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?rid='+route.rid+'">查看详情</a></p>\n' +
' </div>\n' +
' </li>'
route_lis += li;
}
$("#roust").html(route_lis)
window.scrollTo(0,175)
})
}
</script>
?后端
public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//列表id
String cidStr = request.getParameter("cid");
String pageSizeStr = request.getParameter("pageSize");
String currentPageStr = request.getParameter("currentPage");
String rname = request.getParameter("rname");
//设置编码格式避免乱码
if (rname != null && rname.length() > 0 && !"null".equals(rname)) {
rname = new String(rname.getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8);
}
int cid = 0;
if (cidStr != null && cidStr.length() > 0 && !"null".equals(cidStr)) {
cid = Integer.parseInt(cidStr);
}
int pageSize = 0;//每页显示条数，如果前端的传参为空，则指定为5条
if (pageSizeStr != null && pageSizeStr.length() > 0) {
pageSize = Integer.parseInt(pageSizeStr);
}else {
pageSize = 4;
}
int currentPage = 0;//当前页码，如果传参为空，则指定为第一页
if(currentPageStr != null && currentPageStr.length() > 0) {
currentPage = Integer.parseInt(currentPageStr);
}else {
currentPage = 1;
}
PageBean<Route> pageBean = routService.pageQuery(cid, pageSize, currentPage,rname);
System.out.println(rname+"----1");
writeValue(pageBean,response);
}
service
@Override
public PageBean<Route> pageQuery(int cid, int pageSize, int currentPage, String rname) {
PageBean<Route> pageBean = new PageBean<Route>();
//查询出来的总条目数
int totalCurrent = routeDao.totalCurrent(cid,rname);
pageBean.setTotalCount(totalCurrent);
//计算总页数
int totalPage = totalCurrent % pageSize == 0 ? totalCurrent / pageSize : (totalCurrent / pageSize) + 1 ;
pageBean.setTotalPage(totalPage);
//每页显示的条数
pageBean.setPageSize(pageSize);
//当前页码
pageBean.setCurrentPage(currentPage);
//分页查询的start
int start = (currentPage * pageSize) - pageSize;
//查所有数据
List<Route> routes = routeDao.routeFindAll(cid, start, pageSize,rname);
pageBean.setList(routes);
return pageBean;
}
|