MVC_CRUD/Scripts/datatable/extensions/FixedHeader/examples/options/show-hide.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
	<title>FixedHeader example - Show / hide FixedHeader</title>
	<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../../css/fixedHeader.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
	<style type="text/css" class="init">
	
	</style>
	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../js/dataTables.fixedHeader.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
	</script>
	<script type="text/javascript" language="javascript" class="init">
	

$(document).ready(function() {
	var table = $('#example').DataTable( {
		fixedHeader: true
	} );

	var visible = true;
	var tableContainer = $(table.table().container());

	$('#toggle').on( 'click', function () {
		tableContainer.css( 'display', visible ? 'none' : 'block' );
		table.fixedHeader.adjust();

		visible = ! visible;
	} );
} );


	</script>
</head>
<body class="dt-example">
	<div class="container">
		<section>
			<h1>FixedHeader example <span>Show / hide FixedHeader</span></h1>
			<div class="info">
				<p>This example shows how FixedHeader can be enabled and disabled using the <a href="//datatables.net/reference/api/fixedHeader.adjust()"><code class="api" title=
				"FixedHeader API method">fixedHeader.adjust()</code></a> API method. This is can be particularly useful if FixedHeader is used for DataTables that are enclosed in
				tabs, so the header is disabled when the tab containing it is not visible, and also to then realign the FixedHeader when the table is then made visible again.</p>
				<p>This example shows a simple toggle button that will change the visibility of the DataTable. The <a href=
				"//datatables.net/reference/api/fixedHeader.adjust()"><code class="api" title="FixedHeader API method">fixedHeader.adjust()</code></a> method is called whenever
				the table's visibility is changed, as it would be in a tab show event handler.</p>
			</div><button id="toggle">Toggle table visibility</button>
			<table id="example" class="display" cellspacing="0" width="100%">
				<thead>