layui数据表格之表格重载（两次渲染问题）

背景

在我们使用数据表格时候往往需要用到查询功能，以往常开发经验，点击【查询】立马$.ajax搞起来，但在这就面临一个问题，ajax拿到了数据，怎么去渲染表格，使用table.render(‘表容器id’,{data:res.data})渲染，但表格参数中的url仍然会执行（这样会有两次渲染，后一次还覆盖了我们的查询结果），这肯定不是贤心的设计初衷，因此，这里我们需要使用框架中的重载表格重载方法参数-> where
框架正是将我们的查询条件传给重载参数 where,通过重载时带上我们自定义的参数、默认参数page、limit去拿到我们需要的结果再来渲染数据表格（一次渲染），得到的正是我们想要的结果

例子

    <div class="layui-card"><div class="layui-card-body"><form class="layui-form layui-form-pane" action="" autocomplete="off"><div class="layui-form-item"><div class="layui-form-item layui-inline"><label class="layui-form-label">名称</label><div class="layui-input-inline"><input type="text" name="name" placeholder="" class="layui-input"></div></div><div class="layui-form-item layui-inline"><button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query"><i class="layui-icon layui-icon-search"></i>查询</button><button type="reset" class="pear-btn pear-btn-md"><i class="layui-icon layui-icon-refresh"></i>重置</button></div></div></form></div></div>js部分如下form.on('submit(user-query)', function(obj) {table.reload('database-table', {where:obj.field})return false;});

总结

使用框架时还是要耐心读完文档~

layui数据表格之表格重载（两次渲染问题）相关推荐

php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
Layui数据表格隔行变色的两种方法
开发工具与关键技术:MVC 作者:Mr_恺撰写时间:2019年7月17日 Layui数据表格隔行变色,第一种的就是layui插件里有一个自带的方法: even这个属性把它设置为:true,就开启 ...
layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格实现重载数据表格功能(搜索功能）
这篇文章主要介绍了layui数据表格实现重载数据表格功能,以搜索功能为例进行讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格 ...
Layui数据表格重载不了问题
工具:VScode 解决办法: 重载数据表格的前提: 数据表格第一次加载方式必须使用url异步数据接口也就是说如果你的数据表格加载方式为data静态数据,是无法重载的,必须重新使用render重新渲 ...
Layui数据表格请求添加参数
Layui数据表格基本形态,官网链接地址 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
5. Layui数据表格的快速使用
飘向天边,我们慢慢明白,有些告别,就是最后一面.--<云边有个小卖部> Layui数据表格的快速使用 1.什么是数据表格 2.方法渲染 3.自动渲染 4.把静态表格转换为动态 1.什么是数 ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...

layui数据表格之表格重载（两次渲染问题）

背景

例子

总结

layui数据表格之表格重载（两次渲染问题）相关推荐

最新文章

热门文章