前端用到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; }