[ceph.git] / ceph / src / pybind / mgr / dashboard / static / AdminLTE-2.3.7 / plugins / datatables / extensions / Scroller / examples / state_saving.html

<!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>Scroller example - State saving</title>
	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../css/dataTables.scroller.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.scroller.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() {
	$('#example').DataTable( {
		ajax:           "data/2500.txt",
		deferRender:    true,
		dom:            "frtiS",
		scrollY:        200,
		scrollCollapse: true,
		stateSave:      true
	} );
} );


	</script>
</head>

<body class="dt-example">
	<div class="container">
		<section>
			<h1>Scroller example <span>State saving</span></h1>

			<div class="info">
				<p>Scroller will automatically integrate with DataTables in order to save the scrolling position of the
				table, if state saving is enabled in the DataTable (<a href=
				"//datatables.net/reference/option/stateSave"><code class="option" title=
				"DataTables initialisation option">stateSave<span>DT</span></code></a>). This example shows that in
				practice - to demonstrate, scroll the table and then reload the page.</p>
			</div>

			<table id="example" class="display" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>ID</th>
						<th>First name</th>
						<th>Last name</th>
						<th>ZIP / Post code</th>
						<th>Country</th>
					</tr>
				</thead>
			</table>

			<ul class="tabs">
				<li class="active">Javascript</li>
				<li>HTML</li>
				<li>CSS</li>
				<li>Ajax</li>
				<li>Server-side script</li>
			</ul>

			<div class="tabs">
				<div class="js">
					<p>The Javascript shown below is used to initialise the table shown in this
					example:</p><code class="multiline brush: js;">$(document).ready(function() {
	$('#example').DataTable( {
		ajax:           &quot;data/2500.txt&quot;,
		deferRender:    true,
		dom:            &quot;frtiS&quot;,
		scrollY:        200,
		scrollCollapse: true,
		stateSave:      true
	} );
} );</code>

					<p>In addition to the above code, the following Javascript library files are loaded for use in this
					example:</p>

					<ul>
						<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
						<li><a href=
						"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
						<li><a href="../js/dataTables.scroller.js">../js/dataTables.scroller.js</a></li>
					</ul>
				</div>

				<div class="table">
					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
					DataTables:</p>
				</div>

				<div class="css">
					<div>
						<p>This example uses a little bit of additional CSS beyond what is loaded from the library
						files (below), in order to correctly display the table. The additional CSS used is shown
						below:</p><code class="multiline brush: js;"></code>
					</div>

					<p>The following CSS library files are loaded for use in this example to provide the styling of the
					table:</p>

					<ul>
						<li><a href=
						"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
						<li><a href="../css/dataTables.scroller.css">../css/dataTables.scroller.css</a></li>
					</ul>
				</div>

				<div class="ajax">
					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
					will update automatically as any additional data is loaded.</p>
				</div>

				<div class="php">
					<p>The script used to perform the server-side processing for this table is shown below. Please note
					that this is just an example script using PHP. Server-side processing scripts can be written in any
					language, using <a href="//datatables.net/manual/server-side">the protocol described in the
					DataTables documentation</a>.</p>
				</div>
			</div>
		</section>
	</div>

	<section>
		<div class="footer">
			<div class="gradient"></div>

			<div class="liner">
				<h2>Other examples</h2>

				<div class="toc">
					<div class="toc-group">
						<h3><a href="./index.html">Examples</a></h3>
						<ul class="toc active">
							<li><a href="./simple.html">Basic initialisation</a></li>
							<li class="active"><a href="./state_saving.html">State saving</a></li>
							<li><a href="./large_js_source.html">Client-side data source (50,000 rows)</a></li>
							<li><a href="./server-side_processing.html">Server-side processing (5,000,000
							rows)</a></li>
							<li><a href="./api_scrolling.html">API</a></li>
						</ul>
					</div>
				</div>

				<div class="epilogue">
					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
					information about its API properties and methods.<br>
					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
					DataTables.</p>

					<p class="copyright">DataTables designed and created by <a href=
					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
				</div>
			</div>
		</div>
	</section>
</body>
</html>
Commit	Line	Data
31f18b77 FG	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta charset="utf-8">
	5	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	6	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
	7
	8	<title>Scroller example - State saving</title>
	9	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
	10	<link rel="stylesheet" type="text/css" href="../css/dataTables.scroller.css">
	11	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
	12	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
	13	<style type="text/css" class="init">
	14
	15	</style>
	16	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
	17	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
	18	<script type="text/javascript" language="javascript" src="../js/dataTables.scroller.js"></script>
	19	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
	20	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
	21	<script type="text/javascript" language="javascript" class="init">
	22
	23
	24	$(document).ready(function() {
	25	$('#example').DataTable( {
	26	ajax: "data/2500.txt",
	27	deferRender: true,
	28	dom: "frtiS",
	29	scrollY: 200,
	30	scrollCollapse: true,
	31	stateSave: true
	32	} );
	33	} );
	34
	35
	36	</script>
	37	</head>
	38
	39	<body class="dt-example">
	40	<div class="container">
	41	<section>
	42	<h1>Scroller example <span>State saving</span></h1>
	43
	44	<div class="info">
	45	<p>Scroller will automatically integrate with DataTables in order to save the scrolling position of the
	46	table, if state saving is enabled in the DataTable (<a href=
	47	"//datatables.net/reference/option/stateSave"><code class="option" title=
	48	"DataTables initialisation option">stateSave<span>DT</span></code></a>). This example shows that in
	49	practice - to demonstrate, scroll the table and then reload the page.</p>
	50	</div>
	51
	52	<table id="example" class="display" cellspacing="0" width="100%">
	53	<thead>
	54	<tr>
	55	<th>ID</th>
	56	<th>First name</th>
	57	<th>Last name</th>
	58	<th>ZIP / Post code</th>
	59	<th>Country</th>
	60	</tr>
	61	</thead>
	62	</table>
	63
	64	<ul class="tabs">
65	<li class="active">Javascript</li>
66	<li>HTML</li>
67	<li>CSS</li>
68	<li>Ajax</li>
69	<li>Server-side script</li>
70	</ul>
71
72	<div class="tabs">
73	<div class="js">
74	<p>The Javascript shown below is used to initialise the table shown in this
75	example:</p><code class="multiline brush: js;">$(document).ready(function() {
76	$('#example').DataTable( {
77	ajax: "data/2500.txt",
78	deferRender: true,
79	dom: "frtiS",
80	scrollY: 200,
81	scrollCollapse: true,
82	stateSave: true
83	} );
84	} );</code>
85
86	<p>In addition to the above code, the following Javascript library files are loaded for use in this
87	example:</p>
88
89	<ul>
90	<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
91	<li><a href=
92	"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
93	<li><a href="../js/dataTables.scroller.js">../js/dataTables.scroller.js</a></li>
94	</ul>
95	</div>
96
97	<div class="table">
98	<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
99	DataTables:</p>
100	</div>
101
102	<div class="css">
103	<div>
104	<p>This example uses a little bit of additional CSS beyond what is loaded from the library
105	files (below), in order to correctly display the table. The additional CSS used is shown
106	below:</p><code class="multiline brush: js;"></code>
107	</div>
108
109	<p>The following CSS library files are loaded for use in this example to provide the styling of the
110	table:</p>
111
112	<ul>
113	<li><a href=
114	"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
115	<li><a href="../css/dataTables.scroller.css">../css/dataTables.scroller.css</a></li>
116	</ul>
117	</div>
118
119	<div class="ajax">
120	<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
121	will update automatically as any additional data is loaded.</p>
122	</div>
123
124	<div class="php">
125	<p>The script used to perform the server-side processing for this table is shown below. Please note
126	that this is just an example script using PHP. Server-side processing scripts can be written in any
127	language, using <a href="//datatables.net/manual/server-side">the protocol described in the
128	DataTables documentation</a>.</p>
129	</div>
130	</div>
131	</section>
132	</div>
133
134	<section>
135	<div class="footer">
136	<div class="gradient"></div>
137
138	<div class="liner">
139	<h2>Other examples</h2>
140
141	<div class="toc">
142	<div class="toc-group">
143	<h3><a href="./index.html">Examples</a></h3>
144	<ul class="toc active">
145	<li><a href="./simple.html">Basic initialisation</a></li>
146	<li class="active"><a href="./state_saving.html">State saving</a></li>
147	<li><a href="./large_js_source.html">Client-side data source (50,000 rows)</a></li>
148	<li><a href="./server-side_processing.html">Server-side processing (5,000,000
149	rows)</a></li>
150	<li><a href="./api_scrolling.html">API</a></li>
151	</ul>
152	</div>
153	</div>
154
155	<div class="epilogue">
156	<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
157	information about its API properties and methods.<br>
158	Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
159	<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
160	DataTables.</p>
161
162	<p class="copyright">DataTables designed and created by <a href=
163	"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
164	DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
165	</div>
166	</div>
167	</div>
168	</section>
169	</body>
170	</html>