Layui分页表单搜索重载

最新推荐文章于 2023-03-27 23:08:19 发布

TSwizzle1327

最新推荐文章于 2023-03-27 23:08:19 发布

阅读量296

点赞数

分类专栏： Layui 文章标签： layui

本文链接：https://blog.csdn.net/jduksa/article/details/113876175

版权

Layui 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何利用layui的form和table模块，通过JavaScript实现表格数据的搜索重载功能。在HTML中定义了一个提交按钮，当点击按钮时，触发JS中的form提交事件。JS代码捕获提交事件，获取搜索字段的值，并构造搜索模型。然后调用table的reload方法，设置当前页为第一页，并传入搜索参数，完成表格数据的刷新。

摘要由CSDN通过智能技术生成

Get方法的table进行搜索时方法重载

按钮： 
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn">
<i class="layui-icon"></i> 搜 索
</button>

js:
 table.render({
            elem: '#TableId',
            url: dinf.url + 'GetTpAnswerHistListPage?CompanyId=' + CompanyId + '&TPType=' + TPType,  //Get方法

            .......

})

form.on('submit(data-search-btn)', function (data) {
        var result = JSON.stringify(data.field);
        var model = {};//可进行搜索的内容
        model["Content"] = $("#Content").val();
        model["AnswerTimes"] = $("#AnswerTimes").val();
        model["UserName"] = $("#Name").val();
        model["HistStatus"] = $("#HistStatus").val();
        //执行搜索重载
        table.reload('TableId', {
            page: {
                curr: 1
            }
            , where: {
                SearchParam: JSON.stringify(model)
            }
        }, 'data');
        return false;
    });