（带参数的）分页查询

最新推荐文章于 2025-06-08 22:48:24 发布

原创最新推荐文章于 2025-06-08 22:48:24 发布 · 617 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种基于元件名称的查询系统实现方法，通过使用layui框架和jQuery库，实现了元件信息的动态查询与分页显示功能。系统通过隐藏字段控制每页显示的行数和当前页码，利用layui-btn触发查询事件，通过ajaxPost进行后台数据请求，最后使用laypage插件渲染分页组件。

<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form" id="queryForm">
        <input type="hidden" id="page" name="page" value="1">
        <input type="hidden" id="rows" name="rows" value="15">
        <div class="layui-input-inline">
            <input class="layui-input searchVal" type="text" name="eleName" autocomplete="off"
                   maxlength="50" placeholder="元件名称" />
        </div>   
        <div class="layui-inline">
            <a class="layui-btn search_btn" onclick="doQuery()">查询</a>
        </div>
    </form>
</blockquote>
<div class="layui-table-page" id="pageCont">
</div>

function doQuery(curr) {
    var rows = $("#rows").val();
    if (curr!='undefined'&&curr!="" && curr >0){
        $("#page").val(curr);
    }
    Comm.ajaxPost('${ctx}/mes/manage/list/data', $("#queryForm").serialize(), function (res) {
        rendData(res);
        laypage.render({
            elem: 'pageCont',
            count: res.records,
            limit: rows,
            groups: 3,
            skip: true, //是否开启跳页
            curr: curr || 1,
            layout: ['count', 'prev', 'page', 'next', 'skip'],
            jump: function (obj, first) {
                if (!first) {
                    doQuery(obj.curr);
                }
            }
        });
    });
}