Mercurial > repos > saskia-hiltemann > ireport_devel

comparison DataTables-1.9.4/extras/AutoFill/inputs.html @ 16:3c697a0bc415 draft default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Uploaded
author saskia-hiltemann
date Wed, 06 Sep 2017 05:24:32 -0400
parents 3c160414da2e
children
comparison
equal deleted inserted replaced
15:1f44fe63e356 16:3c697a0bc415
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
6
7 <title>AutoFill example</title>
8 <style type="text/css" title="currentStyle">
9 @import "../../media/css/demo_page.css";
10 @import "../../media/css/demo_table.css";
11 @import "media/css/AutoFill.css";
12 td input { width: 90% }
13 </style>
14 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
15 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
16 <script type="text/javascript" charset="utf-8" src="media/js/AutoFill.js"></script>
17 <script type="text/javascript" charset="utf-8">
18 $.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
19 {
20 var aData = [];
21 $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
22 aData.push( this.value );
23 } );
24 return aData;
25 }
26
27 $(document).ready( function () {
28 var oTable = $('#example').dataTable( {
29 "aoColumnDefs": [
30 { "sSortDataType": "dom-text", "aTargets": [ "_all" ] },
31 { "sType": "numeric", "aTargets": [ -2 ] }
32 ]
33 } );
34 new AutoFill( oTable );
35 } );
36 </script>
37 </head>
38 <body id="dt_example">
39 <div id="container">
40 <div class="full_width big">
41 AutoFill example with input elements
42 </div>
43
44 <h1>Preamble</h1>
45 <p>
46 AutoFill works with Input elements and Select elements, as well as plain HTML cells. This
47 example shows all inputs cells, combined with DataTables' DOM sorting plug-in. You can
48 even combine input and plain HTML cells if you wanted (useful from something like jEditable).
49 </p>
50
51
52
53 <h1>Live example</h1>
54 <form>
55 <div id="demo">
56 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
57 <thead>
58 <tr>
59 <th>Rendering engine</th>
60 <th>Browser</th>
61 <th>Platform(s)</th>
62 <th>Engine version</th>
63 <th>CSS grade</th>
64 </tr>
65 </thead>
66 <tfoot>
67 <tr>
68 <th>Rendering engine</th>
69 <th>Browser</th>
70 <th>Platform(s)</th>
71 <th>Engine version</th>
72 <th>CSS grade</th>
73 </tr>
74 </tfoot>
75 <tbody>
76 <tr class="odd_gradeX">
77 <td><input type="text" value="Trident"></td>
78 <td><input type="text" value="Internet Explorer 4.0"></td>
79 <td><input type="text" value="Win 95+ (Entity: &amp;)"></td>
80 <td class="center"><input type="text" value="4"></td>
81 <td class="center"><input type="text" value="X"></td>
82 </tr>
83 <tr class="even_gradeC">
84 <td><input type="text" value="Trident"></td>
85 <td><input type="text" value="Internet Explorer 5.0"></td>
86 <td><input type="text" value="Win 95+"></td>
87 <td class="center"><input type="text" value="5"></td>
88 <td class="center"><input type="text" value="C"></td>
89 </tr>
90 <tr class="odd_gradeA">
91 <td><input type="text" value="Trident"></td>
92 <td><input type="text" value="Internet Explorer 5.5"></td>
93 <td><input type="text" value="Win 95+"></td>
94 <td class="center"><input type="text" value="5.5"></td>
95 <td class="center"><input type="text" value="A"></td>
96 </tr>
97 <tr class="even_gradeA">
98 <td><input type="text" value="Trident"></td>
99 <td><input type="text" value="Internet Explorer 6"></td>
100 <td><input type="text" value="Win 98+"></td>
101 <td class="center"><input type="text" value="6"></td>
102 <td class="center"><input type="text" value="A"></td>
103 </tr>
104 <tr class="odd_gradeA">
105 <td><input type="text" value="Trident"></td>
106 <td><input type="text" value="Internet Explorer 7"></td>
107 <td><input type="text" value="Win XP SP2+"></td>
108 <td class="center"><input type="text" value="7"></td>
109 <td class="center"><input type="text" value="A"></td>
110 </tr>
111 <tr class="even_gradeA">
112 <td><input type="text" value="Trident"></td>
113 <td><input type="text" value="AOL browser (AOL desktop)"></td>
114 <td><input type="text" value="Win XP"></td>
115 <td class="center"><input type="text" value="6"></td>
116 <td class="center"><input type="text" value="A"></td>
117 </tr>
118 <tr class="odd_gradeA">
119 <td><input type="text" value="Gecko (UTF-8: $¢€)"></td>
120 <td><input type="text" value="Firefox 1.0"></td>
121 <td><input type="text" value="Win 98+ / OSX.2+"></td>
122 <td class="center"><input type="text" value="1.7"></td>
123 <td class="center"><input type="text" value="A"></td>
124 </tr>
125 <tr class="even_gradeA">
126 <td><input type="text" value="Gecko"></td>
127 <td><input type="text" value="Firefox 1.5"></td>
128 <td><input type="text" value="Win 98+ / OSX.2+"></td>
129 <td class="center"><input type="text" value="1.8"></td>
130 <td class="center"><input type="text" value="A"></td>
131 </tr>
132 <tr class="odd_gradeA">
133 <td><input type="text" value="Gecko"></td>
134 <td><input type="text" value="Firefox 2.0"></td>
135 <td><input type="text" value="Win 98+ / OSX.2+"></td>
136 <td class="center"><input type="text" value="1.8"></td>
137 <td class="center"><input type="text" value="A"></td>
138 </tr>
139 <tr class="even_gradeA">
140 <td><input type="text" value="Gecko"></td>
141 <td><input type="text" value="Firefox 3.0"></td>
142 <td><input type="text" value="Win 2k+ / OSX.3+"></td>
143 <td class="center"><input type="text" value="1.9"></td>
144 <td class="center"><input type="text" value="A"></td>
145 </tr>
146 <tr class="odd_gradeA">
147 <td><input type="text" value="Gecko"></td>
148 <td><input type="text" value="Camino 1.0"></td>
149 <td><input type="text" value="OSX.2+"></td>
150 <td class="center"><input type="text" value="1.8"></td>
151 <td class="center"><input type="text" value="A"></td>
152 </tr>
153 <tr class="even_gradeA">
154 <td><input type="text" value="Gecko"></td>
155 <td><input type="text" value="Camino 1.5"></td>
156 <td><input type="text" value="OSX.3+"></td>
157 <td class="center"><input type="text" value="1.8"></td>
158 <td class="center"><input type="text" value="A"></td>
159 </tr>
160 <tr class="odd_gradeA">
161 <td><input type="text" value="Gecko"></td>
162 <td><input type="text" value="Netscape 7.2"></td>
163 <td><input type="text" value="Win 95+ / Mac OS 8.6-9.2"></td>
164 <td class="center"><input type="text" value="1.7"></td>
165 <td class="center"><input type="text" value="A"></td>
166 </tr>
167 <tr class="even_gradeA">
168 <td><input type="text" value="Gecko"></td>
169 <td><input type="text" value="Netscape Browser 8"></td>
170 <td><input type="text" value="Win 98SE+"></td>
171 <td class="center"><input type="text" value="1.7"></td>
172 <td class="center"><input type="text" value="A"></td>
173 </tr>
174 <tr class="odd_gradeA">
175 <td><input type="text" value="Gecko"></td>
176 <td><input type="text" value="Netscape Navigator 9"></td>
177 <td><input type="text" value="Win 98+ / OSX.2+"></td>
178 <td class="center"><input type="text" value="1.8"></td>
179 <td class="center"><input type="text" value="A"></td>
180 </tr>
181 <tr class="even_gradeA">
182 <td><input type="text" value="Gecko"></td>
183 <td><input type="text" value="Mozilla 1.0"></td>
184 <td><input type="text" value="Win 95+ / OSX.1+"></td>
185 <td class="center"><input type="text" value="1"></td>
186 <td class="center"><input type="text" value="A"></td>
187 </tr>
188 <tr class="odd_gradeA">
189 <td><input type="text" value="Gecko"></td>
190 <td><input type="text" value="Mozilla 1.1"></td>
191 <td><input type="text" value="Win 95+ / OSX.1+"></td>
192 <td class="center"><input type="text" value="1.1"></td>
193 <td class="center"><input type="text" value="A"></td>
194 </tr>
195 <tr class="even_gradeA">
196 <td><input type="text" value="Gecko"></td>
197 <td><input type="text" value="Mozilla 1.2"></td>
198 <td><input type="text" value="Win 95+ / OSX.1+"></td>
199 <td class="center"><input type="text" value="1.2"></td>
200 <td class="center"><input type="text" value="A"></td>
201 </tr>
202 <tr class="odd_gradeA">
203 <td><input type="text" value="Gecko"></td>
204 <td><input type="text" value="Mozilla 1.3"></td>
205 <td><input type="text" value="Win 95+ / OSX.1+"></td>
206 <td class="center"><input type="text" value="1.3"></td>
207 <td class="center"><input type="text" value="A"></td>
208 </tr>
209 <tr class="even_gradeA">
210 <td><input type="text" value="Gecko"></td>
211 <td><input type="text" value="Mozilla 1.4"></td>
212 <td><input type="text" value="Win 95+ / OSX.1+"></td>
213 <td class="center"><input type="text" value="1.4"></td>
214 <td class="center"><input type="text" value="A"></td>
215 </tr>
216 <tr class="odd_gradeA">
217 <td><input type="text" value="Gecko"></td>
218 <td><input type="text" value="Mozilla 1.5"></td>
219 <td><input type="text" value="Win 95+ / OSX.1+"></td>
220 <td class="center"><input type="text" value="1.5"></td>
221 <td class="center"><input type="text" value="A"></td>
222 </tr>
223 <tr class="even_gradeA">
224 <td><input type="text" value="Gecko"></td>
225 <td><input type="text" value="Mozilla 1.6"></td>
226 <td><input type="text" value="Win 95+ / OSX.1+"></td>
227 <td class="center"><input type="text" value="1.6"></td>
228 <td class="center"><input type="text" value="A"></td>
229 </tr>
230 <tr class="odd_gradeA">
231 <td><input type="text" value="Gecko"></td>
232 <td><input type="text" value="Mozilla 1.7"></td>
233 <td><input type="text" value="Win 98+ / OSX.1+"></td>
234 <td class="center"><input type="text" value="1.7"></td>
235 <td class="center"><input type="text" value="A"></td>
236 </tr>
237 <tr class="even_gradeA">
238 <td><input type="text" value="Gecko"></td>
239 <td><input type="text" value="Mozilla 1.8"></td>
240 <td><input type="text" value="Win 98+ / OSX.1+"></td>
241 <td class="center"><input type="text" value="1.8"></td>
242 <td class="center"><input type="text" value="A"></td>
243 </tr>
244 <tr class="odd_gradeA">
245 <td><input type="text" value="Gecko"></td>
246 <td><input type="text" value="Seamonkey 1.1"></td>
247 <td><input type="text" value="Win 98+ / OSX.2+"></td>
248 <td class="center"><input type="text" value="1.8"></td>
249 <td class="center"><input type="text" value="A"></td>
250 </tr>
251 <tr class="even_gradeA">
252 <td><input type="text" value="Gecko"></td>
253 <td><input type="text" value="Epiphany 2.20"></td>
254 <td><input type="text" value="Gnome"></td>
255 <td class="center"><input type="text" value="1.8"></td>
256 <td class="center"><input type="text" value="A"></td>
257 </tr>
258 <tr class="odd_gradeA">
259 <td><input type="text" value="Webkit"></td>
260 <td><input type="text" value="Safari 1.2"></td>
261 <td><input type="text" value="OSX.3"></td>
262 <td class="center"><input type="text" value="125.5"></td>
263 <td class="center"><input type="text" value="A"></td>
264 </tr>
265 <tr class="even_gradeA">
266 <td><input type="text" value="Webkit"></td>
267 <td><input type="text" value="Safari 1.3"></td>
268 <td><input type="text" value="OSX.3"></td>
269 <td class="center"><input type="text" value="312.8"></td>
270 <td class="center"><input type="text" value="A"></td>
271 </tr>
272 <tr class="odd_gradeA">
273 <td><input type="text" value="Webkit"></td>
274 <td><input type="text" value="Safari 2.0"></td>
275 <td><input type="text" value="OSX.4+"></td>
276 <td class="center"><input type="text" value="419.3"></td>
277 <td class="center"><input type="text" value="A"></td>
278 </tr>
279 <tr class="even_gradeA">
280 <td><input type="text" value="Webkit"></td>
281 <td><input type="text" value="Safari 3.0"></td>
282 <td><input type="text" value="OSX.4+"></td>
283 <td class="center"><input type="text" value="522.1"></td>
284 <td class="center"><input type="text" value="A"></td>
285 </tr>
286 <tr class="odd_gradeA">
287 <td><input type="text" value="Webkit"></td>
288 <td><input type="text" value="OmniWeb 5.5"></td>
289 <td><input type="text" value="OSX.4+"></td>
290 <td class="center"><input type="text" value="420"></td>
291 <td class="center"><input type="text" value="A"></td>
292 </tr>
293 <tr class="even_gradeA">
294 <td><input type="text" value="Webkit"></td>
295 <td><input type="text" value="iPod Touch / iPhone"></td>
296 <td><input type="text" value="iPod"></td>
297 <td class="center"><input type="text" value="420.1"></td>
298 <td class="center"><input type="text" value="A"></td>
299 </tr>
300 <tr class="odd_gradeA">
301 <td><input type="text" value="Webkit"></td>
302 <td><input type="text" value="S60"></td>
303 <td><input type="text" value="S60"></td>
304 <td class="center"><input type="text" value="413"></td>
305 <td class="center"><input type="text" value="A"></td>
306 </tr>
307 <tr class="even_gradeA">
308 <td><input type="text" value="Presto"></td>
309 <td><input type="text" value="Opera 7.0"></td>
310 <td><input type="text" value="Win 95+ / OSX.1+"></td>
311 <td class="center"><input type="text" value="-"></td>
312 <td class="center"><input type="text" value="A"></td>
313 </tr>
314 <tr class="odd_gradeA">
315 <td><input type="text" value="Presto"></td>
316 <td><input type="text" value="Opera 7.5"></td>
317 <td><input type="text" value="Win 95+ / OSX.2+"></td>
318 <td class="center"><input type="text" value="-"></td>
319 <td class="center"><input type="text" value="A"></td>
320 </tr>
321 <tr class="even_gradeA">
322 <td><input type="text" value="Presto"></td>
323 <td><input type="text" value="Opera 8.0"></td>
324 <td><input type="text" value="Win 95+ / OSX.2+"></td>
325 <td class="center"><input type="text" value="-"></td>
326 <td class="center"><input type="text" value="A"></td>
327 </tr>
328 <tr class="odd_gradeA">
329 <td><input type="text" value="Presto"></td>
330 <td><input type="text" value="Opera 8.5"></td>
331 <td><input type="text" value="Win 95+ / OSX.2+"></td>
332 <td class="center"><input type="text" value="-"></td>
333 <td class="center"><input type="text" value="A"></td>
334 </tr>
335 <tr class="even_gradeA">
336 <td><input type="text" value="Presto"></td>
337 <td><input type="text" value="Opera 9.0"></td>
338 <td><input type="text" value="Win 95+ / OSX.3+"></td>
339 <td class="center"><input type="text" value="-"></td>
340 <td class="center"><input type="text" value="A"></td>
341 </tr>
342 <tr class="odd_gradeA">
343 <td><input type="text" value="Presto"></td>
344 <td><input type="text" value="Opera 9.2"></td>
345 <td><input type="text" value="Win 88+ / OSX.3+"></td>
346 <td class="center"><input type="text" value="-"></td>
347 <td class="center"><input type="text" value="A"></td>
348 </tr>
349 <tr class="even_gradeA">
350 <td><input type="text" value="Presto"></td>
351 <td><input type="text" value="Opera 9.5"></td>
352 <td><input type="text" value="Win 88+ / OSX.3+"></td>
353 <td class="center"><input type="text" value="-"></td>
354 <td class="center"><input type="text" value="A"></td>
355 </tr>
356 <tr class="odd_gradeA">
357 <td><input type="text" value="Presto"></td>
358 <td><input type="text" value="Opera for Wii"></td>
359 <td><input type="text" value="Wii"></td>
360 <td class="center"><input type="text" value="-"></td>
361 <td class="center"><input type="text" value="A"></td>
362 </tr>
363 <tr class="even_gradeA">
364 <td><input type="text" value="Presto"></td>
365 <td><input type="text" value="Nokia N800"></td>
366 <td><input type="text" value="N800"></td>
367 <td class="center"><input type="text" value="-"></td>
368 <td class="center"><input type="text" value="A"></td>
369 </tr>
370 <tr class="odd_gradeA">
371 <td><input type="text" value="Presto"></td>
372 <td><input type="text" value="Nintendo DS browser"></td>
373 <td><input type="text" value="Nintendo DS"></td>
374 <td class="center"><input type="text" value="8.5"></td>
375 <td class="center"><input type="text" value="C/A<sup>1</sup>"></td>
376 </tr>
377 <tr class="even_gradeC">
378 <td><input type="text" value="KHTML"></td>
379 <td><input type="text" value="Konqureror 3.1"></td>
380 <td><input type="text" value="KDE 3.1"></td>
381 <td class="center"><input type="text" value="3.1"></td>
382 <td class="center"><input type="text" value="C"></td>
383 </tr>
384 <tr class="odd_gradeA">
385 <td><input type="text" value="KHTML"></td>
386 <td><input type="text" value="Konqureror 3.3"></td>
387 <td><input type="text" value="KDE 3.3"></td>
388 <td class="center"><input type="text" value="3.3"></td>
389 <td class="center"><input type="text" value="A"></td>
390 </tr>
391 <tr class="even_gradeA">
392 <td><input type="text" value="KHTML"></td>
393 <td><input type="text" value="Konqureror 3.5"></td>
394 <td><input type="text" value="KDE 3.5"></td>
395 <td class="center"><input type="text" value="3.5"></td>
396 <td class="center"><input type="text" value="A"></td>
397 </tr>
398 <tr class="odd_gradeX">
399 <td><input type="text" value="Tasman"></td>
400 <td><input type="text" value="Internet Explorer 4.5"></td>
401 <td><input type="text" value="Mac OS 8-9"></td>
402 <td class="center"><input type="text" value="-"></td>
403 <td class="center"><input type="text" value="X"></td>
404 </tr>
405 <tr class="even_gradeC">
406 <td><input type="text" value="Tasman"></td>
407 <td><input type="text" value="Internet Explorer 5.1"></td>
408 <td><input type="text" value="Mac OS 7.6-9"></td>
409 <td class="center"><input type="text" value="1"></td>
410 <td class="center"><input type="text" value="C"></td>
411 </tr>
412 <tr class="odd_gradeC">
413 <td><input type="text" value="Tasman"></td>
414 <td><input type="text" value="Internet Explorer 5.2"></td>
415 <td><input type="text" value="Mac OS 8-X"></td>
416 <td class="center"><input type="text" value="1"></td>
417 <td class="center"><input type="text" value="C"></td>
418 </tr>
419 <tr class="even_gradeA">
420 <td><input type="text" value="Misc"></td>
421 <td><input type="text" value="NetFront 3.1"></td>
422 <td><input type="text" value="Embedded devices"></td>
423 <td class="center"><input type="text" value="-"></td>
424 <td class="center"><input type="text" value="C"></td>
425 </tr>
426 <tr class="odd_gradeA">
427 <td><input type="text" value="Misc"></td>
428 <td><input type="text" value="NetFront 3.4"></td>
429 <td><input type="text" value="Embedded devices"></td>
430 <td class="center"><input type="text" value="-"></td>
431 <td class="center"><input type="text" value="A"></td>
432 </tr>
433 <tr class="even_gradeX">
434 <td><input type="text" value="Misc"></td>
435 <td><input type="text" value="Dillo 0.8"></td>
436 <td><input type="text" value="Embedded devices"></td>
437 <td class="center"><input type="text" value="-"></td>
438 <td class="center"><input type="text" value="X"></td>
439 </tr>
440 <tr class="odd_gradeX">
441 <td><input type="text" value="Misc"></td>
442 <td><input type="text" value="Links"></td>
443 <td><input type="text" value="Text only"></td>
444 <td class="center"><input type="text" value="-"></td>
445 <td class="center"><input type="text" value="X"></td>
446 </tr>
447 <tr class="even_gradeX">
448 <td><input type="text" value="Misc"></td>
449 <td><input type="text" value="Lynx"></td>
450 <td><input type="text" value="Text only"></td>
451 <td class="center"><input type="text" value="-"></td>
452 <td class="center"><input type="text" value="X"></td>
453 </tr>
454 <tr class="odd_gradeC">
455 <td><input type="text" value="Misc"></td>
456 <td><input type="text" value="IE Mobile"></td>
457 <td><input type="text" value="Windows Mobile 6"></td>
458 <td class="center"><input type="text" value="-"></td>
459 <td class="center"><input type="text" value="C"></td>
460 </tr>
461 <tr class="even_gradeC">
462 <td><input type="text" value="Misc"></td>
463 <td><input type="text" value="PSP browser"></td>
464 <td><input type="text" value="PSP"></td>
465 <td class="center"><input type="text" value="-"></td>
466 <td class="center"><input type="text" value="C"></td>
467 </tr>
468 <tr class="odd_gradeU">
469 <td><input type="text" value="Other browsers"></td>
470 <td><input type="text" value="All others"></td>
471 <td><input type="text" value="-"></td>
472 <td class="center"><input type="text" value="-"></td>
473 <td class="center"><input type="text" value="U"></td>
474 </tr>
475 </tbody>
476 </table>
477 </div>
478 </form>
479 <div class="spacer"></div>
480
481
482 <h1>Examples</h1>
483 <ul>
484 <li><a href="index.html">Basic initialisation</a></li>
485 <li><a href="columns.html">Selecting which columns to provide AutoFill on</a></li>
486 <li><a href="scrolling.html">Scrolling a DataTable using fill</a></li>
487 <li><a href="inputs.html">Using with input elements</a></li>
488 <li><a href="callbacks.html">Customisation using callback functions</a></li>
489 </ul>
490
491
492 <h1>Initialisation code</h1>
493 <pre>$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
494 {
495 var aData = [];
496 $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
497 aData.push( this.value );
498 } );
499 return aData;
500 }
501
502 $(document).ready( function () {
503 var oTable = $('#example').dataTable( {
504 "aoColumnDefs": [
505 { "sSortDataType": "dom-text", "aTargets": [ "_all" ] },
506 { "sType": "numeric", "aTargets": [ -2 ] }
507 ]
508 } );
509 new AutoFill( oTable );
510 } );</pre>
511
512 <div id="footer" style="text-align:center;">
513 <span style="font-size:10px;">
514 AutoFill and DataTables &copy; Allan Jardine 2009-2010.<br>
515 </span>
516 </div>
517 </div>
518 </body>
519 </html>