SimpleTaskSystem.Web/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/datatables/extensions/FixedHeader/examples/simple.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 - Basic initialisation</title>
	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../css/dataTables.fixedHeader.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="../../../media/js/jquery.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();

	new $.fn.dataTable.FixedHeader( table );
} );


	</script>
</head>

<body class="dt-example">
	<div class="container">
		<section>
			<h1>FixedHeader example <span>Basic initialisation</span></h1>

			<div class="info">
				<p>When displaying large amounts of data in a table, it can often be useful for the end user to have
				the column titles (the <code class="tag" title="HTML tag">thead</code> element as a whole in fact)
				always visible. This is particularly true if using DataTables with pagination disabled, or the display
				length is set to a high value.</p>

				<p>The FixedHeader extension for DataTables will ensure that your column titles will scroll with the
				page, showing at the top of the table at all times. Try the demo shown below - you might want to try
				resizing the window for full effect! Note also that the column titles remain clickable to perform
				sorting on the table.</p>

				<p>FixedHeader is initialised using the constructor <code>new $.fn.dataTable.FixedHeader();</code> -
				shown below.</p>
			</div>

			<table id="example" class="display" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>Name</th>
						<th>Position</th>
						<th>Office</th>
						<th>Age</th>