layui多个数据表格共存一个页面处理

今天在做后台时，遇到一个棘手的问题，就是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'
  ,cols: [] //设置表头
  ,url: '/api/data' //设置异步接口
  ,id: 'idTest'
}); 
 
//这里以搜索为例
tableIns.reload({
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
});
//上述方法等价于
table.reload('idTest', {
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
});