功能说明
在首页搜索框输入线路关键字,点击搜索查询数据库,并将数据分页
样例展示
功能分析
注意:搜索功能将结合到分页功能上
- 在点击搜索之后,需要携带关键词转跳转到route_list页面
- route_list页面加载完成之后获取路径携带的关键词数据,发送ajcx请求,访问后台。
- 后台在接收到数据之后,处理获取查找结果,将结果返回
- 前端在获取结果之后,将数据填充到页面展示
代码实现
前端
搜索框
<script>
function search(){
var rname = $("#rname").val();
location.href = "route_list.html?cid=0&rname="+ rname;
}
</script>
<div class="search">
<input type="text" id="rname" name="rname" class="search_input" placeholder="请输入路线名称" autocomplete="off">
<a href="javascript:search()" class="search-button">搜索</a>
</div>
<script>
$(function(){
var cid = getParameter("cid");
var rname = getParameter("rname");
load(cid,null,null,rname);
});
function load(cid,currentPage,pageSize,rname){
$.post("route/pageQuery",{
cid:cid,currentPage:currentPage,pageSize:pageSize,rname:rname},function(data){
var route_details = "";
for (var i = 0; i < data.list.length; i++) {
route_details += '<li>\n' +
' <div class="img"><img src="' + data.list[i].rimage + '" height="169px"></div>\n' +
' <div class="text1">\n' +
' <p>' + data.list[i].rname + '</p>\n' +
' <br/>\n' +
' <p>' + data.list[i].routeIntroduce + '</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>' + data.list[i].price + '</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html">查看详情</a></p>\n' +
' </div>\n' +
' </li>';
}
$("#route_details").html(route_details);
var page_count = '<i></i> 共 <span>' + data.totalPage + '</span>页<span>' + data.totalCount + '</span>条';
$("#page_count").html(page_count);
var msg = '<li style="cursor:pointer;" οnclick="load(' + cid + ',' + 1 + ','+ data.pageSize +',\''+rname+'\')" ><a href="javascript:void()">首页</a></li>';
if (data.currentPage == 1) {
msg += '<li style="cursor: not-allowed;" οnclick="load(' + cid + ',' + (data.currentPage - 1) + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a style="cursor: not-allowed;" href="javascript:void()">上一页</a></li>';
} else {
msg += '<li style="cursor:pointer;" οnclick="load(' + cid + ',' + (data.currentPage - 1) + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a href="javascript:void()">上一页</a></li>';
}
var begin = 0;
var end = 0;
if ((data.currentPage - 5) <= 0) {
begin = 1;
end = 10;
} else if ((data.currentPage + 4) >= data.totalPage) {
end = data.totalPage;
begin = end - 9;
} else {
begin = data.currentPage - 5;
end = data.currentPage + 4;
}
if(data.totalPage <= 10 ){
begin = 1;
end = data.totalPage;
}
for (var i = begin; i <= end; i++) {
if (i == data.currentPage) {
msg += '<li style="cursor:pointer;" οnclick="load('+ cid +','+ i +','+ data.pageSize +',\''+rname+'\')" class="curPage"><a href="javascript:void()">' + i + '</a></li>';
} else {
msg += '<li style="cursor:pointer;" οnclick="load('+ cid +','+ i +','+ data.pageSize +',\''+rname+'\')"><a href="javascript:void()">' + i + '</a></li>';
}
}
if (data.currentPage == data.totalPage) {
msg += '<li style="cursor: not-allowed;" οnclick="load(' + cid + ',' + (data.currentPage + 1) + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a style="cursor: not-allowed;" href="javascript:void()">下一页</a></li>';
} else {
msg += '<li οnclick="load(' + cid + ',' + (data.currentPage + 1) + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a href="javascript:void()">下一页</a></li>';
}
msg += '<li style="cursor:pointer;" οnclick="load(' + cid + ',' + data.totalPage + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a href="javascript:void()">末页</a></li>';
$("#page_li").html(msg);
window.scrollTo(0, 0);
});
}
</script>
后台
servlet
@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {
private RouteService routeService = new RouteServiceImpl();
public void pageQuery(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String cidStr = req.getParameter("cid");
String currentPageStr = req.getParameter("currentPage");
String pageSizeStr = req.getParameter("pageSize");
String rname = req.getParameter("rname");
rname = URLDecoder.decode(rname,"utf-8");
int cid = 0;
if(cidStr != null || currentPageStr.length() > 0){
cid = Integer.parseInt(cidStr);
}
int currentPage = 1;
if(currentPageStr != null && currentPageStr.length() > 0 && Integer.parseInt(currentPageStr) > 0){
currentPage = Integer.parseInt(currentPageStr);
}
int pageSize = 5;
if(pageSizeStr != null && pageSizeStr.length() > 0){
pageSize = Integer.parseInt(pageSizeStr);
}
PageBean pageBean = routeService.pageQuery(cid, currentPage, pageSize,rname);//rname是搜索关键词
writeValue(resp,pageBean);
}
}
service
public class RouteServiceImpl implements RouteService {
private RouteDao routeDao = new RouteDaoImpl();
/**
* 分页查询
* @param currentPage
* @param pageSize
* @return
*/
@Override
public PageBean pageQuery(int cid,int currentPage, int pageSize,String rname) {
PageBean pageBean = new PageBean();
pageBean.setPageSize(pageSize);
int totalCount = routeDao.findTotalCount(cid,rname);//加入rname做为查询条件
pageBean.setTotalCount(totalCount);
int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : (totalCount / pageSize) + 1;
pageBean.setTotalPage(totalPage);
if(currentPage > totalPage && totalPage != 0){
currentPage = totalPage;
}
pageBean.setCurrentPage(currentPage);
int start = (currentPage - 1) * pageSize;
List<Route> routeList = routeDao.pageQuery(cid, start, pageSize,rname);//加入rname做为查询条件
pageBean.setList(routeList);
return pageBean;
}
}
dao
public class RouteDaoImpl implements RouteDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
/**
* 查询总条数
* @param cid
* @return
*/
@Override
public int findTotalCount(int cid,String rname) {
//拼接sql查询语句
String sql = "select count(rid) from tab_route where 1 = 1 ";
StringBuilder sb = new StringBuilder(sql);
List param = new ArrayList();
if(cid != 0 ){
sb.append(" and cid = ?");
param.add(cid);
}
if(!"null".equals(rname) && rname != ""){
sb.append(" and rname like ?");
param.add("%"+ rname +"%");
}
sql = sb.toString();
Integer count = template.queryForObject(sql, Integer.class,param.toArray());
return count;
}
/**
* 分页查询数据
* @param cid
* @param start
* @param pageSize
* @param rname
* @return
*/
@Override
public List<Route> pageQuery(int cid,int start,int pageSize,String rname) {
List<Route> routeList = null;
try{
//拼接sql查询语句
String sql = "select * from tab_route where 1 = 1 ";
StringBuilder sb = new StringBuilder(sql);
List param = new ArrayList();
if(cid != 0){
sb.append("and cid = ?");
param.add(cid);
}
if(!"null".equals(rname) && rname.length() > 0){
sb.append(" and rname like ?");
param.add("%"+ rname +"%");
}
param.add(start);
param.add(pageSize);
sb.append(" limit ?,?");
sql = sb.toString();
routeList = template.query(sql, new BeanPropertyRowMapper<Route>(Route.class), param.toArray());
}catch(Exception e){
e.printStackTrace();
}
return routeList;
}
}
因为代码比较多,很难简洁说明,但实现很简单,添加前端点击事件,修改ajax请求,修改dao查询语句。完成