/[projects]/misc/horsensspejder-web/jquery/DataTables-1.9.4/extras/AutoFill/callbacks.html
ViewVC logotype

Contents of /misc/horsensspejder-web/jquery/DataTables-1.9.4/extras/AutoFill/callbacks.html

Parent Directory Parent Directory | Revision Log Revision Log

Revision 2125 - (show annotations) (download) (as text)
Wed Mar 12 19:30:05 2014 UTC (10 years, 3 months ago) by torben
File MIME type: text/html
File size: 14578 byte(s) 
initial import
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 </style>
13 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
14 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
15 <script type="text/javascript" charset="utf-8" src="media/js/AutoFill.js"></script>
16 <script type="text/javascript" charset="utf-8">
17 $(document).ready( function () {
18 var oTable = $('#example').dataTable();
19 new AutoFill( oTable, {
20 "aoColumnDefs": [ {
21 "fnCallback": function ( ao ) {
22 var n = document.getElementById('output');
23 for ( var i=0, iLen=ao.length ; i<iLen ; i++ ) {
24 n.innerHTML += "Update: old value: {"+
25 ao[i].oldValue+"} - new value: {"+ao[i].newValue+"}<br>";
26 }
27 n.scrollTop = n.scrollHeight;
28 },
29 "aTargets": [ "_all" ]
30 } ]
31 } );
32 } );
33 </script>
34 </head>
35 <body id="dt_example">
36 <div id="container">
37 <div class="full_width big">
38 AutoFill example
39 </div>
40
41 <h1>Preamble</h1>
42 <p>
43 AutoFill provides a number of customisable callback functions so you can tailor it's
44 actions to exactly what you need. This specific example shows fnCallback, which is fired when the mouse is released. Further documentation is below.
45 </p>
46
47 <ul>
48 <li>
49 <b>fnRead</b> - Called when a cell is read for it's value. This allows you to override the default of reading the HTML value (or 'input' elements value if there is one present). For example reading the value from a select list.
50 <ul>
51 <li>Parameter 1: Node - TD element to be read from</li>
52 <li>Returns: String - read value</li>
53 </ul>
54 </li>
55 <li>
56 <b>fnWrite</b> - Called when a cell is to read to. This allows you to write in a specific format, or perhaps to an element within the cell.
57 <ul>
58 <li>Parameter 1: Node - TD element to be written to</li>
59 <li>Parameter 2: String - Value to write</li>
60 <li>Parameter 3: Boolean - Last cell to be written (useful for speeding up DataTables' fnUpdate)</li>
61 <li>Returns: void</li>
62 </ul>
63 </li>
64 <li>
65 <b>fnStep</b> - Called to calculate the new value to give to a cell
66 <ul>
67 <li>Parameter 1: Node - TD element to be written to</li>
68 <li>Parameter 2: String - Statement with a token to be replace with the calculated value</li>
69 <li>Parameter 3: Int - Step counter</li>
70 <li>Parameter 4: Boolean - increment (true), or decrement (false)</li>
71 <li>Parameter 5: String - Token to replace</li>
72 <li>Returns: String - string to write into the cell</li>
73 </ul>
74 </li>
75 <li>
76 <b>fnCallback</b> - Called when the AutoFill is complete, with information about the fill. This can be useful for updating a server database for example.
77 <ul>
78 <li>Parameter 1: Array - An array of objects with information about each cell that was written to. Object parameters are: "td", "newValue" and "oldValue".</li>
79 <li>Returns: void</li>
80 </ul>
81 </li>
82 </ul>
83
84
85 <h1>Live example</h1>
86 <form>
87 <div id="output" style="height: 100px; overflow: scroll;">
88 Information about each update will appear here.<br><br>
89 </div>
90 <div id="demo">
91 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
92 <thead>
93 <tr>
94 <th>Rendering engine</th>
95 <th>Browser</th>
96 <th>Platform(s)</th>
97 <th>Engine version</th>
98 <th>CSS grade</th>
99 </tr>
100 </thead>
101 <tfoot>
102 <tr>
103 <th>Rendering engine</th>
104 <th>Browser</th>
105 <th>Platform(s)</th>
106 <th>Engine version</th>
107 <th>CSS grade</th>
108 </tr>
109 </tfoot>
110 <tbody>
111 <tr class="odd_gradeX">
112 <td>Trident</td>
113 <td>Internet Explorer 4.0</td>
114 <td>Win 95+ (Entity: &amp;)</td>
115 <td class="center">4</td>
116 <td class="center">X</td>
117 </tr>
118 <tr class="even_gradeC">
119 <td>Trident</td>
120 <td>Internet Explorer 5.0</td>
121 <td>Win 95+</td>
122 <td class="center">5</td>
123 <td class="center">C</td>
124 </tr>
125 <tr class="odd_gradeA">
126 <td>Trident</td>
127 <td>Internet Explorer 5.5</td>
128 <td>Win 95+</td>
129 <td class="center">5.5</td>
130 <td class="center">A</td>
131 </tr>
132 <tr class="even_gradeA">
133 <td>Trident</td>
134 <td>Internet Explorer 6</td>
135 <td>Win 98+</td>
136 <td class="center">6</td>
137 <td class="center">A</td>
138 </tr>
139 <tr class="odd_gradeA">
140 <td>Trident</td>
141 <td>Internet Explorer 7</td>
142 <td>Win XP SP2+</td>
143 <td class="center">7</td>
144 <td class="center">A</td>
145 </tr>
146 <tr class="even_gradeA">
147 <td>Trident</td>
148 <td>AOL browser (AOL desktop)</td>
149 <td>Win XP</td>
150 <td class="center">6</td>
151 <td class="center">A</td>
152 </tr>
153 <tr class="odd_gradeA">
154 <td>Gecko (UTF-8: $¢€)</td>
155 <td>Firefox 1.0</td>
156 <td>Win 98+ / OSX.2+</td>
157 <td class="center">1.7</td>
158 <td class="center">A</td>
159 </tr>
160 <tr class="even_gradeA">
161 <td>Gecko</td>
162 <td>Firefox 1.5</td>
163 <td>Win 98+ / OSX.2+</td>
164 <td class="center">1.8</td>
165 <td class="center">A</td>
166 </tr>
167 <tr class="odd_gradeA">
168 <td>Gecko</td>
169 <td>Firefox 2.0</td>
170 <td>Win 98+ / OSX.2+</td>
171 <td class="center">1.8</td>
172 <td class="center">A</td>
173 </tr>
174 <tr class="even_gradeA">
175 <td>Gecko</td>
176 <td>Firefox 3.0</td>
177 <td>Win 2k+ / OSX.3+</td>
178 <td class="center">1.9</td>
179 <td class="center">A</td>
180 </tr>
181 <tr class="odd_gradeA">
182 <td>Gecko</td>
183 <td>Camino 1.0</td>
184 <td>OSX.2+</td>
185 <td class="center">1.8</td>
186 <td class="center">A</td>
187 </tr>
188 <tr class="even_gradeA">
189 <td>Gecko</td>
190 <td>Camino 1.5</td>
191 <td>OSX.3+</td>
192 <td class="center">1.8</td>
193 <td class="center">A</td>
194 </tr>
195 <tr class="odd_gradeA">
196 <td>Gecko</td>
197 <td>Netscape 7.2</td>
198 <td>Win 95+ / Mac OS 8.6-9.2</td>
199 <td class="center">1.7</td>
200 <td class="center">A</td>
201 </tr>
202 <tr class="even_gradeA">
203 <td>Gecko</td>
204 <td>Netscape Browser 8</td>
205 <td>Win 98SE+</td>
206 <td class="center">1.7</td>
207 <td class="center">A</td>
208 </tr>
209 <tr class="odd_gradeA">
210 <td>Gecko</td>
211 <td>Netscape Navigator 9</td>
212 <td>Win 98+ / OSX.2+</td>
213 <td class="center">1.8</td>
214 <td class="center">A</td>
215 </tr>
216 <tr class="even_gradeA">
217 <td>Gecko</td>
218 <td>Mozilla 1.0</td>
219 <td>Win 95+ / OSX.1+</td>
220 <td class="center">1</td>
221 <td class="center">A</td>
222 </tr>
223 <tr class="odd_gradeA">
224 <td>Gecko</td>
225 <td>Mozilla 1.1</td>
226 <td>Win 95+ / OSX.1+</td>
227 <td class="center">1.1</td>
228 <td class="center">A</td>
229 </tr>
230 <tr class="even_gradeA">
231 <td>Gecko</td>
232 <td>Mozilla 1.2</td>
233 <td>Win 95+ / OSX.1+</td>
234 <td class="center">1.2</td>
235 <td class="center">A</td>
236 </tr>
237 <tr class="odd_gradeA">
238 <td>Gecko</td>
239 <td>Mozilla 1.3</td>
240 <td>Win 95+ / OSX.1+</td>
241 <td class="center">1.3</td>
242 <td class="center">A</td>
243 </tr>
244 <tr class="even_gradeA">
245 <td>Gecko</td>
246 <td>Mozilla 1.4</td>
247 <td>Win 95+ / OSX.1+</td>
248 <td class="center">1.4</td>
249 <td class="center">A</td>
250 </tr>
251 <tr class="odd_gradeA">
252 <td>Gecko</td>
253 <td>Mozilla 1.5</td>
254 <td>Win 95+ / OSX.1+</td>
255 <td class="center">1.5</td>
256 <td class="center">A</td>
257 </tr>
258 <tr class="even_gradeA">
259 <td>Gecko</td>
260 <td>Mozilla 1.6</td>
261 <td>Win 95+ / OSX.1+</td>
262 <td class="center">1.6</td>
263 <td class="center">A</td>
264 </tr>
265 <tr class="odd_gradeA">
266 <td>Gecko</td>
267 <td>Mozilla 1.7</td>
268 <td>Win 98+ / OSX.1+</td>
269 <td class="center">1.7</td>
270 <td class="center">A</td>
271 </tr>
272 <tr class="even_gradeA">
273 <td>Gecko</td>
274 <td>Mozilla 1.8</td>
275 <td>Win 98+ / OSX.1+</td>
276 <td class="center">1.8</td>
277 <td class="center">A</td>
278 </tr>
279 <tr class="odd_gradeA">
280 <td>Gecko</td>
281 <td>Seamonkey 1.1</td>
282 <td>Win 98+ / OSX.2+</td>
283 <td class="center">1.8</td>
284 <td class="center">A</td>
285 </tr>
286 <tr class="even_gradeA">
287 <td>Gecko</td>
288 <td>Epiphany 2.20</td>
289 <td>Gnome</td>
290 <td class="center">1.8</td>
291 <td class="center">A</td>
292 </tr>
293 <tr class="odd_gradeA">
294 <td>Webkit</td>
295 <td>Safari 1.2</td>
296 <td>OSX.3</td>
297 <td class="center">125.5</td>
298 <td class="center">A</td>
299 </tr>
300 <tr class="even_gradeA">
301 <td>Webkit</td>
302 <td>Safari 1.3</td>
303 <td>OSX.3</td>
304 <td class="center">312.8</td>
305 <td class="center">A</td>
306 </tr>
307 <tr class="odd_gradeA">
308 <td>Webkit</td>
309 <td>Safari 2.0</td>
310 <td>OSX.4+</td>
311 <td class="center">419.3</td>
312 <td class="center">A</td>
313 </tr>
314 <tr class="even_gradeA">
315 <td>Webkit</td>
316 <td>Safari 3.0</td>
317 <td>OSX.4+</td>
318 <td class="center">522.1</td>
319 <td class="center">A</td>
320 </tr>
321 <tr class="odd_gradeA">
322 <td>Webkit</td>
323 <td>OmniWeb 5.5</td>
324 <td>OSX.4+</td>
325 <td class="center">420</td>
326 <td class="center">A</td>
327 </tr>
328 <tr class="even_gradeA">
329 <td>Webkit</td>
330 <td>iPod Touch / iPhone</td>
331 <td>iPod</td>
332 <td class="center">420.1</td>
333 <td class="center">A</td>
334 </tr>
335 <tr class="odd_gradeA">
336 <td>Webkit</td>
337 <td>S60</td>
338 <td>S60</td>
339 <td class="center">413</td>
340 <td class="center">A</td>
341 </tr>
342 <tr class="even_gradeA">
343 <td>Presto</td>
344 <td>Opera 7.0</td>
345 <td>Win 95+ / OSX.1+</td>
346 <td class="center">-</td>
347 <td class="center">A</td>
348 </tr>
349 <tr class="odd_gradeA">
350 <td>Presto</td>
351 <td>Opera 7.5</td>
352 <td>Win 95+ / OSX.2+</td>
353 <td class="center">-</td>
354 <td class="center">A</td>
355 </tr>
356 <tr class="even_gradeA">
357 <td>Presto</td>
358 <td>Opera 8.0</td>
359 <td>Win 95+ / OSX.2+</td>
360 <td class="center">-</td>
361 <td class="center">A</td>
362 </tr>
363 <tr class="odd_gradeA">
364 <td>Presto</td>
365 <td>Opera 8.5</td>
366 <td>Win 95+ / OSX.2+</td>
367 <td class="center">-</td>
368 <td class="center">A</td>
369 </tr>
370 <tr class="even_gradeA">
371 <td>Presto</td>
372 <td>Opera 9.0</td>
373 <td>Win 95+ / OSX.3+</td>
374 <td class="center">-</td>
375 <td class="center">A</td>
376 </tr>
377 <tr class="odd_gradeA">
378 <td>Presto</td>
379 <td>Opera 9.2</td>
380 <td>Win 88+ / OSX.3+</td>
381 <td class="center">-</td>
382 <td class="center">A</td>
383 </tr>
384 <tr class="even_gradeA">
385 <td>Presto</td>
386 <td>Opera 9.5</td>
387 <td>Win 88+ / OSX.3+</td>
388 <td class="center">-</td>
389 <td class="center">A</td>
390 </tr>
391 <tr class="odd_gradeA">
392 <td>Presto</td>
393 <td>Opera for Wii</td>
394 <td>Wii</td>
395 <td class="center">-</td>
396 <td class="center">A</td>
397 </tr>
398 <tr class="even_gradeA">
399 <td>Presto</td>
400 <td>Nokia N800</td>
401 <td>N800</td>
402 <td class="center">-</td>
403 <td class="center">A</td>
404 </tr>
405 <tr class="odd_gradeA">
406 <td>Presto</td>
407 <td>Nintendo DS browser</td>
408 <td>Nintendo DS</td>
409 <td class="center">8.5</td>
410 <td class="center">C/A<sup>1</sup></td>
411 </tr>
412 <tr class="even_gradeC">
413 <td>KHTML</td>
414 <td>Konqureror 3.1</td>
415 <td>KDE 3.1</td>
416 <td class="center">3.1</td>
417 <td class="center">C</td>
418 </tr>
419 <tr class="odd_gradeA">
420 <td>KHTML</td>
421 <td>Konqureror 3.3</td>
422 <td>KDE 3.3</td>
423 <td class="center">3.3</td>
424 <td class="center">A</td>
425 </tr>
426 <tr class="even_gradeA">
427 <td>KHTML</td>
428 <td>Konqureror 3.5</td>
429 <td>KDE 3.5</td>
430 <td class="center">3.5</td>
431 <td class="center">A</td>
432 </tr>
433 <tr class="odd_gradeX">
434 <td>Tasman</td>
435 <td>Internet Explorer 4.5</td>
436 <td>Mac OS 8-9</td>
437 <td class="center">-</td>
438 <td class="center">X</td>
439 </tr>
440 <tr class="even_gradeC">
441 <td>Tasman</td>
442 <td>Internet Explorer 5.1</td>
443 <td>Mac OS 7.6-9</td>
444 <td class="center">1</td>
445 <td class="center">C</td>
446 </tr>
447 <tr class="odd_gradeC">
448 <td>Tasman</td>
449 <td>Internet Explorer 5.2</td>
450 <td>Mac OS 8-X</td>
451 <td class="center">1</td>
452 <td class="center">C</td>
453 </tr>
454 <tr class="even_gradeA">
455 <td>Misc</td>
456 <td>NetFront 3.1</td>
457 <td>Embedded devices</td>
458 <td class="center">-</td>
459 <td class="center">C</td>
460 </tr>
461 <tr class="odd_gradeA">
462 <td>Misc</td>
463 <td>NetFront 3.4</td>
464 <td>Embedded devices</td>
465 <td class="center">-</td>
466 <td class="center">A</td>
467 </tr>
468 <tr class="even_gradeX">
469 <td>Misc</td>
470 <td>Dillo 0.8</td>
471 <td>Embedded devices</td>
472 <td class="center">-</td>
473 <td class="center">X</td>
474 </tr>
475 <tr class="odd_gradeX">
476 <td>Misc</td>
477 <td>Links</td>
478 <td>Text only</td>
479 <td class="center">-</td>
480 <td class="center">X</td>
481 </tr>
482 <tr class="even_gradeX">
483 <td>Misc</td>
484 <td>Lynx</td>
485 <td>Text only</td>
486 <td class="center">-</td>
487 <td class="center">X</td>
488 </tr>
489 <tr class="odd_gradeC">
490 <td>Misc</td>
491 <td>IE Mobile</td>
492 <td>Windows Mobile 6</td>
493 <td class="center">-</td>
494 <td class="center">C</td>
495 </tr>
496 <tr class="even_gradeC">
497 <td>Misc</td>
498 <td>PSP browser</td>
499 <td>PSP</td>
500 <td class="center">-</td>
501 <td class="center">C</td>
502 </tr>
503 <tr class="odd_gradeU">
504 <td>Other browsers</td>
505 <td>All others</td>
506 <td>-</td>
507 <td class="center">-</td>
508 <td class="center">U</td>
509 </tr>
510 </tbody>
511 </table>
512 </div>
513 </form>
514 <div class="spacer"></div>
515
516
517 <h1>Examples</h1>
518 <ul>
519 <li><a href="index.html">Basic initialisation</a></li>
520 <li><a href="columns.html">Selecting which columns to provide AutoFill on</a></li>
521 <li><a href="scrolling.html">Scrolling a DataTable using fill</a></li>
522 <li><a href="inputs.html">Using with input elements</a></li>
523 <li><a href="callbacks.html">Customisation using callback functions</a></li>
524 </ul>
525
526
527 <h1>Initialisation code</h1>
528 <pre>$(document).ready( function () {
529 var oTable = $('#example').dataTable();
530 new AutoFill( oTable, {
531 "aoColumnDefs": [ {
532 "fnCallback": function ( ao ) {
533 var n = document.getElementById('output');
534 for ( var i=0, iLen=ao.length ; i&lt;iLen ; i++ ) {
535 n.innerHTML += "Update: old value: {"+
536 ao[i].oldValue+"} - new value: {"+ao[i].newValue+"}&lt;br&gt;";
537 }
538 n.scrollTop = n.scrollHeight;
539 },
540 "aTargets": [ "_all" ]
541 } ]
542 } );
543 } );</pre>
544
545 <div id="footer" style="text-align:center;">
546 <span style="font-size:10px;">
547 AutoFill and DataTables &copy; Allan Jardine 2009-2010.<br>
548 </span>
549 </div>
550 </div>
551 </body>
552 </html>

Properties

Name Value
svn:executable *
  ViewVC Help
Powered by ViewVC 1.1.20