Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
875 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>DataTables example - Live DOM ordering</title>
9
	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
10
	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
11
	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
12
	<style type="text/css" class="init">
13
 
14
	</style>
15
	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
16
	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
17
	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
18
	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
19
	<script type="text/javascript" language="javascript" class="init">
20
 
21
 
22
/* Create an array with the values of all the input boxes in a column */
23
$.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
24
{
25
	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
26
		return $('input', td).val();
27
	} );
28
}
29
 
30
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
31
$.fn.dataTable.ext.order['dom-text-numeric'] = function  ( settings, col )
32
{
33
	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
34
		return $('input', td).val() * 1;
35
	} );
36
}
37
 
38
/* Create an array with the values of all the select options in a column */
39
$.fn.dataTable.ext.order['dom-select'] = function  ( settings, col )
40
{
41
	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
42
		return $('select', td).val();
43
	} );
44
}
45
 
46
/* Create an array with the values of all the checkboxes in a column */
47
$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
48
{
49
	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
50
		return $('input', td).prop('checked') ? '1' : '0';
51
	} );
52
}
53
 
54
/* Initialise the table with the required column ordering data types */
55
$(document).ready(function() {
56
	$('#example').DataTable( {
57
		"columns": [
58
			null,
59
			{ "orderDataType": "dom-text-numeric" },
60
			{ "orderDataType": "dom-text", type: 'string' },
61
			{ "orderDataType": "dom-select" }
62
		]
63
	} );
64
} );
65
 
66
 
67
	</script>
68
</head>
69
 
70
<body class="dt-example">
71
	<div class="container">
72
		<section>
73
			<h1>DataTables example <span>Live DOM ordering</span></h1>
74
 
75
			<div class="info">
76
				<p>This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's
77
				initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not
78
				reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is
79
				much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p>
80
 
81
				<p>The example below shows the first two columns as normal text with ordering as you would expect. The following columns all have a form input element of different
82
				kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.</p>
83
 
84
				<p>This is a fairly simple example, but it you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit
85
				yourself. You could also update the ordering live as a user in entered data into a form using an event handler calling <a href=
86
				"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> or <a href=
87
				"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
88
			</div>
89
 
90
			<table id="example" class="display" cellspacing="0" width="100%">
91
				<thead>
92
					<tr>
93
						<th>Name</th>
94
						<th>Age</th>
95
						<th>Position</th>
96
						<th>Office</th>
97
					</tr>
98
				</thead>
99
 
100
				<tfoot>
101
					<tr>
102
						<th>Name</th>
103
						<th>Age</th>
104
						<th>Position</th>
105
						<th>Office</th>
106
					</tr>
107
				</tfoot>
108
 
109
				<tbody>
110
					<tr>
111
						<td>Tiger Nixon</td>
112
						<td><input type="text" id="row-1-age" name="row-1-age" value="61"></td>
113
						<td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"></td>
114
						<td><select size="1" id="row-1-office" name="row-1-office">
115
							<option value="Edinburgh" selected="selected">
116
								Edinburgh
117
							</option>
118
 
119
							<option value="London">
120
								London
121
							</option>
122
 
123
							<option value="New York">
124
								New York
125
							</option>
126
 
127
							<option value="San Francisco">
128
								San Francisco
129
							</option>
130
 
131
							<option value="Tokyo">
132
								Tokyo
133
							</option>
134
						</select></td>
135
					</tr>
136
					<tr>
137
						<td>Garrett Winters</td>
138
						<td><input type="text" id="row-2-age" name="row-2-age" value="63"></td>
139
						<td><input type="text" id="row-2-position" name="row-2-position" value="Accountant"></td>
140
						<td><select size="1" id="row-2-office" name="row-2-office">
141
							<option value="Edinburgh">
142
								Edinburgh
143
							</option>
144
 
145
							<option value="London">
146
								London
147
							</option>
148
 
149
							<option value="New York">
150
								New York
151
							</option>
152
 
153
							<option value="San Francisco">
154
								San Francisco
155
							</option>
156
 
157
							<option value="Tokyo" selected="selected">
158
								Tokyo
159
							</option>
160
						</select></td>
161
					</tr>
162
					<tr>
163
						<td>Ashton Cox</td>
164
						<td><input type="text" id="row-3-age" name="row-3-age" value="66"></td>
165
						<td><input type="text" id="row-3-position" name="row-3-position" value="Junior Technical Author"></td>
166
						<td><select size="1" id="row-3-office" name="row-3-office">
167
							<option value="Edinburgh">
168
								Edinburgh
169
							</option>
170
 
171
							<option value="London">
172
								London
173
							</option>
174
 
175
							<option value="New York">
176
								New York
177
							</option>
178
 
179
							<option value="San Francisco" selected="selected">
180
								San Francisco
181
							</option>
182
 
183
							<option value="Tokyo">
184
								Tokyo
185
							</option>
186
						</select></td>
187
					</tr>
188
					<tr>
189
						<td>Cedric Kelly</td>
190
						<td><input type="text" id="row-4-age" name="row-4-age" value="22"></td>
191
						<td><input type="text" id="row-4-position" name="row-4-position" value="Senior Javascript Developer"></td>
192
						<td><select size="1" id="row-4-office" name="row-4-office">
193
							<option value="Edinburgh" selected="selected">
194
								Edinburgh
195
							</option>
196
 
197
							<option value="London">
198
								London
199
							</option>
200
 
201
							<option value="New York">
202
								New York
203
							</option>
204
 
205
							<option value="San Francisco">
206
								San Francisco
207
							</option>
208
 
209
							<option value="Tokyo">
210
								Tokyo
211
							</option>
212
						</select></td>
213
					</tr>
214
					<tr>
215
						<td>Airi Satou</td>
216
						<td><input type="text" id="row-5-age" name="row-5-age" value="33"></td>
217
						<td><input type="text" id="row-5-position" name="row-5-position" value="Accountant"></td>
218
						<td><select size="1" id="row-5-office" name="row-5-office">
219
							<option value="Edinburgh">
220
								Edinburgh
221
							</option>
222
 
223
							<option value="London">
224
								London
225
							</option>
226
 
227
							<option value="New York">
228
								New York
229
							</option>
230
 
231
							<option value="San Francisco">
232
								San Francisco
233
							</option>
234
 
235
							<option value="Tokyo" selected="selected">
236
								Tokyo
237
							</option>
238
						</select></td>
239
					</tr>
240
					<tr>
241
						<td>Brielle Williamson</td>
242
						<td><input type="text" id="row-6-age" name="row-6-age" value="61"></td>
243
						<td><input type="text" id="row-6-position" name="row-6-position" value="Integration Specialist"></td>
244
						<td><select size="1" id="row-6-office" name="row-6-office">
245
							<option value="Edinburgh">
246
								Edinburgh
247
							</option>
248
 
249
							<option value="London">
250
								London
251
							</option>
252
 
253
							<option value="New York" selected="selected">
254
								New York
255
							</option>
256
 
257
							<option value="San Francisco">
258
								San Francisco
259
							</option>
260
 
261
							<option value="Tokyo">
262
								Tokyo
263
							</option>
264
						</select></td>
265
					</tr>
266
					<tr>
267
						<td>Herrod Chandler</td>
268
						<td><input type="text" id="row-7-age" name="row-7-age" value="59"></td>
269
						<td><input type="text" id="row-7-position" name="row-7-position" value="Sales Assistant"></td>
270
						<td><select size="1" id="row-7-office" name="row-7-office">
271
							<option value="Edinburgh">
272
								Edinburgh
273
							</option>
274
 
275
							<option value="London">
276
								London
277
							</option>
278
 
279
							<option value="New York">
280
								New York
281
							</option>
282
 
283
							<option value="San Francisco" selected="selected">
284
								San Francisco
285
							</option>
286
 
287
							<option value="Tokyo">
288
								Tokyo
289
							</option>
290
						</select></td>
291
					</tr>
292
					<tr>
293
						<td>Rhona Davidson</td>
294
						<td><input type="text" id="row-8-age" name="row-8-age" value="55"></td>
295
						<td><input type="text" id="row-8-position" name="row-8-position" value="Integration Specialist"></td>
296
						<td><select size="1" id="row-8-office" name="row-8-office">
297
							<option value="Edinburgh">
298
								Edinburgh
299
							</option>
300
 
301
							<option value="London">
302
								London
303
							</option>
304
 
305
							<option value="New York">
306
								New York
307
							</option>
308
 
309
							<option value="San Francisco">
310
								San Francisco
311
							</option>
312
 
313
							<option value="Tokyo" selected="selected">
314
								Tokyo
315
							</option>
316
						</select></td>
317
					</tr>
318
					<tr>
319
						<td>Colleen Hurst</td>
320
						<td><input type="text" id="row-9-age" name="row-9-age" value="39"></td>
321
						<td><input type="text" id="row-9-position" name="row-9-position" value="Javascript Developer"></td>
322
						<td><select size="1" id="row-9-office" name="row-9-office">
323
							<option value="Edinburgh">
324
								Edinburgh
325
							</option>
326
 
327
							<option value="London">
328
								London
329
							</option>
330
 
331
							<option value="New York">
332
								New York
333
							</option>
334
 
335
							<option value="San Francisco" selected="selected">
336
								San Francisco
337
							</option>
338
 
339
							<option value="Tokyo">
340
								Tokyo
341
							</option>
342
						</select></td>
343
					</tr>
344
					<tr>
345
						<td>Sonya Frost</td>
346
						<td><input type="text" id="row-10-age" name="row-10-age" value="23"></td>
347
						<td><input type="text" id="row-10-position" name="row-10-position" value="Software Engineer"></td>
348
						<td><select size="1" id="row-10-office" name="row-10-office">
349
							<option value="Edinburgh" selected="selected">
350
								Edinburgh
351
							</option>
352
 
353
							<option value="London">
354
								London
355
							</option>
356
 
357
							<option value="New York">
358
								New York
359
							</option>
360
 
361
							<option value="San Francisco">
362
								San Francisco
363
							</option>
364
 
365
							<option value="Tokyo">
366
								Tokyo
367
							</option>
368
						</select></td>
369
					</tr>
370
					<tr>
371
						<td>Jena Gaines</td>
372
						<td><input type="text" id="row-11-age" name="row-11-age" value="30"></td>
373
						<td><input type="text" id="row-11-position" name="row-11-position" value="Office Manager"></td>
374
						<td><select size="1" id="row-11-office" name="row-11-office">
375
							<option value="Edinburgh">
376
								Edinburgh
377
							</option>
378
 
379
							<option value="London" selected="selected">
380
								London
381
							</option>
382
 
383
							<option value="New York">
384
								New York
385
							</option>
386
 
387
							<option value="San Francisco">
388
								San Francisco
389
							</option>
390
 
391
							<option value="Tokyo">
392
								Tokyo
393
							</option>
394
						</select></td>
395
					</tr>
396
					<tr>
397
						<td>Quinn Flynn</td>
398
						<td><input type="text" id="row-12-age" name="row-12-age" value="22"></td>
399
						<td><input type="text" id="row-12-position" name="row-12-position" value="Support Lead"></td>
400
						<td><select size="1" id="row-12-office" name="row-12-office">
401
							<option value="Edinburgh" selected="selected">
402
								Edinburgh
403
							</option>
404
 
405
							<option value="London">
406
								London
407
							</option>
408
 
409
							<option value="New York">
410
								New York
411
							</option>
412
 
413
							<option value="San Francisco">
414
								San Francisco
415
							</option>
416
 
417
							<option value="Tokyo">
418
								Tokyo
419
							</option>
420
						</select></td>
421
					</tr>
422
					<tr>
423
						<td>Charde Marshall</td>
424
						<td><input type="text" id="row-13-age" name="row-13-age" value="36"></td>
425
						<td><input type="text" id="row-13-position" name="row-13-position" value="Regional Director"></td>
426
						<td><select size="1" id="row-13-office" name="row-13-office">
427
							<option value="Edinburgh">
428
								Edinburgh
429
							</option>
430
 
431
							<option value="London">
432
								London
433
							</option>
434
 
435
							<option value="New York">
436
								New York
437
							</option>
438
 
439
							<option value="San Francisco" selected="selected">
440
								San Francisco
441
							</option>
442
 
443
							<option value="Tokyo">
444
								Tokyo
445
							</option>
446
						</select></td>
447
					</tr>
448
					<tr>
449
						<td>Haley Kennedy</td>
450
						<td><input type="text" id="row-14-age" name="row-14-age" value="43"></td>
451
						<td><input type="text" id="row-14-position" name="row-14-position" value="Senior Marketing Designer"></td>
452
						<td><select size="1" id="row-14-office" name="row-14-office">
453
							<option value="Edinburgh">
454
								Edinburgh
455
							</option>
456
 
457
							<option value="London" selected="selected">
458
								London
459
							</option>
460
 
461
							<option value="New York">
462
								New York
463
							</option>
464
 
465
							<option value="San Francisco">
466
								San Francisco
467
							</option>
468
 
469
							<option value="Tokyo">
470
								Tokyo
471
							</option>
472
						</select></td>
473
					</tr>
474
					<tr>
475
						<td>Tatyana Fitzpatrick</td>
476
						<td><input type="text" id="row-15-age" name="row-15-age" value="19"></td>
477
						<td><input type="text" id="row-15-position" name="row-15-position" value="Regional Director"></td>
478
						<td><select size="1" id="row-15-office" name="row-15-office">
479
							<option value="Edinburgh">
480
								Edinburgh
481
							</option>
482
 
483
							<option value="London" selected="selected">
484
								London
485
							</option>
486
 
487
							<option value="New York">
488
								New York
489
							</option>
490
 
491
							<option value="San Francisco">
492
								San Francisco
493
							</option>
494
 
495
							<option value="Tokyo">
496
								Tokyo
497
							</option>
498
						</select></td>
499
					</tr>
500
					<tr>
501
						<td>Michael Silva</td>
502
						<td><input type="text" id="row-16-age" name="row-16-age" value="66"></td>
503
						<td><input type="text" id="row-16-position" name="row-16-position" value="Marketing Designer"></td>
504
						<td><select size="1" id="row-16-office" name="row-16-office">
505
							<option value="Edinburgh">
506
								Edinburgh
507
							</option>
508
 
509
							<option value="London" selected="selected">
510
								London
511
							</option>
512
 
513
							<option value="New York">
514
								New York
515
							</option>
516
 
517
							<option value="San Francisco">
518
								San Francisco
519
							</option>
520
 
521
							<option value="Tokyo">
522
								Tokyo
523
							</option>
524
						</select></td>
525
					</tr>
526
					<tr>
527
						<td>Paul Byrd</td>
528
						<td><input type="text" id="row-17-age" name="row-17-age" value="64"></td>
529
						<td><input type="text" id="row-17-position" name="row-17-position" value="Chief Financial Officer (CFO)"></td>
530
						<td><select size="1" id="row-17-office" name="row-17-office">
531
							<option value="Edinburgh">
532
								Edinburgh
533
							</option>
534
 
535
							<option value="London">
536
								London
537
							</option>
538
 
539
							<option value="New York" selected="selected">
540
								New York
541
							</option>
542
 
543
							<option value="San Francisco">
544
								San Francisco
545
							</option>
546
 
547
							<option value="Tokyo">
548
								Tokyo
549
							</option>
550
						</select></td>
551
					</tr>
552
					<tr>
553
						<td>Gloria Little</td>
554
						<td><input type="text" id="row-18-age" name="row-18-age" value="59"></td>
555
						<td><input type="text" id="row-18-position" name="row-18-position" value="Systems Administrator"></td>
556
						<td><select size="1" id="row-18-office" name="row-18-office">
557
							<option value="Edinburgh">
558
								Edinburgh
559
							</option>
560
 
561
							<option value="London">
562
								London
563
							</option>
564
 
565
							<option value="New York" selected="selected">
566
								New York
567
							</option>
568
 
569
							<option value="San Francisco">
570
								San Francisco
571
							</option>
572
 
573
							<option value="Tokyo">
574
								Tokyo
575
							</option>
576
						</select></td>
577
					</tr>
578
					<tr>
579
						<td>Bradley Greer</td>
580
						<td><input type="text" id="row-19-age" name="row-19-age" value="41"></td>
581
						<td><input type="text" id="row-19-position" name="row-19-position" value="Software Engineer"></td>
582
						<td><select size="1" id="row-19-office" name="row-19-office">
583
							<option value="Edinburgh">
584
								Edinburgh
585
							</option>
586
 
587
							<option value="London" selected="selected">
588
								London
589
							</option>
590
 
591
							<option value="New York">
592
								New York
593
							</option>
594
 
595
							<option value="San Francisco">
596
								San Francisco
597
							</option>
598
 
599
							<option value="Tokyo">
600
								Tokyo
601
							</option>
602
						</select></td>
603
					</tr>
604
					<tr>
605
						<td>Dai Rios</td>
606
						<td><input type="text" id="row-20-age" name="row-20-age" value="35"></td>
607
						<td><input type="text" id="row-20-position" name="row-20-position" value="Personnel Lead"></td>
608
						<td><select size="1" id="row-20-office" name="row-20-office">
609
							<option value="Edinburgh" selected="selected">
610
								Edinburgh
611
							</option>
612
 
613
							<option value="London">
614
								London
615
							</option>
616
 
617
							<option value="New York">
618
								New York
619
							</option>
620
 
621
							<option value="San Francisco">
622
								San Francisco
623
							</option>
624
 
625
							<option value="Tokyo">
626
								Tokyo
627
							</option>
628
						</select></td>
629
					</tr>
630
					<tr>
631
						<td>Jenette Caldwell</td>
632
						<td><input type="text" id="row-21-age" name="row-21-age" value="30"></td>
633
						<td><input type="text" id="row-21-position" name="row-21-position" value="Development Lead"></td>
634
						<td><select size="1" id="row-21-office" name="row-21-office">
635
							<option value="Edinburgh">
636
								Edinburgh
637
							</option>
638
 
639
							<option value="London">
640
								London
641
							</option>
642
 
643
							<option value="New York" selected="selected">
644
								New York
645
							</option>
646
 
647
							<option value="San Francisco">
648
								San Francisco
649
							</option>
650
 
651
							<option value="Tokyo">
652
								Tokyo
653
							</option>
654
						</select></td>
655
					</tr>
656
					<tr>
657
						<td>Yuri Berry</td>
658
						<td><input type="text" id="row-22-age" name="row-22-age" value="40"></td>
659
						<td><input type="text" id="row-22-position" name="row-22-position" value="Chief Marketing Officer (CMO)"></td>
660
						<td><select size="1" id="row-22-office" name="row-22-office">
661
							<option value="Edinburgh">
662
								Edinburgh
663
							</option>
664
 
665
							<option value="London">
666
								London
667
							</option>
668
 
669
							<option value="New York" selected="selected">
670
								New York
671
							</option>
672
 
673
							<option value="San Francisco">
674
								San Francisco
675
							</option>
676
 
677
							<option value="Tokyo">
678
								Tokyo
679
							</option>
680
						</select></td>
681
					</tr>
682
					<tr>
683
						<td>Caesar Vance</td>
684
						<td><input type="text" id="row-23-age" name="row-23-age" value="21"></td>
685
						<td><input type="text" id="row-23-position" name="row-23-position" value="Pre-Sales Support"></td>
686
						<td><select size="1" id="row-23-office" name="row-23-office">
687
							<option value="Edinburgh">
688
								Edinburgh
689
							</option>
690
 
691
							<option value="London">
692
								London
693
							</option>
694
 
695
							<option value="New York" selected="selected">
696
								New York
697
							</option>
698
 
699
							<option value="San Francisco">
700
								San Francisco
701
							</option>
702
 
703
							<option value="Tokyo">
704
								Tokyo
705
							</option>
706
						</select></td>
707
					</tr>
708
					<tr>
709
						<td>Doris Wilder</td>
710
						<td><input type="text" id="row-24-age" name="row-24-age" value="23"></td>
711
						<td><input type="text" id="row-24-position" name="row-24-position" value="Sales Assistant"></td>
712
						<td><select size="1" id="row-24-office" name="row-24-office">
713
							<option value="Edinburgh">
714
								Edinburgh
715
							</option>
716
 
717
							<option value="London">
718
								London
719
							</option>
720
 
721
							<option value="New York">
722
								New York
723
							</option>
724
 
725
							<option value="San Francisco">
726
								San Francisco
727
							</option>
728
 
729
							<option value="Tokyo">
730
								Tokyo
731
							</option>
732
						</select></td>
733
					</tr>
734
					<tr>
735
						<td>Angelica Ramos</td>
736
						<td><input type="text" id="row-25-age" name="row-25-age" value="47"></td>
737
						<td><input type="text" id="row-25-position" name="row-25-position" value="Chief Executive Officer (CEO)"></td>
738
						<td><select size="1" id="row-25-office" name="row-25-office">
739
							<option value="Edinburgh">
740
								Edinburgh
741
							</option>
742
 
743
							<option value="London" selected="selected">
744
								London
745
							</option>
746
 
747
							<option value="New York">
748
								New York
749
							</option>
750
 
751
							<option value="San Francisco">
752
								San Francisco
753
							</option>
754
 
755
							<option value="Tokyo">
756
								Tokyo
757
							</option>
758
						</select></td>
759
					</tr>
760
					<tr>
761
						<td>Gavin Joyce</td>
762
						<td><input type="text" id="row-26-age" name="row-26-age" value="42"></td>
763
						<td><input type="text" id="row-26-position" name="row-26-position" value="Developer"></td>
764
						<td><select size="1" id="row-26-office" name="row-26-office">
765
							<option value="Edinburgh" selected="selected">
766
								Edinburgh
767
							</option>
768
 
769
							<option value="London">
770
								London
771
							</option>
772
 
773
							<option value="New York">
774
								New York
775
							</option>
776
 
777
							<option value="San Francisco">
778
								San Francisco
779
							</option>
780
 
781
							<option value="Tokyo">
782
								Tokyo
783
							</option>
784
						</select></td>
785
					</tr>
786
					<tr>
787
						<td>Jennifer Chang</td>
788
						<td><input type="text" id="row-27-age" name="row-27-age" value="28"></td>
789
						<td><input type="text" id="row-27-position" name="row-27-position" value="Regional Director"></td>
790
						<td><select size="1" id="row-27-office" name="row-27-office">
791
							<option value="Edinburgh">
792
								Edinburgh
793
							</option>
794
 
795
							<option value="London">
796
								London
797
							</option>
798
 
799
							<option value="New York">
800
								New York
801
							</option>
802
 
803
							<option value="San Francisco">
804
								San Francisco
805
							</option>
806
 
807
							<option value="Tokyo">
808
								Tokyo
809
							</option>
810
						</select></td>
811
					</tr>
812
					<tr>
813
						<td>Brenden Wagner</td>
814
						<td><input type="text" id="row-28-age" name="row-28-age" value="28"></td>
815
						<td><input type="text" id="row-28-position" name="row-28-position" value="Software Engineer"></td>
816
						<td><select size="1" id="row-28-office" name="row-28-office">
817
							<option value="Edinburgh">
818
								Edinburgh
819
							</option>
820
 
821
							<option value="London">
822
								London
823
							</option>
824
 
825
							<option value="New York">
826
								New York
827
							</option>
828
 
829
							<option value="San Francisco" selected="selected">
830
								San Francisco
831
							</option>
832
 
833
							<option value="Tokyo">
834
								Tokyo
835
							</option>
836
						</select></td>
837
					</tr>
838
					<tr>
839
						<td>Fiona Green</td>
840
						<td><input type="text" id="row-29-age" name="row-29-age" value="48"></td>
841
						<td><input type="text" id="row-29-position" name="row-29-position" value="Chief Operating Officer (COO)"></td>
842
						<td><select size="1" id="row-29-office" name="row-29-office">
843
							<option value="Edinburgh">
844
								Edinburgh
845
							</option>
846
 
847
							<option value="London">
848
								London
849
							</option>
850
 
851
							<option value="New York">
852
								New York
853
							</option>
854
 
855
							<option value="San Francisco" selected="selected">
856
								San Francisco
857
							</option>
858
 
859
							<option value="Tokyo">
860
								Tokyo
861
							</option>
862
						</select></td>
863
					</tr>
864
					<tr>
865
						<td>Shou Itou</td>
866
						<td><input type="text" id="row-30-age" name="row-30-age" value="20"></td>
867
						<td><input type="text" id="row-30-position" name="row-30-position" value="Regional Marketing"></td>
868
						<td><select size="1" id="row-30-office" name="row-30-office">
869
							<option value="Edinburgh">
870
								Edinburgh
871
							</option>
872
 
873
							<option value="London">
874
								London
875
							</option>
876
 
877
							<option value="New York">
878
								New York
879
							</option>
880
 
881
							<option value="San Francisco">
882
								San Francisco
883
							</option>
884
 
885
							<option value="Tokyo" selected="selected">
886
								Tokyo
887
							</option>
888
						</select></td>
889
					</tr>
890
					<tr>
891
						<td>Michelle House</td>
892
						<td><input type="text" id="row-31-age" name="row-31-age" value="37"></td>
893
						<td><input type="text" id="row-31-position" name="row-31-position" value="Integration Specialist"></td>
894
						<td><select size="1" id="row-31-office" name="row-31-office">
895
							<option value="Edinburgh">
896
								Edinburgh
897
							</option>
898
 
899
							<option value="London">
900
								London
901
							</option>
902
 
903
							<option value="New York">
904
								New York
905
							</option>
906
 
907
							<option value="San Francisco">
908
								San Francisco
909
							</option>
910
 
911
							<option value="Tokyo">
912
								Tokyo
913
							</option>
914
						</select></td>
915
					</tr>
916
					<tr>
917
						<td>Suki Burks</td>
918
						<td><input type="text" id="row-32-age" name="row-32-age" value="53"></td>
919
						<td><input type="text" id="row-32-position" name="row-32-position" value="Developer"></td>
920
						<td><select size="1" id="row-32-office" name="row-32-office">
921
							<option value="Edinburgh">
922
								Edinburgh
923
							</option>
924
 
925
							<option value="London" selected="selected">
926
								London
927
							</option>
928
 
929
							<option value="New York">
930
								New York
931
							</option>
932
 
933
							<option value="San Francisco">
934
								San Francisco
935
							</option>
936
 
937
							<option value="Tokyo">
938
								Tokyo
939
							</option>
940
						</select></td>
941
					</tr>
942
					<tr>
943
						<td>Prescott Bartlett</td>
944
						<td><input type="text" id="row-33-age" name="row-33-age" value="27"></td>
945
						<td><input type="text" id="row-33-position" name="row-33-position" value="Technical Author"></td>
946
						<td><select size="1" id="row-33-office" name="row-33-office">
947
							<option value="Edinburgh">
948
								Edinburgh
949
							</option>
950
 
951
							<option value="London" selected="selected">
952
								London
953
							</option>
954
 
955
							<option value="New York">
956
								New York
957
							</option>
958
 
959
							<option value="San Francisco">
960
								San Francisco
961
							</option>
962
 
963
							<option value="Tokyo">
964
								Tokyo
965
							</option>
966
						</select></td>
967
					</tr>
968
					<tr>
969
						<td>Gavin Cortez</td>
970
						<td><input type="text" id="row-34-age" name="row-34-age" value="22"></td>
971
						<td><input type="text" id="row-34-position" name="row-34-position" value="Team Leader"></td>
972
						<td><select size="1" id="row-34-office" name="row-34-office">
973
							<option value="Edinburgh">
974
								Edinburgh
975
							</option>
976
 
977
							<option value="London">
978
								London
979
							</option>
980
 
981
							<option value="New York">
982
								New York
983
							</option>
984
 
985
							<option value="San Francisco" selected="selected">
986
								San Francisco
987
							</option>
988
 
989
							<option value="Tokyo">
990
								Tokyo
991
							</option>
992
						</select></td>
993
					</tr>
994
					<tr>
995
						<td>Martena Mccray</td>
996
						<td><input type="text" id="row-35-age" name="row-35-age" value="46"></td>
997
						<td><input type="text" id="row-35-position" name="row-35-position" value="Post-Sales support"></td>
998
						<td><select size="1" id="row-35-office" name="row-35-office">
999
							<option value="Edinburgh" selected="selected">
1000
								Edinburgh
1001
							</option>
1002
 
1003
							<option value="London">
1004
								London
1005
							</option>
1006
 
1007
							<option value="New York">
1008
								New York
1009
							</option>
1010
 
1011
							<option value="San Francisco">
1012
								San Francisco
1013
							</option>
1014
 
1015
							<option value="Tokyo">
1016
								Tokyo
1017
							</option>
1018
						</select></td>
1019
					</tr>
1020
					<tr>
1021
						<td>Unity Butler</td>
1022
						<td><input type="text" id="row-36-age" name="row-36-age" value="47"></td>
1023
						<td><input type="text" id="row-36-position" name="row-36-position" value="Marketing Designer"></td>
1024
						<td><select size="1" id="row-36-office" name="row-36-office">
1025
							<option value="Edinburgh">
1026
								Edinburgh
1027
							</option>
1028
 
1029
							<option value="London">
1030
								London
1031
							</option>
1032
 
1033
							<option value="New York">
1034
								New York
1035
							</option>
1036
 
1037
							<option value="San Francisco" selected="selected">
1038
								San Francisco
1039
							</option>
1040
 
1041
							<option value="Tokyo">
1042
								Tokyo
1043
							</option>
1044
						</select></td>
1045
					</tr>
1046
					<tr>
1047
						<td>Howard Hatfield</td>
1048
						<td><input type="text" id="row-37-age" name="row-37-age" value="51"></td>
1049
						<td><input type="text" id="row-37-position" name="row-37-position" value="Office Manager"></td>
1050
						<td><select size="1" id="row-37-office" name="row-37-office">
1051
							<option value="Edinburgh">
1052
								Edinburgh
1053
							</option>
1054
 
1055
							<option value="London">
1056
								London
1057
							</option>
1058
 
1059
							<option value="New York">
1060
								New York
1061
							</option>
1062
 
1063
							<option value="San Francisco" selected="selected">
1064
								San Francisco
1065
							</option>
1066
 
1067
							<option value="Tokyo">
1068
								Tokyo
1069
							</option>
1070
						</select></td>
1071
					</tr>
1072
					<tr>
1073
						<td>Hope Fuentes</td>
1074
						<td><input type="text" id="row-38-age" name="row-38-age" value="41"></td>
1075
						<td><input type="text" id="row-38-position" name="row-38-position" value="Secretary"></td>
1076
						<td><select size="1" id="row-38-office" name="row-38-office">
1077
							<option value="Edinburgh">
1078
								Edinburgh
1079
							</option>
1080
 
1081
							<option value="London">
1082
								London
1083
							</option>
1084
 
1085
							<option value="New York">
1086
								New York
1087
							</option>
1088
 
1089
							<option value="San Francisco" selected="selected">
1090
								San Francisco
1091
							</option>
1092
 
1093
							<option value="Tokyo">
1094
								Tokyo
1095
							</option>
1096
						</select></td>
1097
					</tr>
1098
					<tr>
1099
						<td>Vivian Harrell</td>
1100
						<td><input type="text" id="row-39-age" name="row-39-age" value="62"></td>
1101
						<td><input type="text" id="row-39-position" name="row-39-position" value="Financial Controller"></td>
1102
						<td><select size="1" id="row-39-office" name="row-39-office">
1103
							<option value="Edinburgh">
1104
								Edinburgh
1105
							</option>
1106
 
1107
							<option value="London">
1108
								London
1109
							</option>
1110
 
1111
							<option value="New York">
1112
								New York
1113
							</option>
1114
 
1115
							<option value="San Francisco" selected="selected">
1116
								San Francisco
1117
							</option>
1118
 
1119
							<option value="Tokyo">
1120
								Tokyo
1121
							</option>
1122
						</select></td>
1123
					</tr>
1124
					<tr>
1125
						<td>Timothy Mooney</td>
1126
						<td><input type="text" id="row-40-age" name="row-40-age" value="37"></td>
1127
						<td><input type="text" id="row-40-position" name="row-40-position" value="Office Manager"></td>
1128
						<td><select size="1" id="row-40-office" name="row-40-office">
1129
							<option value="Edinburgh">
1130
								Edinburgh
1131
							</option>
1132
 
1133
							<option value="London" selected="selected">
1134
								London
1135
							</option>
1136
 
1137
							<option value="New York">
1138
								New York
1139
							</option>
1140
 
1141
							<option value="San Francisco">
1142
								San Francisco
1143
							</option>
1144
 
1145
							<option value="Tokyo">
1146
								Tokyo
1147
							</option>
1148
						</select></td>
1149
					</tr>
1150
					<tr>
1151
						<td>Jackson Bradshaw</td>
1152
						<td><input type="text" id="row-41-age" name="row-41-age" value="65"></td>
1153
						<td><input type="text" id="row-41-position" name="row-41-position" value="Director"></td>
1154
						<td><select size="1" id="row-41-office" name="row-41-office">
1155
							<option value="Edinburgh">
1156
								Edinburgh
1157
							</option>
1158
 
1159
							<option value="London">
1160
								London
1161
							</option>
1162
 
1163
							<option value="New York" selected="selected">
1164
								New York
1165
							</option>
1166
 
1167
							<option value="San Francisco">
1168
								San Francisco
1169
							</option>
1170
 
1171
							<option value="Tokyo">
1172
								Tokyo
1173
							</option>
1174
						</select></td>
1175
					</tr>
1176
					<tr>
1177
						<td>Olivia Liang</td>
1178
						<td><input type="text" id="row-42-age" name="row-42-age" value="64"></td>
1179
						<td><input type="text" id="row-42-position" name="row-42-position" value="Support Engineer"></td>
1180
						<td><select size="1" id="row-42-office" name="row-42-office">
1181
							<option value="Edinburgh">
1182
								Edinburgh
1183
							</option>
1184
 
1185
							<option value="London">
1186
								London
1187
							</option>
1188
 
1189
							<option value="New York">
1190
								New York
1191
							</option>
1192
 
1193
							<option value="San Francisco">
1194
								San Francisco
1195
							</option>
1196
 
1197
							<option value="Tokyo">
1198
								Tokyo
1199
							</option>
1200
						</select></td>
1201
					</tr>
1202
					<tr>
1203
						<td>Bruno Nash</td>
1204
						<td><input type="text" id="row-43-age" name="row-43-age" value="38"></td>
1205
						<td><input type="text" id="row-43-position" name="row-43-position" value="Software Engineer"></td>
1206
						<td><select size="1" id="row-43-office" name="row-43-office">
1207
							<option value="Edinburgh">
1208
								Edinburgh
1209
							</option>
1210
 
1211
							<option value="London" selected="selected">
1212
								London
1213
							</option>
1214
 
1215
							<option value="New York">
1216
								New York
1217
							</option>
1218
 
1219
							<option value="San Francisco">
1220
								San Francisco
1221
							</option>
1222
 
1223
							<option value="Tokyo">
1224
								Tokyo
1225
							</option>
1226
						</select></td>
1227
					</tr>
1228
					<tr>
1229
						<td>Sakura Yamamoto</td>
1230
						<td><input type="text" id="row-44-age" name="row-44-age" value="37"></td>
1231
						<td><input type="text" id="row-44-position" name="row-44-position" value="Support Engineer"></td>
1232
						<td><select size="1" id="row-44-office" name="row-44-office">
1233
							<option value="Edinburgh">
1234
								Edinburgh
1235
							</option>
1236
 
1237
							<option value="London">
1238
								London
1239
							</option>
1240
 
1241
							<option value="New York">
1242
								New York
1243
							</option>
1244
 
1245
							<option value="San Francisco">
1246
								San Francisco
1247
							</option>
1248
 
1249
							<option value="Tokyo" selected="selected">
1250
								Tokyo
1251
							</option>
1252
						</select></td>
1253
					</tr>
1254
					<tr>
1255
						<td>Thor Walton</td>
1256
						<td><input type="text" id="row-45-age" name="row-45-age" value="61"></td>
1257
						<td><input type="text" id="row-45-position" name="row-45-position" value="Developer"></td>
1258
						<td><select size="1" id="row-45-office" name="row-45-office">
1259
							<option value="Edinburgh">
1260
								Edinburgh
1261
							</option>
1262
 
1263
							<option value="London">
1264
								London
1265
							</option>
1266
 
1267
							<option value="New York" selected="selected">
1268
								New York
1269
							</option>
1270
 
1271
							<option value="San Francisco">
1272
								San Francisco
1273
							</option>
1274
 
1275
							<option value="Tokyo">
1276
								Tokyo
1277
							</option>
1278
						</select></td>
1279
					</tr>
1280
					<tr>
1281
						<td>Finn Camacho</td>
1282
						<td><input type="text" id="row-46-age" name="row-46-age" value="47"></td>
1283
						<td><input type="text" id="row-46-position" name="row-46-position" value="Support Engineer"></td>
1284
						<td><select size="1" id="row-46-office" name="row-46-office">
1285
							<option value="Edinburgh">
1286
								Edinburgh
1287
							</option>
1288
 
1289
							<option value="London">
1290
								London
1291
							</option>
1292
 
1293
							<option value="New York">
1294
								New York
1295
							</option>
1296
 
1297
							<option value="San Francisco" selected="selected">
1298
								San Francisco
1299
							</option>
1300
 
1301
							<option value="Tokyo">
1302
								Tokyo
1303
							</option>
1304
						</select></td>
1305
					</tr>
1306
					<tr>
1307
						<td>Serge Baldwin</td>
1308
						<td><input type="text" id="row-47-age" name="row-47-age" value="64"></td>
1309
						<td><input type="text" id="row-47-position" name="row-47-position" value="Data Coordinator"></td>
1310
						<td><select size="1" id="row-47-office" name="row-47-office">
1311
							<option value="Edinburgh">
1312
								Edinburgh
1313
							</option>
1314
 
1315
							<option value="London">
1316
								London
1317
							</option>
1318
 
1319
							<option value="New York">
1320
								New York
1321
							</option>
1322
 
1323
							<option value="San Francisco">
1324
								San Francisco
1325
							</option>
1326
 
1327
							<option value="Tokyo">
1328
								Tokyo
1329
							</option>
1330
						</select></td>
1331
					</tr>
1332
					<tr>
1333
						<td>Zenaida Frank</td>
1334
						<td><input type="text" id="row-48-age" name="row-48-age" value="63"></td>
1335
						<td><input type="text" id="row-48-position" name="row-48-position" value="Software Engineer"></td>
1336
						<td><select size="1" id="row-48-office" name="row-48-office">
1337
							<option value="Edinburgh">
1338
								Edinburgh
1339
							</option>
1340
 
1341
							<option value="London">
1342
								London
1343
							</option>
1344
 
1345
							<option value="New York" selected="selected">
1346
								New York
1347
							</option>
1348
 
1349
							<option value="San Francisco">
1350
								San Francisco
1351
							</option>
1352
 
1353
							<option value="Tokyo">
1354
								Tokyo
1355
							</option>
1356
						</select></td>
1357
					</tr>
1358
					<tr>
1359
						<td>Zorita Serrano</td>
1360
						<td><input type="text" id="row-49-age" name="row-49-age" value="56"></td>
1361
						<td><input type="text" id="row-49-position" name="row-49-position" value="Software Engineer"></td>
1362
						<td><select size="1" id="row-49-office" name="row-49-office">
1363
							<option value="Edinburgh">
1364
								Edinburgh
1365
							</option>
1366
 
1367
							<option value="London">
1368
								London
1369
							</option>
1370
 
1371
							<option value="New York">
1372
								New York
1373
							</option>
1374
 
1375
							<option value="San Francisco" selected="selected">
1376
								San Francisco
1377
							</option>
1378
 
1379
							<option value="Tokyo">
1380
								Tokyo
1381
							</option>
1382
						</select></td>
1383
					</tr>
1384
					<tr>
1385
						<td>Jennifer Acosta</td>
1386
						<td><input type="text" id="row-50-age" name="row-50-age" value="43"></td>
1387
						<td><input type="text" id="row-50-position" name="row-50-position" value="Junior Javascript Developer"></td>
1388
						<td><select size="1" id="row-50-office" name="row-50-office">
1389
							<option value="Edinburgh" selected="selected">
1390
								Edinburgh
1391
							</option>
1392
 
1393
							<option value="London">
1394
								London
1395
							</option>
1396
 
1397
							<option value="New York">
1398
								New York
1399
							</option>
1400
 
1401
							<option value="San Francisco">
1402
								San Francisco
1403
							</option>
1404
 
1405
							<option value="Tokyo">
1406
								Tokyo
1407
							</option>
1408
						</select></td>
1409
					</tr>
1410
					<tr>
1411
						<td>Cara Stevens</td>
1412
						<td><input type="text" id="row-51-age" name="row-51-age" value="46"></td>
1413
						<td><input type="text" id="row-51-position" name="row-51-position" value="Sales Assistant"></td>
1414
						<td><select size="1" id="row-51-office" name="row-51-office">
1415
							<option value="Edinburgh">
1416
								Edinburgh
1417
							</option>
1418
 
1419
							<option value="London">
1420
								London
1421
							</option>
1422
 
1423
							<option value="New York" selected="selected">
1424
								New York
1425
							</option>
1426
 
1427
							<option value="San Francisco">
1428
								San Francisco
1429
							</option>
1430
 
1431
							<option value="Tokyo">
1432
								Tokyo
1433
							</option>
1434
						</select></td>
1435
					</tr>
1436
					<tr>
1437
						<td>Hermione Butler</td>
1438
						<td><input type="text" id="row-52-age" name="row-52-age" value="47"></td>
1439
						<td><input type="text" id="row-52-position" name="row-52-position" value="Regional Director"></td>
1440
						<td><select size="1" id="row-52-office" name="row-52-office">
1441
							<option value="Edinburgh">
1442
								Edinburgh
1443
							</option>
1444
 
1445
							<option value="London" selected="selected">
1446
								London
1447
							</option>
1448
 
1449
							<option value="New York">
1450
								New York
1451
							</option>
1452
 
1453
							<option value="San Francisco">
1454
								San Francisco
1455
							</option>
1456
 
1457
							<option value="Tokyo">
1458
								Tokyo
1459
							</option>
1460
						</select></td>
1461
					</tr>
1462
					<tr>
1463
						<td>Lael Greer</td>
1464
						<td><input type="text" id="row-53-age" name="row-53-age" value="21"></td>
1465
						<td><input type="text" id="row-53-position" name="row-53-position" value="Systems Administrator"></td>
1466
						<td><select size="1" id="row-53-office" name="row-53-office">
1467
							<option value="Edinburgh">
1468
								Edinburgh
1469
							</option>
1470
 
1471
							<option value="London" selected="selected">
1472
								London
1473
							</option>
1474
 
1475
							<option value="New York">
1476
								New York
1477
							</option>
1478
 
1479
							<option value="San Francisco">
1480
								San Francisco
1481
							</option>
1482
 
1483
							<option value="Tokyo">
1484
								Tokyo
1485
							</option>
1486
						</select></td>
1487
					</tr>
1488
					<tr>
1489
						<td>Jonas Alexander</td>
1490
						<td><input type="text" id="row-54-age" name="row-54-age" value="30"></td>
1491
						<td><input type="text" id="row-54-position" name="row-54-position" value="Developer"></td>
1492
						<td><select size="1" id="row-54-office" name="row-54-office">
1493
							<option value="Edinburgh">
1494
								Edinburgh
1495
							</option>
1496
 
1497
							<option value="London">
1498
								London
1499
							</option>
1500
 
1501
							<option value="New York">
1502
								New York
1503
							</option>
1504
 
1505
							<option value="San Francisco" selected="selected">
1506
								San Francisco
1507
							</option>
1508
 
1509
							<option value="Tokyo">
1510
								Tokyo
1511
							</option>
1512
						</select></td>
1513
					</tr>
1514
					<tr>
1515
						<td>Shad Decker</td>
1516
						<td><input type="text" id="row-55-age" name="row-55-age" value="51"></td>
1517
						<td><input type="text" id="row-55-position" name="row-55-position" value="Regional Director"></td>
1518
						<td><select size="1" id="row-55-office" name="row-55-office">
1519
							<option value="Edinburgh" selected="selected">
1520
								Edinburgh
1521
							</option>
1522
 
1523
							<option value="London">
1524
								London
1525
							</option>
1526
 
1527
							<option value="New York">
1528
								New York
1529
							</option>
1530
 
1531
							<option value="San Francisco">
1532
								San Francisco
1533
							</option>
1534
 
1535
							<option value="Tokyo">
1536
								Tokyo
1537
							</option>
1538
						</select></td>
1539
					</tr>
1540
					<tr>
1541
						<td>Michael Bruce</td>
1542
						<td><input type="text" id="row-56-age" name="row-56-age" value="29"></td>
1543
						<td><input type="text" id="row-56-position" name="row-56-position" value="Javascript Developer"></td>
1544
						<td><select size="1" id="row-56-office" name="row-56-office">
1545
							<option value="Edinburgh">
1546
								Edinburgh
1547
							</option>
1548
 
1549
							<option value="London">
1550
								London
1551
							</option>
1552
 
1553
							<option value="New York">
1554
								New York
1555
							</option>
1556
 
1557
							<option value="San Francisco">
1558
								San Francisco
1559
							</option>
1560
 
1561
							<option value="Tokyo">
1562
								Tokyo
1563
							</option>
1564
						</select></td>
1565
					</tr>
1566
					<tr>
1567
						<td>Donna Snider</td>
1568
						<td><input type="text" id="row-57-age" name="row-57-age" value="27"></td>
1569
						<td><input type="text" id="row-57-position" name="row-57-position" value="Customer Support"></td>
1570
						<td><select size="1" id="row-57-office" name="row-57-office">
1571
							<option value="Edinburgh">
1572
								Edinburgh
1573
							</option>
1574
 
1575
							<option value="London">
1576
								London
1577
							</option>
1578
 
1579
							<option value="New York" selected="selected">
1580
								New York
1581
							</option>
1582
 
1583
							<option value="San Francisco">
1584
								San Francisco
1585
							</option>
1586
 
1587
							<option value="Tokyo">
1588
								Tokyo
1589
							</option>
1590
						</select></td>
1591
					</tr>
1592
				</tbody>
1593
			</table>
1594
 
1595
			<ul class="tabs">
1596
				<li class="active">Javascript</li>
1597
				<li>HTML</li>
1598
				<li>CSS</li>
1599
				<li>Ajax</li>
1600
				<li>Server-side script</li>
1601
			</ul>
1602
 
1603
			<div class="tabs">
1604
				<div class="js">
1605
					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">/* Create an array with the values of all the input boxes in a column */
1606
$.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
1607
{
1608
	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
1609
		return $('input', td).val();
1610
	} );
1611
}
1612
 
1613
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
1614
$.fn.dataTable.ext.order['dom-text-numeric'] = function  ( settings, col )
1615
{
1616
	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
1617
		return $('input', td).val() * 1;
1618
	} );
1619
}
1620
 
1621
/* Create an array with the values of all the select options in a column */
1622
$.fn.dataTable.ext.order['dom-select'] = function  ( settings, col )
1623
{
1624
	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
1625
		return $('select', td).val();
1626
	} );
1627
}
1628
 
1629
/* Create an array with the values of all the checkboxes in a column */
1630
$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
1631
{
1632
	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
1633
		return $('input', td).prop('checked') ? '1' : '0';
1634
	} );
1635
}
1636
 
1637
/* Initialise the table with the required column ordering data types */
1638
$(document).ready(function() {
1639
	$('#example').DataTable( {
1640
		&quot;columns&quot;: [
1641
			null,
1642
			{ &quot;orderDataType&quot;: &quot;dom-text-numeric&quot; },
1643
			{ &quot;orderDataType&quot;: &quot;dom-text&quot;, type: 'string' },
1644
			{ &quot;orderDataType&quot;: &quot;dom-select&quot; }
1645
		]
1646
	} );
1647
} );</code>
1648
 
1649
					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
1650
 
1651
					<ul>
1652
						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
1653
						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
1654
					</ul>
1655
				</div>
1656
 
1657
				<div class="table">
1658
					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
1659
				</div>
1660
 
1661
				<div class="css">
1662
					<div>
1663
						<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
1664
						additional CSS used is shown below:</p><code class="multiline language-css"></code>
1665
					</div>
1666
 
1667
					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
1668
 
1669
					<ul>
1670
						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
1671
					</ul>
1672
				</div>
1673
 
1674
				<div class="ajax">
1675
					<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
1676
					loaded.</p>
1677
				</div>
1678
 
1679
				<div class="php">
1680
					<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
1681
					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
1682
					documentation</a>.</p>
1683
				</div>
1684
			</div>
1685
		</section>
1686
	</div>
1687
 
1688
	<section>
1689
		<div class="footer">
1690
			<div class="gradient"></div>
1691
 
1692
			<div class="liner">
1693
				<h2>Other examples</h2>
1694
 
1695
				<div class="toc">
1696
					<div class="toc-group">
1697
						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
1698
						<ul class="toc">
1699
							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
1700
							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
1701
							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
1702
							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
1703
							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
1704
							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
1705
							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
1706
							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
1707
							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
1708
							<li><a href="../basic_init/state_save.html">State saving</a></li>
1709
							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
1710
							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
1711
							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
1712
							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
1713
							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
1714
							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
1715
							<li><a href="../basic_init/language.html">Language options</a></li>
1716
						</ul>
1717
					</div>
1718
 
1719
					<div class="toc-group">
1720
						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
1721
						<ul class="toc">
1722
							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
1723
							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
1724
							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
1725
							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
1726
							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
1727
							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
1728
							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
1729
							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
1730
							<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
1731
							<li><a href="../advanced_init/language_file.html">Language file</a></li>
1732
							<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
1733
							<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
1734
							<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
1735
							<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
1736
							<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
1737
							<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
1738
						</ul>
1739
					</div>
1740
 
1741
					<div class="toc-group">
1742
						<h3><a href="../styling/index.html">Styling</a></h3>
1743
						<ul class="toc">
1744
							<li><a href="../styling/display.html">Base style</a></li>
1745
							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
1746
							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
1747
							<li><a href="../styling/compact.html">Base style - compact</a></li>
1748
							<li><a href="../styling/hover.html">Base style - hover</a></li>
1749
							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
1750
							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
1751
							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
1752
							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
1753
							<li><a href="../styling/foundation.html">Foundation</a></li>
1754
							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
1755
						</ul>
1756
					</div>
1757
 
1758
					<div class="toc-group">
1759
						<h3><a href="../data_sources/index.html">Data sources</a></h3>
1760
						<ul class="toc">
1761
							<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
1762
							<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
1763
							<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
1764
							<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
1765
						</ul>
1766
					</div>
1767
 
1768
					<div class="toc-group">
1769
						<h3><a href="../api/index.html">API</a></h3>
1770
						<ul class="toc">
1771
							<li><a href="../api/add_row.html">Add rows</a></li>
1772
							<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
1773
							<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
1774
							<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
1775
							<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
1776
							<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
1777
							<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
1778
							<li><a href="../api/form.html">Form inputs</a></li>
1779
							<li><a href="../api/counter_columns.html">Index column</a></li>
1780
							<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
1781
							<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
1782
							<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
1783
							<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
1784
						</ul>
1785
					</div>
1786
 
1787
					<div class="toc-group">
1788
						<h3><a href="../ajax/index.html">Ajax</a></h3>
1789
						<ul class="toc">
1790
							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
1791
							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
1792
							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
1793
							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
1794
							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
1795
							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
1796
							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
1797
							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
1798
							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
1799
						</ul>
1800
					</div>
1801
 
1802
					<div class="toc-group">
1803
						<h3><a href="../server_side/index.html">Server-side</a></h3>
1804
						<ul class="toc">
1805
							<li><a href="../server_side/simple.html">Server-side processing</a></li>
1806
							<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
1807
							<li><a href="../server_side/post.html">POST data</a></li>
1808
							<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
1809
							<li><a href="../server_side/object_data.html">Object data source</a></li>
1810
							<li><a href="../server_side/row_details.html">Row details</a></li>
1811
							<li><a href="../server_side/select_rows.html">Row selection</a></li>
1812
							<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
1813
							<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
1814
							<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
1815
						</ul>
1816
					</div>
1817
 
1818
					<div class="toc-group">
1819
						<h3><a href="./index.html">Plug-ins</a></h3>
1820
						<ul class="toc active">
1821
							<li><a href="./api.html">API plug-in methods</a></li>
1822
							<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
1823
							<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
1824
							<li><a href="./range_filtering.html">Custom filtering - range search</a></li>
1825
							<li class="active"><a href="./dom_sort.html">Live DOM ordering</a></li>
1826
						</ul>
1827
					</div>
1828
				</div>
1829
 
1830
				<div class="epilogue">
1831
					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
1832
					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
1833
					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
1834
 
1835
					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
1836
					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
1837
				</div>
1838
			</div>
1839
		</div>
1840
	</section>
1841
</body>
1842
</html>