WebSVN - Integrator Subversion - Blame - Rev 1 - /DOCUMENTOS E ANALISE/telas/assets/global/plugins/datatables/examples/plug-ins/dom

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

Subversion Repositories Integrator Subversion

(root)/DOCUMENTOS E ANALISE/telas/assets/global/plugins/datatables/examples/plug-ins/dom_sort.html - Rev 1