[ceph.git] / ceph / src / pybind / mgr / dashboard / static / AdminLTE-2.3.7 / plugins / datatables / extensions / Scroller / examples / large_js_source.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 - Client-side data source (50,000 rows)</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() {
		var data = [];
		for ( var i=0 ; i<50000 ; i++ ) {
			data.push( [ i, i, i, i, i ] );
		}
		
		var oTable = $('#example').dataTable( {
			data:           data,
			deferRender:    true,
			dom:            "frtiS",
			scrollY:        200,
			scrollCollapse: true
		} );
	} );


	</script>
</head>

<body class="dt-example">
	<div class="container">
		<section>
			<h1>Scroller example <span>Client-side data source (50,000 rows)</span></h1>

			<div class="info">
				<p>This example is completely artificial in that the data generated is created on the client-side by
				just looping around a Javascript array and then passing that to DataTables. However, it does show quite
				nicely that DataTables and Scroller can cope with large amounts of data on the client-side quite
				nicely. Typically data such as this would be Ajax sourced and server-side processing should be
				considered.</p>

				<p>Please be aware that the performance of this page will depend on your browser as the array of data
				is generated - for example IE6 will crawl!</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() {
		var data = [];
		for ( var i=0 ; i&lt;50000 ; i++ ) {
			data.push( [ i, i, i, i, i ] );
		}
		
		var oTable = $('#example').dataTable( {
			data:           data,
			deferRender:    true,
			dom:            &quot;frtiS&quot;,
			scrollY:        200,
			scrollCollapse: 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><a href="./state_saving.html">State saving</a></li>
							<li class="active"><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 - Client-side data source (50,000 rows)</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	var data = [];
	26	for ( var i=0 ; i<50000 ; i++ ) {
	27	data.push( [ i, i, i, i, i ] );
	28	}
	29
	30	var oTable = $('#example').dataTable( {
	31	data: data,
	32	deferRender: true,
	33	dom: "frtiS",
	34	scrollY: 200,
	35	scrollCollapse: true
	36	} );
	37	} );
	38
	39
	40	</script>
	41	</head>
	42
	43	<body class="dt-example">
	44	<div class="container">
	45	<section>
	46	<h1>Scroller example <span>Client-side data source (50,000 rows)</span></h1>
	47
	48	<div class="info">
	49	<p>This example is completely artificial in that the data generated is created on the client-side by
	50	just looping around a Javascript array and then passing that to DataTables. However, it does show quite
	51	nicely that DataTables and Scroller can cope with large amounts of data on the client-side quite
	52	nicely. Typically data such as this would be Ajax sourced and server-side processing should be
	53	considered.</p>
	54
	55	<p>Please be aware that the performance of this page will depend on your browser as the array of data
	56	is generated - for example IE6 will crawl!</p>
	57	</div>
	58
	59	<table id="example" class="display" cellspacing="0" width="100%">
	60	<thead>
	61	<tr>
	62	<th>ID</th>
	63	<th>First name</th>
	64	<th>Last name</th>
65	<th>ZIP / Post code</th>
66	<th>Country</th>
67	</tr>
68	</thead>
69	</table>
70
71	<ul class="tabs">
72	<li class="active">Javascript</li>
73	<li>HTML</li>
74	<li>CSS</li>
75	<li>Ajax</li>
76	<li>Server-side script</li>
77	</ul>
78
79	<div class="tabs">
80	<div class="js">
81	<p>The Javascript shown below is used to initialise the table shown in this
82	example:</p><code class="multiline brush: js;">$(document).ready(function() {
83	var data = [];
84	for ( var i=0 ; i<50000 ; i++ ) {
85	data.push( [ i, i, i, i, i ] );
86	}
87
88	var oTable = $('#example').dataTable( {
89	data: data,
90	deferRender: true,
91	dom: "frtiS",
92	scrollY: 200,
93	scrollCollapse: true
94	} );
95	} );</code>
96
97	<p>In addition to the above code, the following Javascript library files are loaded for use in this
98	example:</p>
99
100	<ul>
101	<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
102	<li><a href=
103	"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
104	<li><a href="../js/dataTables.scroller.js">../js/dataTables.scroller.js</a></li>
105	</ul>
106	</div>
107
108	<div class="table">
109	<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
110	DataTables:</p>
111	</div>
112
113	<div class="css">
114	<div>
115	<p>This example uses a little bit of additional CSS beyond what is loaded from the library
116	files (below), in order to correctly display the table. The additional CSS used is shown
117	below:</p><code class="multiline brush: js;"></code>
118	</div>
119
120	<p>The following CSS library files are loaded for use in this example to provide the styling of the
121	table:</p>
122
123	<ul>
124	<li><a href=
125	"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
126	<li><a href="../css/dataTables.scroller.css">../css/dataTables.scroller.css</a></li>
127	</ul>
128	</div>
129
130	<div class="ajax">
131	<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
132	will update automatically as any additional data is loaded.</p>
133	</div>
134
135	<div class="php">
136	<p>The script used to perform the server-side processing for this table is shown below. Please note
137	that this is just an example script using PHP. Server-side processing scripts can be written in any
138	language, using <a href="//datatables.net/manual/server-side">the protocol described in the
139	DataTables documentation</a>.</p>
140	</div>
141	</div>
142	</section>
143	</div>
144
145	<section>
146	<div class="footer">
147	<div class="gradient"></div>
148
149	<div class="liner">
150	<h2>Other examples</h2>
151
152	<div class="toc">
153	<div class="toc-group">
154	<h3><a href="./index.html">Examples</a></h3>
155	<ul class="toc active">
156	<li><a href="./simple.html">Basic initialisation</a></li>
157	<li><a href="./state_saving.html">State saving</a></li>
158	<li class="active"><a href="./large_js_source.html">Client-side data source (50,000
159	rows)</a></li>
160	<li><a href="./server-side_processing.html">Server-side processing (5,000,000
161	rows)</a></li>
162	<li><a href="./api_scrolling.html">API</a></li>
163	</ul>
164	</div>
165	</div>
166
167	<div class="epilogue">
168	<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
169	information about its API properties and methods.<br>
170	Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
171	<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
172	DataTables.</p>
173
174	<p class="copyright">DataTables designed and created by <a href=
175	"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
176	DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
177	</div>
178	</div>
179	</div>
180	</section>
181	</body>
182	</html>