2019-8-21-2019-8-23 工作总结 layui的tab带查询带分页

妖狐艹你老母 2021-09-20 15:20 125阅读 0赞

<div class="layui-tab layui-tab-brief" lay-filter="form">
    			  <ul class="layui-tab-title">
    			    <li class="layui-this">有效授信明细</li>
    			    <li>预授信明细</li>
    			    <li>蓝名单明细</li>
    			  </ul>
    			  <div class="layui-tab-content">
    			    <div class="layui-tab-item layui-show">
    			      <div id="Lay_table"></div>
    			    </div>
    			    <div class="layui-tab-item">
    			      <div id="Lay_table1"></div>
    			    </div>
    			    <div class="layui-tab-item">
    			      <div id="Lay_table2"></div>
    			    </div>
    			  </div>
    			</div>

//有效授信明细
    					tablelns=table.render({
    						elem: '#Lay_table',
    						url: "${pageContext.request.contextPath}/manage/LonProcessController/getLonProcessPassList",
    						request: {
    							pageName: 'page',
    							limitName: 'rows' //每页数据量的参数名，默认：limit
    						},
    						size: 'sm',
    						height: table_height,
    						width: form_width,
    						where: {
    						},
    						cols: [
    							[{		
    									title: '序号',
    									type: 'numbers',
    									fixed: 'left',
    									align: 'center'
    								},
    								{
    									field: 'orgname',
    									title: '支行名称',
    									align: 'center',
    									event: 'setSign',
    									width:  100
    								},{
    									field: 'ogname',
    									title: '网格名称',
    									align: 'center',
    									event: 'setSign',
    									width:  100
    								},{
    									field: 'staname1',
    									title: '客户经理',
    									align: 'center',
    									event: 'setSign',
    									width:  100
    								},
    								{
    									field: 'cusname',
    									title: '客户名称',
    									align: 'center',
    									event: 'setSign',
    									width:  100
    								},
    								{
    									field: 'identificationno',
    									title: '证件号',
    									align: 'center',
    									event: 'setSign',
    									Width: 170
    								},
    								{
    									field: 'creditlineFinal',
    									title: '授信额度',
    									align: 'center',
    									event: 'setSign',
    								},
    								{
    									field: 'processtime',
    									title: '授信开始日期',
    									align: 'center',
    									event: 'setSign',
    								},
    								{
    									field: 'processendtime',
    									title: '授信终止日期',
    									align: 'center',
    									event: 'setSign',
    								},
    								{
    									field: 'residuebalance',
    									title: '用信余额',
    									align: 'center',
    									event: 'setSign',
    									
    								}
    							]
    						],
    						id: "newsListTable",
    						page: true,
    						limit: 20, //默认十条数据一页
    						limits: [20, 40, 80, 120] //数据分页条
    					});

//通过获取三个tab的id来控制查询table
    					element.on('tab(form)', function(data){
    						if(data.index==0){
    							table.reload("newsListTable");
    							form.on('submit(search_btn)', function(data) {
    								var formData = data.field;
    								var index = layer.load(1, {
    									shade: [0.1, '#fff'],
    									offset: '50%'
    								});
    								console.log(formData)
    								//执行重载有效授信明细
    								table.reload("newsListTable", {
    									url: "${pageContext.request.contextPath}/manage/LonProcessController/getLonProcessPassList",
    									request: {
    										pageName: 'page',
    										limitName: 'rows' //每页数据量的参数名，默认：limit
    									},
    									method: 'post',
    									page: {
    										curr: 1 //重新从第 1 页开始
    									},
    									where: formData,
    									done: function() {
    										layer.close(index); //取消加载
    									}
    								});
    								return false;
    							});
    					    }else if(data.index==1){
    					    table.reload("newsListTable1");
    							form.on('submit(search_btn)', function(data) {
    								var formData = data.field;
    								var index = layer.load(1, {
    									shade: [0.1, '#fff'],
    									offset: '50%'
    								});
    								//执行重载预授信明细
    								table.reload("newsListTable1", {
    									url: "${pageContext.request.contextPath}/manage/LonProcessController/getLonProcessNoPassList",
    									request: {
    										pageName: 'page',
    										limitName: 'rows' //每页数据量的参数名，默认：limit
    									},
    									method: 'post',
    									page: {
    										curr: 1 //重新从第 1 页开始
    									},
    									where: formData,
    									done: function() {
    										layer.close(index); //取消加载
    									}
    								});
    								return false;
    							}); 
    					    }else if(data.index==2){
    					    table.reload("newsListTable2");
    							form.on('submit(search_btn)', function(data) {
    								var formData = data.field;
    								var index = layer.load(1, {
    									shade: [0.1, '#fff'],
    									offset: '50%'
    								});
    								//执行重载蓝名单明细
    								table.reload("newsListTable2", {
    									url: "${pageContext.request.contextPath}/manage/CusCustomerController/getCusCustomerListByPkog",
    									request: {
    										pageName: 'page',
    										limitName: 'rows' //每页数据量的参数名，默认：limit
    									},
    									method: 'post',
    									page: {
    										curr: 1 //重新从第 1 页开始
    									},
    									where: formData,
    									done: function() {
    										layer.close(index); //取消加载
    									}
    								});
    								return false;
    							}); 
    					    }
    					  })

默认显示第一个tab  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ5NTM5MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ5NTM5MA_size_16_color_FFFFFF_t_70]: /images/20210920/61dd630c08484d2989ff40eb151cb8b3.png