layui form表单提交之后重新加载数据表格的方法
如下图,在我们做高级查询的时候需要重新加载数据表格 table.reload();
HTML form表单
<p style="text-align: center"><img src="//img.jbzj.com/file_images/article/201909/20190911173925.jpg" alt="" /></p> <div class="layui-row"> <form class="layui-form layui-col-md12 x-so" id="zq_search"> 菜单:<input id="name" type="text" name="name" placeholder="请输入菜单" autocomplete="off" class="layui-input"> <button id="search" class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon"></i></button> </form> </div>
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/doc/modules/table.html#reload
以上这篇layui form表单提交之后重新加载数据表格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
纯JavaScript基于notie.js插件实现消息提示特效
这篇文章主要介绍了纯JavaScript基于notie.js插件实现消息提示特效,可以制作Alert提示框,确认框和带输入的消息框,感兴趣的小伙伴们可以参考一下2016-01-01微信浏览器内置JavaScript对象WeixinJSBridge使用实例
这篇文章主要介绍了微信浏览器内置JavaScript对象WeixinJSBridge使用实例,本文给出了分享到朋友圈、发送给好友、分享到腾讯微博、关注指定的微信号等功能代码,需要的朋友可以参考下2015-05-05DataTables添加额外的查询参数和删除columns等无用参数实例
下面小编就为大家带来一篇DataTables添加额外的查询参数和删除columns等无用参数实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-07-07js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
下面小编就为大家带来一篇js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论