Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 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>FixedHeader example - Enable / disable FixedHeader</title>
9
	<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
10
	<link rel="stylesheet" type="text/css" href="../../css/fixedHeader.datatables.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="//code.jquery.com/jquery-1.11.3.min.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.fixedHeader.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 table = $('#example').DataTable( {
26
		fixedHeader: true
27
	} );
28
 
29
	var visible = true;
30
	var tableContainer = $(table.table().container());
31
 
32
	$('#toggle').on( 'click', function () {
33
		tableContainer.css( 'display', visible ? 'none' : 'block' );
34
		table.fixedHeader.adjust();
35
 
36
		visible = ! visible;
37
	} );
38
} );
39
 
40
 
41
	</script>
42
</head>
43
 
44
<body class="dt-example">
45
	<div class="container">
46
		<section>
47
			<h1>FixedHeader example <span>Enable / disable FixedHeader</span></h1>
48
 
49
			<div class="info">
50
				<p>This example shows how FixedHeader can be enabled and disabled using the <a href="//datatables.net/reference/api/fixedHeader.update()"><code class="api" title=
51
				"FixedHeader API method">fixedHeader.update()</code></a> API method. This is can be particularly useful if FixedHeader is used for DataTables that are enclosed in
52
				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>
53
 
54
				<p>This example shows a simple toggle button that will change the visibility of the DataTable. The <a href=
55
				"//datatables.net/reference/api/fixedHeader.update()"><code class="api" title="FixedHeader API method">fixedHeader.update()</code></a> method is called whenever
56
				the table's visibility is changed, as it would be in a tab show event handler.</p>
57
			</div><button id="toggle">Toggle table visibility</button>
58
 
59
			<table id="example" class="display" cellspacing="0" width="100%">
60
				<thead>
61
					<tr>
62
						<th>Name</th>
63
						<th>Position</th>
64
						<th>Office</th>
65
						<th>Age</th>
66
						<th>Start date</th>
67
						<th>Salary</th>
68
					</tr>
69
				</thead>
70
 
71
				<tfoot>
72
					<tr>
73
						<th>Name</th>
74
						<th>Position</th>
75
						<th>Office</th>
76
						<th>Age</th>
77
						<th>Start date</th>
78
						<th>Salary</th>
79
					</tr>
80
				</tfoot>
81
 
82
				<tbody>
83
					<tr>
84
						<td>Tiger Nixon</td>
85
						<td>System Architect</td>
86
						<td>Edinburgh</td>
87
						<td>61</td>
88
						<td>2011/04/25</td>
89
						<td>$320,800</td>
90
					</tr>
91
					<tr>
92
						<td>Garrett Winters</td>
93
						<td>Accountant</td>
94
						<td>Tokyo</td>
95
						<td>63</td>
96
						<td>2011/07/25</td>
97
						<td>$170,750</td>
98
					</tr>
99
					<tr>
100
						<td>Ashton Cox</td>
101
						<td>Junior Technical Author</td>
102
						<td>San Francisco</td>
103
						<td>66</td>
104
						<td>2009/01/12</td>
105
						<td>$86,000</td>
106
					</tr>
107
					<tr>
108
						<td>Cedric Kelly</td>
109
						<td>Senior Javascript Developer</td>
110
						<td>Edinburgh</td>
111
						<td>22</td>
112
						<td>2012/03/29</td>
113
						<td>$433,060</td>
114
					</tr>
115
					<tr>
116
						<td>Airi Satou</td>
117
						<td>Accountant</td>
118
						<td>Tokyo</td>
119
						<td>33</td>
120
						<td>2008/11/28</td>
121
						<td>$162,700</td>
122
					</tr>
123
					<tr>
124
						<td>Brielle Williamson</td>
125
						<td>Integration Specialist</td>
126
						<td>New York</td>
127
						<td>61</td>
128
						<td>2012/12/02</td>
129
						<td>$372,000</td>
130
					</tr>
131
					<tr>
132
						<td>Herrod Chandler</td>
133
						<td>Sales Assistant</td>
134
						<td>San Francisco</td>
135
						<td>59</td>
136
						<td>2012/08/06</td>
137
						<td>$137,500</td>
138
					</tr>
139
					<tr>
140
						<td>Rhona Davidson</td>
141
						<td>Integration Specialist</td>
142
						<td>Tokyo</td>
143
						<td>55</td>
144
						<td>2010/10/14</td>
145
						<td>$327,900</td>
146
					</tr>
147
					<tr>
148
						<td>Colleen Hurst</td>
149
						<td>Javascript Developer</td>
150
						<td>San Francisco</td>
151
						<td>39</td>
152
						<td>2009/09/15</td>
153
						<td>$205,500</td>
154
					</tr>
155
					<tr>
156
						<td>Sonya Frost</td>
157
						<td>Software Engineer</td>
158
						<td>Edinburgh</td>
159
						<td>23</td>
160
						<td>2008/12/13</td>
161
						<td>$103,600</td>
162
					</tr>
163
					<tr>
164
						<td>Jena Gaines</td>
165
						<td>Office Manager</td>
166
						<td>London</td>
167
						<td>30</td>
168
						<td>2008/12/19</td>
169
						<td>$90,560</td>
170
					</tr>
171
					<tr>
172
						<td>Quinn Flynn</td>
173
						<td>Support Lead</td>
174
						<td>Edinburgh</td>
175
						<td>22</td>
176
						<td>2013/03/03</td>
177
						<td>$342,000</td>
178
					</tr>
179
					<tr>
180
						<td>Charde Marshall</td>
181
						<td>Regional Director</td>
182
						<td>San Francisco</td>
183
						<td>36</td>
184
						<td>2008/10/16</td>
185
						<td>$470,600</td>
186
					</tr>
187
					<tr>
188
						<td>Haley Kennedy</td>
189
						<td>Senior Marketing Designer</td>
190
						<td>London</td>
191
						<td>43</td>
192
						<td>2012/12/18</td>
193
						<td>$313,500</td>
194
					</tr>
195
					<tr>
196
						<td>Tatyana Fitzpatrick</td>
197
						<td>Regional Director</td>
198
						<td>London</td>
199
						<td>19</td>
200
						<td>2010/03/17</td>
201
						<td>$385,750</td>
202
					</tr>
203
					<tr>
204
						<td>Michael Silva</td>
205
						<td>Marketing Designer</td>
206
						<td>London</td>
207
						<td>66</td>
208
						<td>2012/11/27</td>
209
						<td>$198,500</td>
210
					</tr>
211
					<tr>
212
						<td>Paul Byrd</td>
213
						<td>Chief Financial Officer (CFO)</td>
214
						<td>New York</td>
215
						<td>64</td>
216
						<td>2010/06/09</td>
217
						<td>$725,000</td>
218
					</tr>
219
					<tr>
220
						<td>Gloria Little</td>
221
						<td>Systems Administrator</td>
222
						<td>New York</td>
223
						<td>59</td>
224
						<td>2009/04/10</td>
225
						<td>$237,500</td>
226
					</tr>
227
					<tr>
228
						<td>Bradley Greer</td>
229
						<td>Software Engineer</td>
230
						<td>London</td>
231
						<td>41</td>
232
						<td>2012/10/13</td>
233
						<td>$132,000</td>
234
					</tr>
235
					<tr>
236
						<td>Dai Rios</td>
237
						<td>Personnel Lead</td>
238
						<td>Edinburgh</td>
239
						<td>35</td>
240
						<td>2012/09/26</td>
241
						<td>$217,500</td>
242
					</tr>
243
					<tr>
244
						<td>Jenette Caldwell</td>
245
						<td>Development Lead</td>
246
						<td>New York</td>
247
						<td>30</td>
248
						<td>2011/09/03</td>
249
						<td>$345,000</td>
250
					</tr>
251
					<tr>
252
						<td>Yuri Berry</td>
253
						<td>Chief Marketing Officer (CMO)</td>
254
						<td>New York</td>
255
						<td>40</td>
256
						<td>2009/06/25</td>
257
						<td>$675,000</td>
258
					</tr>
259
					<tr>
260
						<td>Caesar Vance</td>
261
						<td>Pre-Sales Support</td>
262
						<td>New York</td>
263
						<td>21</td>
264
						<td>2011/12/12</td>
265
						<td>$106,450</td>
266
					</tr>
267
					<tr>
268
						<td>Doris Wilder</td>
269
						<td>Sales Assistant</td>
270
						<td>Sidney</td>
271
						<td>23</td>
272
						<td>2010/09/20</td>
273
						<td>$85,600</td>
274
					</tr>
275
					<tr>
276
						<td>Angelica Ramos</td>
277
						<td>Chief Executive Officer (CEO)</td>
278
						<td>London</td>
279
						<td>47</td>
280
						<td>2009/10/09</td>
281
						<td>$1,200,000</td>
282
					</tr>
283
					<tr>
284
						<td>Gavin Joyce</td>
285
						<td>Developer</td>
286
						<td>Edinburgh</td>
287
						<td>42</td>
288
						<td>2010/12/22</td>
289
						<td>$92,575</td>
290
					</tr>
291
					<tr>
292
						<td>Jennifer Chang</td>
293
						<td>Regional Director</td>
294
						<td>Singapore</td>
295
						<td>28</td>
296
						<td>2010/11/14</td>
297
						<td>$357,650</td>
298
					</tr>
299
					<tr>
300
						<td>Brenden Wagner</td>
301
						<td>Software Engineer</td>
302
						<td>San Francisco</td>
303
						<td>28</td>
304
						<td>2011/06/07</td>
305
						<td>$206,850</td>
306
					</tr>
307
					<tr>
308
						<td>Fiona Green</td>
309
						<td>Chief Operating Officer (COO)</td>
310
						<td>San Francisco</td>
311
						<td>48</td>
312
						<td>2010/03/11</td>
313
						<td>$850,000</td>
314
					</tr>
315
					<tr>
316
						<td>Shou Itou</td>
317
						<td>Regional Marketing</td>
318
						<td>Tokyo</td>
319
						<td>20</td>
320
						<td>2011/08/14</td>
321
						<td>$163,000</td>
322
					</tr>
323
					<tr>
324
						<td>Michelle House</td>
325
						<td>Integration Specialist</td>
326
						<td>Sidney</td>
327
						<td>37</td>
328
						<td>2011/06/02</td>
329
						<td>$95,400</td>
330
					</tr>
331
					<tr>
332
						<td>Suki Burks</td>
333
						<td>Developer</td>
334
						<td>London</td>
335
						<td>53</td>
336
						<td>2009/10/22</td>
337
						<td>$114,500</td>
338
					</tr>
339
					<tr>
340
						<td>Prescott Bartlett</td>
341
						<td>Technical Author</td>
342
						<td>London</td>
343
						<td>27</td>
344
						<td>2011/05/07</td>
345
						<td>$145,000</td>
346
					</tr>
347
					<tr>
348
						<td>Gavin Cortez</td>
349
						<td>Team Leader</td>
350
						<td>San Francisco</td>
351
						<td>22</td>
352
						<td>2008/10/26</td>
353
						<td>$235,500</td>
354
					</tr>
355
					<tr>
356
						<td>Martena Mccray</td>
357
						<td>Post-Sales support</td>
358
						<td>Edinburgh</td>
359
						<td>46</td>
360
						<td>2011/03/09</td>
361
						<td>$324,050</td>
362
					</tr>
363
					<tr>
364
						<td>Unity Butler</td>
365
						<td>Marketing Designer</td>
366
						<td>San Francisco</td>
367
						<td>47</td>
368
						<td>2009/12/09</td>
369
						<td>$85,675</td>
370
					</tr>
371
					<tr>
372
						<td>Howard Hatfield</td>
373
						<td>Office Manager</td>
374
						<td>San Francisco</td>
375
						<td>51</td>
376
						<td>2008/12/16</td>
377
						<td>$164,500</td>
378
					</tr>
379
					<tr>
380
						<td>Hope Fuentes</td>
381
						<td>Secretary</td>
382
						<td>San Francisco</td>
383
						<td>41</td>
384
						<td>2010/02/12</td>
385
						<td>$109,850</td>
386
					</tr>
387
					<tr>
388
						<td>Vivian Harrell</td>
389
						<td>Financial Controller</td>
390
						<td>San Francisco</td>
391
						<td>62</td>
392
						<td>2009/02/14</td>
393
						<td>$452,500</td>
394
					</tr>
395
					<tr>
396
						<td>Timothy Mooney</td>
397
						<td>Office Manager</td>
398
						<td>London</td>
399
						<td>37</td>
400
						<td>2008/12/11</td>
401
						<td>$136,200</td>
402
					</tr>
403
					<tr>
404
						<td>Jackson Bradshaw</td>
405
						<td>Director</td>
406
						<td>New York</td>
407
						<td>65</td>
408
						<td>2008/09/26</td>
409
						<td>$645,750</td>
410
					</tr>
411
					<tr>
412
						<td>Olivia Liang</td>
413
						<td>Support Engineer</td>
414
						<td>Singapore</td>
415
						<td>64</td>
416
						<td>2011/02/03</td>
417
						<td>$234,500</td>
418
					</tr>
419
					<tr>
420
						<td>Bruno Nash</td>
421
						<td>Software Engineer</td>
422
						<td>London</td>
423
						<td>38</td>
424
						<td>2011/05/03</td>
425
						<td>$163,500</td>
426
					</tr>
427
					<tr>
428
						<td>Sakura Yamamoto</td>
429
						<td>Support Engineer</td>
430
						<td>Tokyo</td>
431
						<td>37</td>
432
						<td>2009/08/19</td>
433
						<td>$139,575</td>
434
					</tr>
435
					<tr>
436
						<td>Thor Walton</td>
437
						<td>Developer</td>
438
						<td>New York</td>
439
						<td>61</td>
440
						<td>2013/08/11</td>
441
						<td>$98,540</td>
442
					</tr>
443
					<tr>
444
						<td>Finn Camacho</td>
445
						<td>Support Engineer</td>
446
						<td>San Francisco</td>
447
						<td>47</td>
448
						<td>2009/07/07</td>
449
						<td>$87,500</td>
450
					</tr>
451
					<tr>
452
						<td>Serge Baldwin</td>
453
						<td>Data Coordinator</td>
454
						<td>Singapore</td>
455
						<td>64</td>
456
						<td>2012/04/09</td>
457
						<td>$138,575</td>
458
					</tr>
459
					<tr>
460
						<td>Zenaida Frank</td>
461
						<td>Software Engineer</td>
462
						<td>New York</td>
463
						<td>63</td>
464
						<td>2010/01/04</td>
465
						<td>$125,250</td>
466
					</tr>
467
					<tr>
468
						<td>Zorita Serrano</td>
469
						<td>Software Engineer</td>
470
						<td>San Francisco</td>
471
						<td>56</td>
472
						<td>2012/06/01</td>
473
						<td>$115,000</td>
474
					</tr>
475
					<tr>
476
						<td>Jennifer Acosta</td>
477
						<td>Junior Javascript Developer</td>
478
						<td>Edinburgh</td>
479
						<td>43</td>
480
						<td>2013/02/01</td>
481
						<td>$75,650</td>
482
					</tr>
483
					<tr>
484
						<td>Cara Stevens</td>
485
						<td>Sales Assistant</td>
486
						<td>New York</td>
487
						<td>46</td>
488
						<td>2011/12/06</td>
489
						<td>$145,600</td>
490
					</tr>
491
					<tr>
492
						<td>Hermione Butler</td>
493
						<td>Regional Director</td>
494
						<td>London</td>
495
						<td>47</td>
496
						<td>2011/03/21</td>
497
						<td>$356,250</td>
498
					</tr>
499
					<tr>
500
						<td>Lael Greer</td>
501
						<td>Systems Administrator</td>
502
						<td>London</td>
503
						<td>21</td>
504
						<td>2009/02/27</td>
505
						<td>$103,500</td>
506
					</tr>
507
					<tr>
508
						<td>Jonas Alexander</td>
509
						<td>Developer</td>
510
						<td>San Francisco</td>
511
						<td>30</td>
512
						<td>2010/07/14</td>
513
						<td>$86,500</td>
514
					</tr>
515
					<tr>
516
						<td>Shad Decker</td>
517
						<td>Regional Director</td>
518
						<td>Edinburgh</td>
519
						<td>51</td>
520
						<td>2008/11/13</td>
521
						<td>$183,000</td>
522
					</tr>
523
					<tr>
524
						<td>Michael Bruce</td>
525
						<td>Javascript Developer</td>
526
						<td>Singapore</td>
527
						<td>29</td>
528
						<td>2011/06/27</td>
529
						<td>$183,000</td>
530
					</tr>
531
					<tr>
532
						<td>Donna Snider</td>
533
						<td>Customer Support</td>
534
						<td>New York</td>
535
						<td>27</td>
536
						<td>2011/01/25</td>
537
						<td>$112,000</td>
538
					</tr>
539
				</tbody>
540
			</table>
541
 
542
			<ul class="tabs">
543
				<li class="active">Javascript</li>
544
				<li>HTML</li>
545
				<li>CSS</li>
546
				<li>Ajax</li>
547
				<li>Server-side script</li>
548
			</ul>
549
 
550
			<div class="tabs">
551
				<div class="js">
552
					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
553
	var table = $('#example').DataTable( {
554
		fixedHeader: true
555
	} );
556
 
557
	var visible = true;
558
	var tableContainer = $(table.table().container());
559
 
560
	$('#toggle').on( 'click', function () {
561
		tableContainer.css( 'display', visible ? 'none' : 'block' );
562
		table.fixedHeader.adjust();
563
 
564
		visible = ! visible;
565
	} );
566
} );</code>
567
 
568
					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
569
 
570
					<ul>
571
						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
572
						<li><a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a></li>
573
						<li><a href="../../js/dataTables.fixedHeader.js">../../js/dataTables.fixedHeader.js</a></li>
574
					</ul>
575
				</div>
576
 
577
				<div class="table">
578
					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
579
				</div>
580
 
581
				<div class="css">
582
					<div>
583
						<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
584
						additional CSS used is shown below:</p><code class="multiline language-css"></code>
585
					</div>
586
 
587
					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
588
 
589
					<ul>
590
						<li><a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a></li>
591
						<li><a href="../../css/fixedHeader.datatables.css">../../css/fixedHeader.datatables.css</a></li>
592
					</ul>
593
				</div>
594
 
595
				<div class="ajax">
596
					<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
597
					loaded.</p>
598
				</div>
599
 
600
				<div class="php">
601
					<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
602
					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
603
					documentation</a>.</p>
604
				</div>
605
			</div>
606
		</section>
607
	</div>
608
 
609
	<section>
610
		<div class="footer">
611
			<div class="gradient"></div>
612
 
613
			<div class="liner">
614
				<h2>Other examples</h2>
615
 
616
				<div class="toc">
617
					<div class="toc-group">
618
						<h3><a href="./index.html">Initialisation and options</a></h3>
619
						<ul class="toc active">
620
							<li><a href="./simple.html">Basic initialisation</a></li>
621
							<li><a href="./header_footer.html">Header and footer fixed</a></li>
622
							<li><a href="./two_tables.html">Multiple tables</a></li>
623
							<li><a href="./offset.html">Offset</a></li>
624
							<li class="active"><a href="./enable-disable.html">Enable / disable FixedHeader</a></li>
625
							<li><a href="./new.html">Alternative initialisation</a></li>
626
						</ul>
627
					</div>
628
 
629
					<div class="toc-group">
630
						<h3><a href="../styling/index.html">Styling</a></h3>
631
						<ul class="toc">
632
							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
633
							<li><a href="../styling/foundation.html">Foundation</a></li>
634
							<li><a href="../styling/jqueryui.html">jQuery UI styling</a></li>
635
						</ul>
636
					</div>
637
 
638
					<div class="toc-group">
639
						<h3><a href="../integration/index.html">Integration with other DataTables extensions</a></h3>
640
						<ul class="toc">
641
							<li><a href="../integration/responsive.html">Responsive integration</a></li>
642
							<li><a href="../integration/colreorder.html">ColReorder integration</a></li>
643
						</ul>
644
					</div>
645
				</div>
646
 
647
				<div class="epilogue">
648
					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
649
					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
650
					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
651
 
652
					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
653
					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
654
				</div>
655
			</div>
656
		</div>
657
	</section>
658
</body>
659
</html>