Layui(2) form表单提交之后重新加载数据表格

如下图,在我们做高级查询的时候需要重新加载数据表格    table.reload();

Layui(2) form表单提交之后重新加载数据表格_第1张图片

HTML form表单

JS

$(function () {
    //注意:这里是数据表格的加载数据,必须写
    layui.use(['table', 'layer', 'form', 'laypage', 'laydate'], function () {
        var table = layui.table //表格
            ,layer = layui.layer //弹层
            ,form = layui.form //form表单
          //  ..................

        //监听提交 lay-filter="search"
        form.on('submit(search)', function(data){
            var formData = data.field;
            var name = formData.name,
                url=formData.url,
                icon=formData.icon,
                parent_id=formData.parent_id;
            //执行重载
            table.reload('tableReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {//这里传参  向后台
                    name: name
                    //可传多个参数到后台...  ,分隔
                }
                , url: '/menu/page'//后台做模糊搜索接口路径
                , method: 'post'
            });
            return false;//false:阻止表单跳转  true:表单跳转
        });

    });
});

最后如果还有不懂的可以参考layui官方文档:https://www.layui.com/doc/modules/table.html#reload

以及 layui模板在线演示: https://www.layui.com/demo/table/reload.html

你可能感兴趣的:(-----❸,layui)