1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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">
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% }
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 )
21 $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
22 aData.push( this.value );
27 $(document).ready( function () {
28 var oTable = $('#example').dataTable( {
30 { "sSortDataType": "dom-text", "aTargets": [ "_all" ] },
31 { "sType": "numeric", "aTargets": [ -2 ] }
34 new AutoFill( oTable );
38 <body id="dt_example">
40 <div class="full_width big">
41 AutoFill example with input elements
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).
56 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
59 <th>Rendering engine</th>
62 <th>Engine version</th>
68 <th>Rendering engine</th>
71 <th>Engine version</th>
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: &)"></td>
80 <td class="center"><input type="text" value="4"></td>
81 <td class="center"><input type="text" value="X"></td>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
479 <div class="spacer"></div>
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>
492 <h1>Initialisation code</h1>
493 <pre>$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
496 $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
497 aData.push( this.value );
502 $(document).ready( function () {
503 var oTable = $('#example').dataTable( {
505 { "sSortDataType": "dom-text", "aTargets": [ "_all" ] },
506 { "sType": "numeric", "aTargets": [ -2 ] }
509 new AutoFill( oTable );
512 <div id="footer" style="text-align:center;">
513 <span style="font-size:10px;">
514 AutoFill and DataTables © Allan Jardine 2009-2010.<br>