[Layui]layui多个tab加载数据并在标题显示每个tab的数据条数

Posted 2022-04-15 厦门德仔

功能描述：在页面中有多个tab需要切换，页面加载或点击搜索按钮时异步获取全部tab的数据，并在tab的表头中显示每个tab的数据条数。

效果如图所示：

关键的html代码：

<div class="layui-card-body">
		<div class="layui-tab layui-tab-card">
		  <ul class="layui-tab-title" style="padding-right: 30px;height: auto!important;white-space: normal!important;">
		    <li class="layui-this">行业</li>
		    <li>企业</li>
		    <li>人员</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">
			    <table class="layui-table" id="potential_industry"
					lay-filter="potential_industry"></table>
		    </div>
		    <div class="layui-tab-item">
		    	<table class="layui-table" id="potential_company"
					lay-filter="potential_company"></table>
		    </div>
		    <div class="layui-tab-item">
		    	<table class="layui-table" id="potential_person"
					lay-filter="potential_person"></table>
		    </div>
		    
		  </div>
		</div>
</div>	

关键的js代码

//加载表格数据完成时回调设置数据数目
	    function changeNum(name,count)
	    	 var $li = $(".layui-tab ul li");
	    	 for(var i=0;i<$li.length;i++)
	    		 var text = $li.eq(i).text();
	    		 if(text.indexOf(name)>-1)
	    			 $li.eq(i).text(name+"("+count+")");
	    			 return;
	    		 
	    	 
		
 
//行业
		var industryTable = table.render(
	    	elem: '#potential_industry'
		    ,url : doGetPotentialIndustryUrl
		    ,cols: [[ //标题栏
		      field: 'index', title: '序号', width: 60
		      ,field: 'mpanyName', title: '名称', width: 200
		      ,field: 'socialCreditCode', title: '统一社会信用代码', width: 200
		      ,field: 'industryType', title: '行业类别', width: 200
		      ,field: 'technicalField', title: '技术领域', width: 200
		      ,field: 'address', title: '详细地址', width: 200
		      ,field: 'personInCharge', title: '负责人', width: 200
		      ,field: 'contactInformation', title: '联系方式', width: 200
		    ]] 
		    ,even: true
		    ,page: true //是否显示分页
		    ,limits: [8, 12, 15,18]
		    ,limit: 12 //每页默认显示的数量
		    ,id: "potential_industry_table"
		    ,done : function(res, curr, count)
		    	changeNum("行业",count)
		    
	    )
 
//企业
		var companyTable = table.render(
	    	elem: '#potential_company'
		    ,url : doGetPotentialCompanyUrl
		    ,cols: [[ //标题栏
		      field: 'index', title: '序号', width: 60
		      ,field: 'enterpriseName', title: '企业名称', width: 200
		      ,field: 'socialCreditCode', title: '统一社会信用代码', width: 200
		      ,field: 'enterpriseAddress', title: '企业所在地', width: 200
		      ,field: 'industry', title: '所属行业', width: 200
		      ,field: 'contacts', title: '联系人', width: 200
		      ,field: 'contactInformation', title: '联系方式', width: 200
		      ,field: 'mainBusiness', title: '主营业务', width: 200
		    ]] 
		    ,even: true
		    ,page: true //是否显示分页
		    ,limits: [8, 12, 15,18]
		    ,limit: 12 //每页默认显示的数量
		    ,id: "potential_company_table"
	    	,done : function(res, curr, count)
		    	changeNum("企业",count)
		    
	    )	
 
//人员
		var personTable = table.render(
	    	elem: '#potential_person'
		    ,url : doGetPotentialPersonUrl
		    ,cols: [[ //标题栏
		      field: 'index', title: '序号', width: 60
		      ,field: 'name', title: '姓名', width: 200
		      ,field: 'idNumber', title: '身份证号', width: 200
		      ,field: 'gender', title: '性别', width: 200
		      ,field: 'politicalAppearance', title: '政治面貌', width: 200
		      ,field: 'culturalDegree', title: '文化程度', width: 200
		      ,field: 'myselfPhone', title: '本人联系电话', width: 200
		      ,field: 'technicalTitle', title: '技术职称', width: 200
		    ]] 
		    ,even: true
		    ,page: true //是否显示分页
		    ,limits: [8, 12, 15,18]
		    ,limit: 12 //每页默认显示的数量
		    ,id: "potential_person_table"
	    	,done : function(res, curr, count)
		    	changeNum("人员",count)
		    
	    )
 
//表格重载方法
	    function reloadTable(id,target_url,param)
	    	table.reload(id,
				url:target_url,
				where:param
			);
	    
 
	    //查询按钮点击事件
	    $("#searchBtn").on("click",function(data)	    	
	    	var searchInfo = $("#searchInfo").val();
	    		    	
	    	var param = 
	  			searchKey: searchInfo
	  		
	    	
	    	//行业表格重载
	    	reloadTable('potential_industry_table',doGetPotentialIndustryUrl,param);
	    	//企业表格重载
	    	reloadTable('potential_company_table',doGetPotentialCompanyUrl,param);
	    	//人员表格重载
	    	reloadTable('potential_person_table',doGetPotentialPersonUrl,param);
 	
	    	
	    )