仿百度分页(Jquery实现)
前5后4效果图:
* 前台:
<script>
$(function () {
//定义按钮的点击事件
$("#btn_search").click(function () {
loaded(1);
})
});
//异步请求获取分页bean,并展示
function loaded(currentPage) {
//获取输入框的值
var routeName = $("#route_name").val();
var minPrice = $("#min_price").val();
var maxPrice = $("#max_price").val();
//发送ajax请求
$.get("rank/rankFavorite", {currentPage:currentPage,routeName:routeName,minPrice:minPrice,maxPrice:maxPrice}, function (pb) {
//定义一个用来存放list的容器
var lis = "";
//遍历展示数据
for (var i = 0; i < pb.list.length; i++) {
var route = pb.list[i];
if (route.rankId == 1) {
var li = '<li>\n' +
' <span class="num one">' + route.rankId + '</span>\n' +
' <a href="route_detail.html?rid='+route.rid+'"><img src="' + route.rimage + '" alt=""></a>\n' +
' <h4><a href="route_detail.html?rid='+route.rid+'">' + route.rname + '</a></h4>\n' +
' <p>\n' +
' <b class="price">¥<span>' + route.price + '</span>起</b>\n' +
' <span class="shouchang">已收藏' + route.count + '次</span>\n' +
' </p>\n' +
' </li>'
} else if (route.rankId == 2) {
...省略处理逻辑...
} else {
...省略处理逻辑...
}
lis += li;
}
//将遍历后的容器添加到网页
$("#rankList").html(lis);
//分页工具条
//定义一个容器
var plis = "";
//尽可能使激活页居中
//定义开始索引
var start = currentPage - 5;
//定义结束索引
var end = currentPage + 4;
if (pb.totalPage <= 10) {
//10页以内
start = 1;
end = pb.totalPage;
} else {
//10页以上
//前面不足5页
if (start < 1) {
start = 1;
end = start + 9;
}
//后面不足4页
if (end > pb.totalPage) {
end = pb.totalPage;
start = end - 9;
}
}
//添加首页li
plis += '<li onclick="loaded(1)"><a href="javascript:void(0);">首页</a></li>';
//添加上一页li
var before = currentPage - 1;
if (before < 1) {
before = 1;
}
plis += '<li onclick="loaded('+before+')" class="threeword"><a href="javascript:void(0);">上一页</a></li>';
//遍历添加工具条中间li
for (var i = start; i <= end; i++) {
if (currentPage == i) {
//激活的
var li = '<li onclick="loaded('+i+')" class="curPage"><a href="javascript:void(0);">' + i + '</a></li>';
} else {
//未激活的
var li = '<li onclick="loaded('+i+')"><a href="javascript:void(0);">' + i + '</a></li>';
}
plis += li;
}
//添加下一页li
var last = currentPage + 1;
if (last > pb.totalPage) {
last = pb.totalPage;
}
plis += '<li onclick="loaded('+last+')" class="threeword"><a href="javascript:void(0);">下一页</a></li>';
//添加末页li
plis += '<li onclick="loaded('+pb.totalPage+')" class="threeword"><a href="javascript:void(0);">末页</a></li>';
//显示到网页
$("#page_tools").html(plis);
//滚动网页,使其到顶部
window.scrollTo(0,0)
})
}
</script>
* 部分后台
//servlet判断数据并返回json
String currentPageStr = request.getParameter("currentPage");
String pageSizeStr = request.getParameter("pageSize");
//获取参数
String routeName = request.getParameter("routeName");
String minPrice = request.getParameter("minPrice");
String maxPrice = request.getParameter("maxPrice");
//逻辑判断
if (routeName != null && routeName.length() > 0 ) {
//对routename进行编码处理(如果是tomcat7,及之前的需要处理,8以后的get则不需要处理)
routeName = new String(routeName.getBytes("ISO-8859-1"), "utf-8");
//System.out.println(rname);
}
int min = 0;
if (minPrice!=null && minPrice.length()>0 &&!"null".equalsIgnoreCase(minPrice)){
min = Integer.parseInt(minPrice);
}
int max = 999999999;
if (maxPrice!=null && maxPrice.length()>0 &&!"null".equalsIgnoreCase(maxPrice)){
max = Integer.parseInt(maxPrice);
}
//健壮性判断
int currentPage = 1;
int pageSize = 10;
if (currentPageStr != null && currentPageStr.length() > 0){
currentPage = Integer.parseInt(currentPageStr);
}
if (pageSizeStr !=null && pageSizeStr.length() >0){
pageSize = Integer.parseInt(pageSizeStr);
}
//调用service
PageBean<Route> pb = routeService.findRouteByPage(currentPage,pageSize,routeName,min,max);
writeValue(response,pb);
* service
//调用dao,并封装pageBean
public PageBean<Route> findRouteByPage(int currentPage, int pageSize,String rname,int min,int max) {
PageBean<Route> pageBean = new PageBean<>();
pageBean.setCurrentPage(currentPage);
pageBean.setPageSize(pageSize);
int totalCount = dao.findTotalCount(rname,min,max);
pageBean.setTotalCount(totalCount);
int start = (currentPage-1)* pageSize;
List<Route> rankPage = dao.findRouteDesc(start, pageSize,rname,min,max);
pageBean.setList(rankPage);
int totalPage = totalCount % pageSize ==0 ? totalCount / pageSize:(totalCount / pageSize+1);
pageBean.setTotalPage(totalPage);
return pageBean;
}
* dao的一个核心方法
public List<Route> findRouteDesc(int start, int pageSize ,String rname,int min,int max) {
String sql = "SELECT * FROM tab_route where 1 = 1 ";
StringBuilder sb = new StringBuilder(sql);
List<Object> params = new ArrayList<>();
//判断rname
if (rname != null && rname.length() > 0 && !"null".equalsIgnoreCase(rname)) {
sb.append(" and rname like ? ");
params.add("%" + rname + "%");
}
if (min >= 0){
sb.append(" and price > ? ");
params.add(min);
}
if (max >= min){
sb.append(" and price < ? ");
params.add(max);
}
sb.append(" ORDER BY COUNT DESC limit ? , ? ");
params.add(start);
params.add(pageSize);
sql = sb.toString();
return template.query(sql, new BeanPropertyRowMapper<>(Route.class),params.toArray());
}