layui多个数据表格共存一个页面处理
今天在做后台时，遇到一个棘手的问题，就是layui的数据表格如果两个表格在一个页面，每个表格有一个搜索查询的筛选条件，那么每个搜索结果对应的只能刷新一个数据表格。如下图，当搜索药品的时候只刷新左表，当搜索器材的时候只刷新右表。
通过上网查询资料和看layui的开发文档，最终实现效果，实现过程如下：
我的表格渲染方式采用的是方法级渲染。
1、html代码
<div class="layui-fluid yk-jiezhenc" style="width: 36%;">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label" style="width: 65px;padding: 5px 10px;">药品</label>
<div class="layui-input-block" style="margin-left: 65px;">
<input type="text" id="drugname" class="layui-input" placeholder="请输入药品名">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="search" id="searchdrug" lay-filter="searcha"><i class="layui-icon layui-icon-search"></i>搜索</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<table class="layui-hide" id="Lista" lay-filter="Lista" lay-data="{id: 'Lista'}"></table>
<script type="text/html" id="acta">
<input type="submit" class="layui-btn layui-btn-xs layui-btn-normal" "tianjia('{{d.id}}','{{d.pname}}','{{d.price}}')" value="添加">
</script>
</div>
</div>
</div>
</div>
<div class="layui-fluid yk-jiezhenc" style="width: 28%;">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label" style="width: 65px;padding: 5px 10px;">器材</label>
<div class="layui-input-block" style="margin-left: 65px;">
<input type="text" id="qicainame" class="layui-input" placeholder="请输入器材名">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="search" id="searchdrugs" lay-filter="searchb"><i class="layui-icon layui-icon-search"></i>搜索</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<table class="layui-hide" id="Listb" lay-filter="Listb" lay-data="{id: 'Listb'}"></table>
<script type="text/html" id="actb">
<input type="submit" class="layui-btn layui-btn-xs layui-btn-normal" "tianjia('{{d.id}}','{{d.pname}}','{{d.price}}')" value="添加">
</script>
</div>
</div>
</div>
</div>
2、jq代码
<script src="js/layuiList.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#Lista'
,url: 'drug_listjz' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'pname', title: '药品名称'},
{field: 'unit', title: '单位',width:'13%'},
{field: 'price', title: '单价/元',width:'16%'},
{field: 'snumber', title: '库存',width:'13%'},
{field: 'right', title: '操作',align:'center',toolbar:'#acta',width:'15%'},
]]
});
layList.search('searcha',function(where){
table.reload('Lista', {
where: { //设定异步数据接口的额外参数，任意设
pname: $("#drugname").val().trim(),
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
});
table.render({
elem: '#Listb'
,url: 'drug_listjz' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'pname', title: '器材名称'},
{field: 'unit', title: '单位',width:'17%'},
{field: 'price', title: '单价/元',width:'22%'},
{field: 'right', title: '操作',align:'center',toolbar:'#actb',width:'17%'},
]]
});
layList.search('searchb',function(where){
table.reload('Listb', {
where: { //设定异步数据接口的额外参数，任意设
pname: $("#qicainame").val().trim(),
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
});
});
</script>
3、数据表格重载方式
以下是官方文档给的不同的渲染方式对应的不同的重载方式。
注意：这里的表格重载是指对表格重新进行渲染，包括数据请求和基础参数的读取
示例1：自动化渲染的重载
【HTML】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
【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 页开始
}
});