BootstrapTable冻结表头（二）

朱雀 2020-10-17 17:57 1090阅读 0赞

**一、冻结表头效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5sdW9sZWk_size_16_color_FFFFFF_t_70][]

可能细心的你发现了，上面错位了，这个根据你的情况适当调整，看注释6![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5sdW9sZWk_size_16_color_FFFFFF_t_70 1][]

** 二、冻结表头demo2**

使用时要注意的有注释，共6条

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>BootstrapTable冻结表头-Demo2</title>
    		
    		<link rel="stylesheet" href="css/bootstrap.min.css" />
    		
    		<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
    		
    		<style type="text/css">
    			/******注释1.表头固定 Start******/	
    			.fixed-table-container .no-records-found>td:last-of-type{display:block !important;position:absolute;width:100%;}
    			.fixed-table-container{height:auto !important;}
    			p{margin-bottom:0;}
    			table thead, tbody tr {
    				display:table;
    				width:100%;
    				table-layout:fixed;
    			}
                        /**注释6.有事会错位，根据情况适当调整这里**/
    			table thead {
    				width: calc( 100% - 0.4em )
    			}
    			#table,#table1{background:#efefef;border-top:2px solid #ddd;}
    			#table tbody,#table1 tbody{background:#fff;}
    			.table thead:first-child tr:first-child th{border-top:none;}		
    			/******表头固定 end******/
    		</style>
    		
    	</head>
    	<body style="width: 95%;margin: 0 auto;">
    	<h2>BootstrapTable冻结表头-Demo2</h2>
    	
    	
    	
    	<div class="bootstrap-table-fixed-header">
    	<table id="table" 
    		data-toolbar="#toolbar"
    		data-toggle="table"  
    		data-ajax="ajaxRequest"   
    		data-search="false"     
    		data-side-pagination="server" 
    		data-click-to-select="true" 
    		data-single-select="true"
    		data-pagination="true"
    		data-page-size= "10"
    		>
    		<thead style="background:#efefef;">
    			<tr>
    				<th  data-width="140px" data-checkbox="true"></th>
    				<th  data-width="140px" data-field="id">标题标题ID-1</th>
    				<th  data-width="140px" data-field="name">标题标题Name-1</th>
    				<th  data-width="140px" data-field="price">标题标题Price-1</th>
    				<th  data-width="140px" data-field="id">标题标题ID-2</th>
    				<th  data-width="140px" data-field="name">标题标题Name-2</th>
    				<th  data-width="140px" data-field="price">标题标题Price-2</th>
    				<th  data-width="140px" data-field="id">标题标题ID-3</th>
    				<th  data-width="140px" data-field="name">标题标题Name-3</th>
    				<th  data-width="140px" data-field="price">标题标题Price-3</th>
    				<th  data-width="140px" data-field="id">标题标题ID-4</th>
    				<th  data-width="140px" data-field="name">标题标题Name-4</th>
    				<th  data-width="140px" data-field="price">标题标题Price-4</th>
    				<th  data-width="140px" data-field="id">标题标题ID-5</th>
    				<th  data-width="140px" data-field="name">标题标题Name-5</th>
    				<th  data-width="140px" data-field="price">标题标题Price-5</th>
    			
    			</tr>
    		</thead>
    	</table>
    	</div>
    	
    	
    	<script type="text/javascript" src="js/jquery.min.js" ></script>
    	
    	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
    	
    	<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script>
    	
    	<script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script>
    	<script type="text/javascript">
    
    		//自定义ajax方法
    		function ajaxRequest(params){
    			//debugger;
    			$.ajax({
    				url: "/bootstrap-table/data4.json",
    				type: "POST",
    				dataType: "json",
    				success: function(rs){
    					console.log(rs)
    					var message = rs.array;
    					
    					params.success({
    			            total: rs.total,
    			            rows: message
    			        });
    				},
    				error: function(rs){
    					console.log(rs)
    				}
    			});
    		}
    
    		/******注释4.表头固定 Start******/
    		$(function(){
    			var winH=$(window).height();
    			var tabH=Math.floor(winH*0.4)+"px";
    			var tabH2=Math.floor(winH*0.10)+"px";
                        //注释5.注意这里的.bootstrap-table-fixed-header可根据情况改变
    			$(".bootstrap-table-fixed-header .fixed-table-body tbody").css({'max-height':tabH,'overflow-Y':"scroll",'display':'block'})
    			$(".listboxline .fixed-table-body tbody").css({'max-height':tabH2,'overflow-Y':"scroll",'display':'block'})
    		});
    		/******表头固定 end******/
    		
    	</script>
    
    	
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5sdW9sZWk_size_16_color_FFFFFF_t_70]: /images/1602957419404.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5sdW9sZWk_size_16_color_FFFFFF_t_70 1]: /images/1602957406634.png