layui多个数据表格共存一个页面处理 |
您所在的位置：网站首页 › layui一个页面多个table › layui多个数据表格共存一个页面处理 |
|
layui多个数据表格共存一个页面处理
1、html代码
2、jq代码
3、数据表格重载方式
今天在做后台时，遇到一个棘手的问题，就是layui的数据表格如果两个表格在一个页面，每个表格有一个搜索查询的筛选条件，那么每个搜索结果对应的只能刷新一个数据表格。如下图，当搜索药品的时候只刷新左表，当搜索器材的时候只刷新右表。 通过上网查询资料和看layui的开发文档，最终实现效果，实现过程如下： 我的表格渲染方式采用的是方法级渲染。 1、html代码 药品 搜索 器材 搜索 2、jq代码 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 页开始 } }); }); }); 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 页开始 } }); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |