前端用到layPage分页插件
思路：先下载layPage的css,js文件，2.script模块写ajax渲染，回调函数清空原来的，3后端用到pagehelper插件，返回总页数和数据list。
1.加载js，css文件
<link rel="stylesheet" type="text/css" href="layui/css/laypage.css" />
<script src="js/laypage.js"></script>
<script src="js/getParameter.js"></script>
2.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css " media="all" />
<link rel="stylesheet" type="text/css" href="css/hotal.css" />
<link rel="stylesheet" href="css/groupTour.css">
<link rel="stylesheet" type="text/css" href="layui/css/laypage.css" />
</head>
<style type="text/css">
.select {
display: flex;
}
</style>
<body>
<header>
<div class="box-wrap clearfix">
<div class="left">
<img src="img/logo.png" />
<ul class="layui-nav" menu lay-filter="">
<li class="layui-nav-item">
<a href="st.html">主页</a>
</li>
<li class="layui-nav-item layui-this">
<a href="group_tour.html">跟团游</a>
</li>
<li class="layui-nav-item">
<a href="hotal.html">订酒店</a>
</li>
<li class="layui-nav-item">
<a href="my.html">我的订单</a>
</li>
</ul>
</div>
<div class="right ic">
<div id="">
<a id="loginname" href="login.html">登陆</a>
<a id="login" href=""></a>
</div>
<div id="loginname2">
<a href="">|</a>
</div>
<div id="loginname3">
<a href="">注册</a>
</div>
<div id="out">
<a href="">退出</a>
</div>
</div>
</div>
</header>
<div class="container-body">
<!-- <ul class="ul-dropdown-bar">
<li>自由行</li>
<li class="this-nav">跟团游</li>
<li>当地游</li>
<li>签证</li>
<li>全球WiFi</li>
<li>邮轮</li>
</ul> -->
<div class="brand-bar">
<div class="search-bar">
<div class="search-departure">
<strong>全国</strong>
<span>出发</span>
</div>
<i class="i-arr"></i>
<div class="search-destination">
<input type="text" placeholder="请输入目的地/产品名称" value="">
</div>
<!--搜索按钮-->
<div class="search-btn">
<a href="javascript:;" class="search-button">
<i></i>
</a>
</div>
</div>
</div>
<div class="container-wrapper">
<!--选项卡-->
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">综合排序</li>
<li>近期销量优先</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="list-wrap">
<!-- <div class="item">
<a href="../src/orderDetails.html" target="_blank">
<div class="item-image">
<img src="../images/banner/pictures-xiyu.jpeg">
</div>
<div class="detail">
<div class="info">
<p>月集3</p>
<h3>
【千人好评-下单减500】新疆喀纳斯8天结伴游（禾木住宿-豪华西域风情酒店-西域风情特色餐-经典景点全含-赠旅行百宝箱-免费接送）
</h3>
<div class="tag"></div>
<p class="time">班期:05/07-08/03 | 店铺: 欢游世界</p>
</div>
<div class="extra">
<div class="price">
<b>￥</b>
<strong>6666</strong>
起
</div>
<div class="promo-txt">
<em>促销</em>
每2人减200
</div>
<div class="discount-tag">券</div>
<div class="discount-tag vip-discount">金卡专享</div>
</div>
<div class="action">
<span class="btn">立即预定</span>
</div>
</div>
</a>
</div> -->
</div>
<!-- 分页 -->
<div class="pages" id="doctorDiv"></div>
</div>
<div class="layui-tab-item">内容2</div>
</div>
</div>
<div class="sales-side">
<div class="m-hotsale">
<h3 class="hd">本周热卖</h3>
</div>
</div>
</div>
</div>
<div class="container-floor"></div>
</div>
<script src="layui/layui.js"></script>
<script src=""></script>
<script src="js/jquery.min.js"></script>
<script src="js/laypage.js"></script>
<script src="js/getParameter.js"></script>
<script type="text/javascript">
$(function () {
//查询数据
search();
});
//查询数据
function search(curr) {
var str = "";
// var pageNum=2;
var pageSize=5;
if(curr==0){
var curr=1;
}
$.ajax({
type: "post",
url: "http://localhost:8081/hotel/list",
dataType: "json",
async: true,
data: {page : curr,limit : pageSize},
success: function (res) {
var returndata = res.data;
$(returndata).each(function(index, item) {
var code = '<div class="item">'
code += '<a target="_blank">'
code += '<div class="item-image">'
code += '<img src="http://localhost:8081' + item.hotelimg + '">'
code += '</div>'
code += '<div class="detail">'
code += '<div class="info">'
code += '<p>' + item.name + '</p>'
code += '<h3>'
code +=
'【千人好评-下单减500】新疆喀纳斯8天结伴游（禾木住宿-豪华西域风情酒店-西域风情特色餐-经典景点全含-赠旅行百宝箱-免费接送）'
code += '</h3>'
code += '<div class="tag"></div>'
code += '<p class="time">班期:05/07-08/03 | 店铺: 欢游世界</p>'
code += '</div>'
code += '<div class="extra">'
code += '<div class="price">'
code += '<b>￥</b>'
code += '<strong>' + item.price + '</strong>'
code += '起'
code += '</div>'
code += '<div class="promo-txt">'
code += '<em>促销</em>'
code += '每2人减200'
code += '</div>'
code += '<div class="discount-tag">券</div>'
code += '<div class="discount-tag vip-discount">金卡专享</div>'
code += '</div>'
code += '<div class="action">'
code += '<span class="btn" data-id="' + item.id + '">立即预定</span>'
code += '</div>'
code += '</div>'
code += '</a>'
code += '</div>'
$(".list-wrap").append(code);
var pages = res.pages; //总页数
// var curr = res.pageNum; //当前页
laypage({
cont: 'doctorDiv', //分页需要显示的地方
pages: pages, //总页数
curr: curr || 1, //当前页
groups: 8,//连续显示分页数
skip: true, //是否开启跳页
first: '首页',
last: '尾页',
skin: 'molv', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
prev: '<', //若不显示，设置false即可
next: '>', //若不显示，设置false即可
jump: function (e, first) { //触发分页后的回调
if (!first) { //一定要加此判断，否则初始时会无限刷新
$(".list-wrap").text("");
search(e.curr);
}
}
});
console.log(returndata)
});
}
});
}
</script>
<script>
layui.use(['layer', 'form', 'element'], function() {
var layer = layui.layer,
form = layui.form,
element = layui.element
// $.ajax({
// url: "http://localhost:8081/hotel/list",
// type: "post",
// data: {
// projectname: ""
// },
// datatype: "json",
// success: function(res) {
// console.log(res)
// $(res.data).each(function(index, item) {
// var code = '<div class="item">'
// // code += '<a href="../src/orderDetails.html" target="_blank">'
// code += '<a target="_blank">'
// code += '<div class="item-image">'
// code += '<img src="http://localhost:8081/' + item.hotelimg + '">'
// code += '</div>'
// code += '<div class="detail">'
// code += '<div class="info">'
// code += '<p>' + item.name + '</p>'
// code += '<h3>'
// code +=
// '【千人好评-下单减500】新疆喀纳斯8天结伴游（禾木住宿-豪华西域风情酒店-西域风情特色餐-经典景点全含-赠旅行百宝箱-免费接送）'
// code += '</h3>'
// code += '<div class="tag"></div>'
// code += '<p class="time">班期:05/07-08/03 | 店铺: 欢游世界</p>'
// code += '</div>'
// code += '<div class="extra">'
// code += '<div class="price">'
// code += '<b>￥</b>'
// code += '<strong>' + item.price + '</strong>'
// code += '起'
// code += '</div>'
// code += '<div class="promo-txt">'
// code += '<em>促销</em>'
// code += '每2人减200'
// code += '</div>'
// code += '<div class="discount-tag">券</div>'
// code += '<div class="discount-tag vip-discount">金卡专享</div>'
// code += '</div>'
// code += '<div class="action">'
// code += '<span class="btn" data-id="' + item.id + '">立即预定</span>'
// code += '</div>'
// code += '</div>'
// code += '</a>'
// code += '</div>'
// $(".list-wrap").append(code);
// });
// /* 点击立即预定的事件，把id存在session中带过去 */
// $(".btn").click(function() {
// if (!sessionStorage.getItem('name') == '') {
// sessionStorage.setItem("id", $(this).attr("data-id"))
// location.href = "src/orderDetails.html";
// } else {
// alert("请先登录")
// }
// })
// }
// });
});
if (!sessionStorage.getItem('name') == '') {
document.getElementById('login').innerHTML = sessionStorage.getItem('name');
document.getElementById('loginname').style.visibility = "hidden";
document.getElementById('loginname2').style.visibility = "hidden";
document.getElementById('loginname3').style.visibility = "hidden";
} else {
}
$("#out").click(function() {
sessionStorage.removeItem('name')
})
</script>
</body>
</html>
3.后端
* 酒店列表 * @param request * @param hotel * @param pageNum * @param pageSize * @return */ @RequestMapping("/list") @ResponseBody public JSONObject hotelList(HttpServletRequest request, Hotel hotel, @RequestParam(required = false,value = "page", defaultValue = "1") int pageNum,@RequestParam( required = false,value = "limit",defaultValue = "10") int pageSize){ JSONObject jo=new JSONObject(); List<Hotel> list = hotelService.list(pageNum, pageSize, hotel); PageInfo<Hotel> pageInfo=new PageInfo<>(list); if (CollectionUtils.isNotEmpty(list)){ jo.put("code",0); jo.put("msg","请求成功"); jo.put("count",pageInfo.getTotal()); jo.put("data",pageInfo.getList()); jo.put("pages",pageInfo.getPages()); } return jo; }
@Override public List<Hotel> list(int pageNum, int pageSize, Hotel hotel) { PageHelper.startPage(pageNum,pageSize); List<Hotel> list = baseMapper.list(hotel); return list; }
浙公网安备 33010602011771号