layui多个数据表格共存一个页面处理
1、html代码
2、jq代码
3、数据表格重载方式
今天在做后台时,遇到一个棘手的问题,就是layui的数据表格如果两个表格在一个页面,每个表格有一个搜索查询的筛选条件,那么每个搜索结果对应的只能刷新一个数据表格。如下图,当搜索药品的时候只刷新左表,当搜索器材的时候只刷新右表。
通过上网查询资料和看layui的开发文档,最终实现效果,实现过程如下:
我的表格渲染方式采用的是方法级渲染。
1、html代码
药品
搜索
器材
搜索
2、jq代码
3、数据表格重载方式
以下是官方文档给的不同的渲染方式对应的不同的重载方式。
注意:这里的表格重载是指对表格重新进行渲染,包括数据请求和基础参数的读取
示例1:自动化渲染的重载
【HTML】
……
【JS】
table.reload('idTest', {
url: '/api/table/search'
,where: {} //设定异步数据接口的额外参数
//,height: 300
});
示例2:方法级渲染的重载
//所获得的 tableIns 即为当前容器的实例
var tableIns = table.render({
elem: '#id'