layui分页页码消失

最新推荐文章于 2023-09-03 20:55:30 发布

csdn_bdl

最新推荐文章于 2023-09-03 20:55:30 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui学习文章标签： layui分页分页页码消失

本文链接：https://blog.youkuaiyun.com/csdn_bdl/article/details/99686943

layui学习专栏收录该内容

2 篇文章

订阅专栏

使用layui分页实现搜索功能时，发现在传递搜索参数时，分页页码会消失。问题出在从域中直接取搜索框值(${pageUtil.numberIdOrName})，而非通过jQuery选择器取值($('#numberIdOrName').val())。后者能确保分页正常显示。原因可能是值类型导致，期待了解详情的人解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui分页传值到后台，下方分页栏消失

通过layui的分页完成后，想要再完成搜索的分页，但是在向后台传递页码时附带搜索框内容，会发现分页下方页面消失了。后来才发现是搜索框内的值获取问题。

后台代码

public void gather() {
        String page = getPara("page");
        String limit = getPara("limit");
        page = page == null || "".equals(page) ? "1" : page;
        limit = limit == null || "".equals(limit) ? "10" : limit;
        String numberIdOrName = getPara("numberIdOrName");
        String gatherTypeName = getPara("gatherTypeName");
        PageUtil pageUtil = shopServices.gatherService(page,limit,numberIdOrName,gatherTypeName);
        setAttr("pageUtil",pageUtil);
        renderJsp("gather.jsp");
    }

点击搜索显示查询分页首页

    <div class="flex">
        <input type="text"style="display:block;" id="numberIdOrName" name="numberIdOrName" placeholder="身份证号/姓名"
               autocomplete="off" class="layui-input" value="${pageUtil.numberIdOrName}"><br>

        <input type="text"style="display:block;" id="gatherTypeName" name="gatherTypeName" placeholder="请输入医疗编号"
               autocomplete="off" class="layui-input" value="${pageUtil.gatherTypeName}"><br>

        <button class="layui-btn" id="boss" onclick="boss()">搜索</button>
    </div>
     <script>
        function boss() {
            var numberIdOrName = $('#numberIdOrName').val();
            var gatherTypeName = $('#gatherTypeName').val();
            // 查询分页首页
            window.location.href="/shop/gather?numberIdOrName="+numberIdOrName+"&gatherTypeName="+gatherTypeName;
        }
    </script>

点击第二页、第三页时，再次向后台传递搜索内容（此步出错！）

layui.use('laypage', function(){
            var laypage = layui.laypage;
            laypage.render({
                elem: 'fenye'
                ,count: ${pageUtil.totalRows}
                ,limit:10//数据总数，从服务端得到
                ,curr:${pageUtil.currentPage}
                /* 错误获取值方式
                ,numberIdOrName:<%--${pageUtil.numberIdOrName}--%>// 搜索框身份证或姓名
                ,gatherTypeName:<%--${pageUtil.gatherTypeName}--%>// 搜索框医疗编号

				正确取值方式1（此时下方传值要改为obj.numberIdOrName）：
                ,numberIdOrName:$('#numberIdOrName').val()
                ,gatherTypeName:$('#gatherTypeName').val()
                 */
                ,hash:true
                ,jump: function(obj, first){
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if(!first){
                    /*
                    正确取值方式2：没有第一种方式规范，但是也能达到预期效果
                    */
                        var numberIdOrName=$('#numberIdOrName').val();// 搜索框身份证或姓名
                        var gatherTypeName=$('#gatherTypeName').val();// 搜索框医疗编号
                        window.location.href="/shop/gather?page="+obj.curr
                            +"&limit="+obj.limit
                            +"&numberIdOrName="+numberIdOrName
                            +"&gatherTypeName="+gatherTypeName;
                    }
                }
            });
        });

不能通过 ${pageUtil.numberIdOrName} 直接从域中取值，这种取值方式会导致分页页码消失。
只能通过id或class 使用 $(’#numberIdOrName’).val(); 从搜索框中取值，通过这种方式取到的值传到后台，查询分页才会正常显示。可是跳转页码及每页个数就可以，具体原因暂不清楚，可能是因为值类型的原因吧。有知道的希望留言，帮我解决疑问，谢谢！