黑马旅游网 ajax+html在前端实现页标签个数控制
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>黑马旅游-搜索</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/search.css">
<style>
#pageBar>li{
cursor: pointer;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/getParameter.js"></script>
<script>
$(function () {
/*
分类
*/
let cid = getParameter("cid");
//加载时根据cid查询
queryPage(cid);
}); function queryPage(cid, currentPage){
$.get("route/queryPage",{cid: cid, currentPage: currentPage}, function (pb) {
/*
显示分页条，首页上一页页码下一页末页，总页总条
*/
// <li class="threeword"><a href="#">上一页</a></li>
// <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> // alert(JSON.stringify(pb));
//总条
$("#totalCount").html(pb.totalCount);
//总页
$("#totalPage").html(pb.totalPage); // var lis;//必须初始化，不然与字符串相加，会将undefined加进去
var lis = ""; if(pb.totalPage != 0 && pb.currentPage != 1){//总页数不为0，并且当前页不是第1页，则显示首页上一页
//首页
var firstPage = '<li onclick="queryPage('+cid+', '+1+');"><a href="javascript: void(0);">首页</a></li>';
lis += firstPage; //上一页
var prePage = '<li onclick="queryPage('+cid+', '+ (pb.currentPage - 1) +');" class="threeword"><a href="javascript: void(0);">上一页</a></li>';
lis += prePage;
} //页标签个数控制 pageLinkCount, inLeft, leftOff, rightOff, startPage, endPage
var pageLinkCount = 5;//显示页标签个数
var inLeft = false;//当页标签为偶数时，当前页居左还是居右 var leftOff;
var rightOff;
// if(pageLinkCount % 2 != 0){
// //奇数个页标签
// leftOff = rightOff = pageLinkCount / 2;
// }else{
// //偶数个页标签
// if(inLeft){
// leftOff = pageLinkCount / 2 - 1;
// rightOff = pageLinkCount / 2;
// }else{
// leftOff = pageLinkCount / 2;
// rightOff = pageLinkCount / 2 + 1;
// }
// } leftOff = rightOff = Math.floor(pageLinkCount / 2);
if(pageLinkCount % 2 == 0){
inLeft ? leftOff-- : rightOff--;
} var startPage;
var endPage;
if(pb.totalPage < pageLinkCount){
//总页数小于页标签数
startPage = 1;
endPage = pb.totalPage;
}else{
//总页数大于页标签数
startPage = pb.currentPage - leftOff;
endPage = pb.currentPage + rightOff; if(startPage < 1){
startPage = 1;
endPage = pageLinkCount;
} if(endPage > pb.totalPage){
endPage = pb.totalPage;
startPage = pb.totalPage - pageLinkCount + 1;
}
} //页码
for (let i = startPage; i <= endPage; i++) {
if(i == pb.currentPage){
lis += '<li class="curPage" onclick="queryPage('+cid+', '+i+' );"><a href="javascript:void(0);">'+i+'</a></li>';
}else{
lis += '<li onclick="queryPage('+cid+', '+i+' );"><a href="javascript:void(0);">'+i+'</a></li>';
}
} if(pb.totalPage != 0 && pb.currentPage != pb.totalPage){
//下一页
var nextPage = '<li onclick="queryPage('+cid+', '+(pb.currentPage + 1)+' );" class="threeword"><a href="javascript: void(0);">下一页</a></li>';
lis += nextPage;
//末页
var lastPage = '<li onclick="queryPage('+cid+', '+pb.totalPage+' );"><a href="javascript: void(0);">末页</a></li>';
lis += lastPage;
} $("#pageBar").html(lis); /*
显示分页数据
*/
var routes = pb.list;
var routeLis = "";
if(routes){
for (let i = 0; i < routes.length; i++) {
routeLis += '<li>\n' +
' <div class="img"><img src="'+routes[i].rimage+'" alt=""></div>\n' +
' <div class="text1">\n' +
' <p>'+routes[i].rname+'</p>\n' +
' <br/>\n' +
' <p>'+routes[i].routeIntroduce+'</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>'+routes[i].price+'</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html?rid='+routes[i].rid+'">查看详情</a></p>\n' +
' </div>\n' +
'</li>'
}
}
$("#routeUL").html(routeLis); //滚动到顶部
// window.scrollTo(0, 0);
});
} function getQuery() {
let search = location.search;
// alert(search); //没有查询参数
let i = search.indexOf("?");
if( i == -1){
return {};
}; //去除问号
search = search.substring(i + 1); //得到参数
let result = {};
let items = search.split("&");
for(let item of items){
let split = item.split("=");
// alert(split[0]);
// alert(split[1]);
if(split[0]){
result[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
}
}
return result;
} function getQueryStringArgs(){
var qs=location.search.length ? location.search.substring(1) : "";
var args={};
var items=qs.length ? qs.split("&") : [];
var item=null,
name=null,
value=null,
len=items.length;
for(var i=0;i<len;i++){
item=items[i].split("=");
if(item[0].length){
name=decodeURIComponent(item[0]);
value=decodeURIComponent(item[1]);
args[name]=value;
}
}
return args;
} function getQueryArgs(){
let qs=location.search.length ? location.search.substring(1) : "";
let args={};
let items=qs.length ? qs.split("&") : []; for(let item of items){
let pair=item.split("=");
if(pair[0].length){
args[decodeURIComponent(pair[0])]= decodeURIComponent(pair[1]);
}
}
return args;
}
</script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<div class="page_one">
<div class="contant">
<div class="crumbs">
<img src="data:images/search.png" alt="">
<p>黑马旅行><span>搜索结果</span></p>
</div>
<div class="xinxi clearfix">
<div class="left">
<div class="header">
<span>商品信息</span>
<span class="jg">价格</span>
</div>
<ul id="routeUL">
<li>
<div class="img"><img src="data: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>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>浪花朵朵旅行普吉岛丛林飞跃空中飞人探险游中文服务泰国旅游</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>899</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>黑妞皇家旅行普吉岛攀牙湾大船星光之旅皮划艇日落休闲特色体验</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>999</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>浪花朵朵旅行普吉岛皇帝岛珊瑚岛香蕉船拖拽伞水上项目</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>99</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>环游记 泰国清迈Lila massage女子监狱spa 丽菈泰式按摩马杀鸡</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>199</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data: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>899</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data: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>1199</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>泰国芭提雅三合一日游芭提雅蒂芬妮人妖秀成人门票bigeye含接送</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>1589</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
</ul>
<div class="page_num_inf">
<i></i> 共
<span id="totalPage">12</span>页<span id="totalCount">132</span>条
</div>
<div class="pageNum">
<ul id="pageBar">
<!--<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>-->
</ul>
</div>
</div>
<div class="right">
<div class="top">
<div class="hot">HOT</div>
<span>热门推荐</span>
</div>
<ul>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div> <!--引入头部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body> </html>
route_list.html
package cn.itcast.travel.web.servlet; import cn.itcast.travel.domain.PageBean;
import cn.itcast.travel.domain.Route;
import cn.itcast.travel.service.RouteService;
import cn.itcast.travel.service.impl.RouteServiceImpl; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List; @WebServlet("/route/queryPage")
public class RouteServlet extends BaseServlet {
RouteService routeService = new RouteServiceImpl(); public void queryPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取参数
String cid = request.getParameter("cid");
String currentPage = request.getParameter("currentPage");
String pageSize = request.getParameter("pageSize"); //调用业务，查询
PageBean<Route> routePageBean = routeService.queryPage(currentPage, pageSize, cid); //响应数据
writeValue(routePageBean, response);
} }
RouteServlet
package cn.itcast.travel.web.servlet; import com.fasterxml.jackson.databind.ObjectMapper; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method; //@WebServlet("/*")
public class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取uri
String uri = request.getRequestURI();
System.out.println(uri); //获取方法名称
String methodName = uri.substring(uri.lastIndexOf("/") + 1);
System.out.println(methodName); //反射调用方法
try {
Method method = this.getClass().getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
method.invoke(this, request,response);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
} void writeValue(Object obj, HttpServletResponse response) throws IOException {
response.setContentType("application/json;charset=utf-8");
new ObjectMapper().writeValue(response.getOutputStream(), obj);
} String writeValueAsString(Object obj) throws IOException {
return new ObjectMapper().writeValueAsString(obj);
}
}
BaseServlet
package cn.itcast.travel.service.impl; import cn.itcast.travel.dao.RouteDao;
import cn.itcast.travel.dao.impl.RouteDaoImpl;
import cn.itcast.travel.domain.PageBean;
import cn.itcast.travel.domain.Route;
import cn.itcast.travel.service.RouteService;
import cn.itcast.travel.util.Constants; import java.util.List; public class RouteServiceImpl implements RouteService {
RouteDao routeDao = new RouteDaoImpl();
@Override
public PageBean<Route> queryPage(String currentPageStr, String pageSizeStr, String cid) {
PageBean<Route> pb = new PageBean<>(); int currentPage = 1;
if(currentPageStr != null && currentPageStr.length() > 0){
currentPage = Integer.parseInt(currentPageStr);
} int pageSize = Constants.DEFAULT_PAGESIZE;
if(pageSizeStr != null && pageSizeStr.length() > 0){
pageSize = Integer.parseInt(pageSizeStr);
} //当前页，页大小
pb.setCurrentPage(currentPage);
pb.setPageSize(pageSize); //查询总记录数
int totalCount = routeDao.findTotalCount(cid);
if(totalCount == 0){
//无记录
pb.setTotalCount(0);
pb.setTotalPage(0);
pb.setList(null);
return pb;
}
pb.setTotalCount(totalCount); //总页数
pb.setTotalPage((int) Math.ceil(1.0 * totalCount / pageSize)); //页数据
List<Route> routeList = routeDao.findByPage((currentPage - 1) * pageSize, pageSize, cid);
pb.setList(routeList); return pb;
}
}
RouteServiceImpl
package cn.itcast.travel.service; import cn.itcast.travel.domain.PageBean;
import cn.itcast.travel.domain.Route; import java.util.List; public interface RouteService { /**
* 查询分页，某分类
* @param currentPage
* @param pageSize
* @param cid
* @return
*/
PageBean<Route> queryPage(String currentPage, String pageSize, String cid);
}
RouteService
package cn.itcast.travel.dao;
import cn.itcast.travel.domain.Route;
import java.util.List;
public interface RouteDao {
/**
* 按分类查询总条数
* @param cid 分类id
* @return
*/
int findTotalCount(String cid);
List<Route> findByPage(int start, int size, String cid);
}
RouteDao
package cn.itcast.travel.dao.impl; import cn.itcast.travel.dao.RouteDao;
import cn.itcast.travel.domain.Route;
import cn.itcast.travel.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate; import java.util.List; public class RouteDaoImpl implements RouteDao {
JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDataSource()); @Override
public int findTotalCount(String cid) {
String sql = "select count(*) from tab_route where cid=? ";
return jdbcTemplate.queryForObject(sql, Integer.class, cid);
} @Override
public List<Route> findByPage(int start, int size, String cid) {
String sql = "select * from tab_route where cid=? limit ?,? ";
return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class), cid, start, size);
}
}
RouteDaoImpl
黑马旅游网 ajax+html在前端实现页标签个数控制的更多相关文章
- 黑马旅游网 ajax实现html页面共享
- Maven+JSP+Servlet+JDBC+Redis+Mysql实现的黑马旅游网
项目简介 项目来源于:https://gitee.com/haoshunyu/travel 本系统是基于Maven+JSP+Servlet+JdbcTemplate+Redis+Mysql实现的旅游网 ...
- 黑马旅游网配置 pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- Linux上部署黑马旅游网Bug集锦
- 黑马旅游网案例 Bug集锦
- 黑马旅游网 解析url查询字符串
function getUrlParam(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)( ...
- 黑马旅游网 url-pattern不加斜杠报错 java.util.concurrent.ExecutioException: org.apache.catalina.LifecycleException
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第5节 使用骨架创建maven的java工程_18maven的java工程取mysql数据库
使用maven创建ava功能,然后读取数据库做一个测试. 我们做的持久层,没有和页面有交互,只做一个java工程就可以了 创建的是java工程,用不用骨架都可以.这里不使用骨架,直接next 直接fi ...
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第4节 maven生命周期和概念模型图_09maven概念模型图
项目自身的信息 项目运行所依赖的扎包 运行环境信息:tomcat啊,JDK啊这些都属于运行环境 一个jar包的坐标由三个最基本的信息组成. 第一部分就是依赖管理. 第二个部分
随机推荐
- 重新实践c++primer上面的代码
又重新敲了敲c++primer上面的代码,觉得很有意思,讲的很细,c++真牛逼啊 #include <iostream> #include <string> #include ...
- NMEA码详解【转】
本文转载自:http://m.2cto.com/kf/201610/556695.html GPS数据遵循NMEA-0183协议,该数据标准是由NMEA(National Marine Electro ...
- struts2标签（转）
Struts2 标签库讲解 要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可: <%@ taglib prefix="s" uri="/str ...
- Linux下的磁盘缓存
转自:http://blog.csdn.net/cywosp/article/details/21126161 前段时间在开发一个使用SSD做缓存的系统,在高速写入数据时会出现大量的磁盘缓存.太多的磁 ...
- 华为机试题 N阶楼梯的走法，每次走一步或者两步
在Stairs函数中实现该功能: 一个楼梯有N阶,从下往上走,一步可以走一阶,也可以走两阶,有多少种走法? (0<n<=30)<> 例如3阶楼梯有3种走法: 1.1.1 1.2 ...
- 机器学习：朴素贝叶斯--python
今天介绍机器学习中一种基于概率的常见的分类方法,朴素贝叶斯,之前介绍的KNN, decision tree 等方法是一种 hard decision,因为这些分类器的输出只有0 或者 1,朴素贝叶斯方 ...
- Ubuntu 16.04上编译SkyEye的测试程序
一.首先确保Ubuntu系统上已经安装了Skyeye.skyeye-testsuite和arm-linux-gcc交叉编译工具链,如果没有安装请参考: 1.Skyeye的安装:http://www.c ...
- bootstrap框架日期时间 开始日期和结束日期选择
页面表单查询时,常要求要查询一个日期时间段内的数据,若采用bootstrap框架的datetimepicker插件来控制,需要了解怎么个用法:
- storm--chuanzhiboke
Storm里面有7种类型的stream grouping 1. Shuffle Grouping: 随机分组, 随机派发stream里面的tuple,保证每个bolt接收到的tuple数目大致相同. ...
- MySQL当月汇总 及负毛利汇总_20161027
#当月汇总 及负毛利汇总 SELECT e.ID,e.city AS 城市 ,f.当月销售总额,f.当月成本总额,f.当月毛利总额,f.当月优惠券总额,f.当月赠品总额,f.当月毛利总额-f.当月优惠 ...