BootstrapTable冻结表头（二）

BootstrapTable冻结表头，这个方法根据客户需求，找了好久没找到合适的方法，第一次用的这种方法，BootstrapTable冻结表头（一）无意在正在开发的项目中发现了不知道那个大佬做的，挺不错的。记录一下

一、冻结表头效果

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

二、冻结表头demo2

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BootstrapTable冻结表头-Demo2</title>
		<!-- 引入bootstrap样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 引入bootstrap-table样式 -->
		<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>
	
	<!-- 注释2.bootstrap-table表格外div的class="bootstrap-table-fixed-header"，名字可以变但是JS也同步-->
	<!-- 注释3.列数过多会挤到一起，这时候就自己设置data-width="140px" -->
	<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>
	
	<!-- jquery -->
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!-- bootstrap -->
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	<!-- bootstrap-table -->
	<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>

BootstrapTable冻结表头（二）

猜你喜欢