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

 

posted @ 2021-12-09 21:34  java璀璨小菜鸟  阅读(373)  评论(0)    收藏  举报