需求
- 在原有的分页查询的基础上增加条件查询
- 输入旅游标题条件进行数据库的模糊搜索
- 将匹配的搜索结果以分页的形式再展现出
分析
问题：
- 既然都是分页查询，哪能不能在分页查询的基础上进行改进？
回答：可以。
系统设计步骤
- 既然通过旅游标题进行查询，则需要将标题信息传入后台数据库
为搜索按钮添加点击事件，向服务器发送请求参数
//搜索按钮的点击事件
$("#search-button").click(function () {
var rname = $("#search_input").val();
var cid = getParameter("cid");
location.href="http://192.168.0.101/travel/route_list.html?cid="+cid+"&rname="+rname;
})
在原有的cid上面再次添加rname参数。
- servlet获取到rname后需要解决字符乱码问题
//获取搜索条件
String rname = request.getParameter("rname");
if(rname != null){
rname = new String(rname.getBytes("iso-8859-1"), "UTF-8");
}
在将rname传递到经过处理后的（添加查询添加rname）service层处理
//3.调用service查询
RouteService service = new RouteServiceImpl();
PageBean pageBean = service.pageQuery(currentPage, pageSize, cid,rname);
writeValue(pageBean,response);
- service层其余的逻辑代码没有变化，仍然是创建PageBean对象并返回，变化的是与dao层进行对接的函数
//3.查询dao层数据，将返回数据再次设置进pageBean
int totalCount = dao.finTotalCount(cid,rname); //携带rname
pageBean.setTotalCount(totalCount);
int start = (currentPage -1 ) * pageSize; //开始每页查询的索引
List<Route> list = dao.pageList(cid, start, pageSize,rname); //携带rname
pageBean.setList(list);
- dao层代码核心部分
public int finTotalCount(int cid, String rname) {
//String sql = "select count(*) from tab_route where cid=?";
//Integer integer = jdbcTemplate.queryForObject(sql, Integer.class, cid);
//自定义sql模板
String sql = "select count(*) from tab_route where 1=1";
StringBuffer sb = new StringBuffer(sql);
List params = new ArrayList(); //存储条件
if(cid > 0){ //排除非法传入cid和cid为null（首页访问搜索）的情况
sb.append(" and cid = ?");
params .add(cid);
}
if(rname != null && rname.length()>0){
sb.append(" and rname like ? ");
params .add("%"+rname+"%");
}
sql = sb.toString();
return jdbcTemplate.queryForObject(sql, Integer.class, params .toArray());
}
/**
* 查询每页显示的集合
* @param cid
* @param start
* @param pageSize
* @return
*/
@Override
public List<Route> pageList(int cid, int start, int pageSize, String rname) {
String sql = "select * from tab_route where 1=1";
StringBuffer sb = new StringBuffer(sql);
List params = new ArrayList();
if(cid != 0 ){
sb.append(" and cid=? ");
params.add(cid);
}
if(rname != null && rname.length() > 0){
sb.append(" and rname like ? ");
params.add("%"+rname+"%");
}
sb.append(" limit ?,? ");
sql = sb.toString();
params.add(start);
params.add(pageSize);
return jdbcTemplate.query(sql, new BeanPropertyRowMapper<Route>(Route.class), params.toArray());
}
这里面需要注意的是参数装载list集合时要按照pageList方法的参数顺序进行装载。
- 前台的展示部分
在原有的请求参数上添加rname参数
$(function () {
var cid = getParameter("cid");
var rname = getParameter("rname");
if(rname){
rname = window.decodeURIComponent(rname);
}
load(cid,null,rname);
});
传递到ajax的请求参数上，最后将服务器返回pb中的数据重新渲染前端界面。：
function load(cid,currentPage,rname) {
$.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {
//设置总页码也总记录数
$("#totalCount").html(pb.totalCount);
$("#totalPage").html(pb.totalPage);
var li = '<li onclick="load('+cid+','+1+',\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';
var before = pb.currentPage-1;
if(before <= 0){
before = 1;
}
li+='<li onclick="load('+cid+','+before+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
//将后台返回的pb对象展示到前台
//1.2 展示分页页码
/*
1.一共展示10个页码，能够达到前5后4的效果
2.如果前边不够5个，后边补齐10个
3.如果后边不足4个，前边补齐10个
*/
var begin,end; //定义开始和结束位置
if(pb.totalPage < 10){
//总页数不够10个
begin = 1;
end = pb.totalPage;
}else{//超过10个
begin = pb.currentPage - 5 ;
end = pb.currentPage + 4 ;
//如果前边不够5个，后面补齐10个
if(begin < 1){
begin = 1;
end = begin + 9;
}
//如果后边不足4个，前边补齐10个
if(end > pb.totalPage){
begin = end-9;
end = pb.totalPage;
}
}
for (var i = begin; i <= end; i++){
if(pb.currentPage == i){
li += '<li class="curPage" onclick="load('+cid+','+i+',\''+rname+'\')" class="threeword"><a href="javascript:void(0);">'+i+'</a></li>';
}else{
li += '<li onclick="load('+cid+','+i+',\''+rname+'\')" class="threeword"><a href="javascript:void(0);">'+i+'</a></li>';
}
}
var next = pb.currentPage +1;
var last = pb.totalPage;
if(next > last){
next = pb.totalPage;
}
li+='<li onclick="load('+cid+','+next+',\''+rname+'\')" class="threeword"><a href="javascript:void(0);">下一页</a></li>';
li+='<li onclick="load('+cid+','+last+',\''+rname+'\')" class="threeword"><a href="javascript:void(0);">末页</a></li>';
$("#pageNum").html(li);
//更新list到前台
var route_list = "";
for(var i=0; i < pb.list.length;i++){
var route = pb.list[i];
var li = '<li>\n' +
' <div class="img"><img style="width: 299px" src='+route.rimage+'></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_list += li;
}
$("#pageContent").html(route_list);
window.scrollTo(0,0); //滚动到顶部
})
}
京公网安备 11010502036488号