Mercurial > repos > saskia-hiltemann > ireport
comparison DataTables-1.9.4/extras/ColReorder/col_filter.html @ 0:ac5f9272033b draft
first upload
author | saskia-hiltemann |
---|---|
date | Tue, 01 Jul 2014 11:42:23 -0400 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:ac5f9272033b |
---|---|
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>ColReorder 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/ColReorder.css"; | |
12 @import "../ColVis/media/css/ColVis.css"; | |
13 thead input { width: 100% } | |
14 input.search_init { color: #999 } | |
15 </style> | |
16 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script> | |
17 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script> | |
18 <script type="text/javascript" charset="utf-8" src="media/js/ColReorder.js"></script> | |
19 <script type="text/javascript" charset="utf-8" src="../ColVis/media/js/ColVis.js"></script> | |
20 <script type="text/javascript" charset="utf-8"> | |
21 $(document).ready(function() { | |
22 var oTable; | |
23 | |
24 /* Add the events etc before DataTables hides a column */ | |
25 $("thead input").keyup( function () { | |
26 /* Filter on the column (the index) of this element */ | |
27 oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex( | |
28 oTable.fnSettings(), $("thead input").index(this) ) ); | |
29 } ); | |
30 | |
31 /* | |
32 * Support functions to provide a little bit of 'user friendlyness' to the textboxes | |
33 */ | |
34 $("thead input").each( function (i) { | |
35 this.initVal = this.value; | |
36 } ); | |
37 | |
38 $("thead input").focus( function () { | |
39 if ( this.className == "search_init" ) | |
40 { | |
41 this.className = ""; | |
42 this.value = ""; | |
43 } | |
44 } ); | |
45 | |
46 $("thead input").blur( function (i) { | |
47 if ( this.value == "" ) | |
48 { | |
49 this.className = "search_init"; | |
50 this.value = this.initVal; | |
51 } | |
52 } ); | |
53 | |
54 oTable = $('#example').dataTable( { | |
55 "sDom": 'RC<"clear">lfrtip', | |
56 "aoColumnDefs": [ | |
57 { "bVisible": false, "aTargets": [ 2 ] } | |
58 ], | |
59 "oLanguage": { | |
60 "sSearch": "Search all columns:" | |
61 }, | |
62 "bSortCellsTop": true | |
63 } ); | |
64 } ); | |
65 </script> | |
66 </head> | |
67 <body id="dt_example"> | |
68 <div id="container"> | |
69 <div class="full_width big"> | |
70 ColReorder example with individual column filtering | |
71 </div> | |
72 | |
73 <h1>Preamble</h1> | |
74 <p>This example of how to use ColReorder shows quite a number of different interesting | |
75 properties. Firstly, there is integration with ColVis, then there is the fact that there | |
76 is more than one row in the table header with the second being used for the input | |
77 elements, and finally of course the filtering itself. Note that it is important to use | |
78 the _fnVisibleToColumnIndex() internal function to calculate which column index should | |
79 be given to fnFilter (or you could employ your own methods).</p> | |
80 <p>Please note that this demo requires DataTables 1.8 or later.</p> | |
81 | |
82 <h1>Live example</h1> | |
83 <form> | |
84 <div id="demo"> | |
85 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> | |
86 <thead> | |
87 <tr> | |
88 <th>Rendering engine</th> | |
89 <th>Browser</th> | |
90 <th>Platform(s)</th> | |
91 <th>Engine version</th> | |
92 <th>CSS grade</th> | |
93 </tr> | |
94 <tr> | |
95 <td><input type="text" name="search_engine" value="Search engines" class="search_init" /></td> | |
96 <td><input type="text" name="search_browser" value="Search browsers" class="search_init" /></td> | |
97 <td><input type="text" name="search_platform" value="Search platforms" class="search_init" /></td> | |
98 <td><input type="text" name="search_version" value="Search versions" class="search_init" /></td> | |
99 <td><input type="text" name="search_grade" value="Search grades" class="search_init" /></td> | |
100 </tr> | |
101 </thead> | |
102 <tfoot> | |
103 <tr> | |
104 <th>Rendering engine</th> | |
105 <th>Browser</th> | |
106 <th>Platform(s)</th> | |
107 <th>Engine version</th> | |
108 <th>CSS grade</th> | |
109 </tr> | |
110 </tfoot> | |
111 <tbody> | |
112 <tr class="odd_gradeX"> | |
113 <td>Trident</td> | |
114 <td>Internet Explorer 4.0</td> | |
115 <td>Win 95+ (Entity: &)</td> | |
116 <td class="center">4</td> | |
117 <td class="center">X</td> | |
118 </tr> | |
119 <tr class="even_gradeC"> | |
120 <td>Trident</td> | |
121 <td>Internet Explorer 5.0</td> | |
122 <td>Win 95+</td> | |
123 <td class="center">5</td> | |
124 <td class="center">C</td> | |
125 </tr> | |
126 <tr class="odd_gradeA"> | |
127 <td>Trident</td> | |
128 <td>Internet Explorer 5.5</td> | |
129 <td>Win 95+</td> | |
130 <td class="center">5.5</td> | |
131 <td class="center">A</td> | |
132 </tr> | |
133 <tr class="even_gradeA"> | |
134 <td>Trident</td> | |
135 <td>Internet Explorer 6</td> | |
136 <td>Win 98+</td> | |
137 <td class="center">6</td> | |
138 <td class="center">A</td> | |
139 </tr> | |
140 <tr class="odd_gradeA"> | |
141 <td>Trident</td> | |
142 <td>Internet Explorer 7</td> | |
143 <td>Win XP SP2+</td> | |
144 <td class="center">7</td> | |
145 <td class="center">A</td> | |
146 </tr> | |
147 <tr class="even_gradeA"> | |
148 <td>Trident</td> | |
149 <td>AOL browser (AOL desktop)</td> | |
150 <td>Win XP</td> | |
151 <td class="center">6</td> | |
152 <td class="center">A</td> | |
153 </tr> | |
154 <tr class="odd_gradeA"> | |
155 <td>Gecko (UTF-8: $¢€)</td> | |
156 <td>Firefox 1.0</td> | |
157 <td>Win 98+ / OSX.2+</td> | |
158 <td class="center">1.7</td> | |
159 <td class="center">A</td> | |
160 </tr> | |
161 <tr class="even_gradeA"> | |
162 <td>Gecko</td> | |
163 <td>Firefox 1.5</td> | |
164 <td>Win 98+ / OSX.2+</td> | |
165 <td class="center">1.8</td> | |
166 <td class="center">A</td> | |
167 </tr> | |
168 <tr class="odd_gradeA"> | |
169 <td>Gecko</td> | |
170 <td>Firefox 2.0</td> | |
171 <td>Win 98+ / OSX.2+</td> | |
172 <td class="center">1.8</td> | |
173 <td class="center">A</td> | |
174 </tr> | |
175 <tr class="even_gradeA"> | |
176 <td>Gecko</td> | |
177 <td>Firefox 3.0</td> | |
178 <td>Win 2k+ / OSX.3+</td> | |
179 <td class="center">1.9</td> | |
180 <td class="center">A</td> | |
181 </tr> | |
182 <tr class="odd_gradeA"> | |
183 <td>Gecko</td> | |
184 <td>Camino 1.0</td> | |
185 <td>OSX.2+</td> | |
186 <td class="center">1.8</td> | |
187 <td class="center">A</td> | |
188 </tr> | |
189 <tr class="even_gradeA"> | |
190 <td>Gecko</td> | |
191 <td>Camino 1.5</td> | |
192 <td>OSX.3+</td> | |
193 <td class="center">1.8</td> | |
194 <td class="center">A</td> | |
195 </tr> | |
196 <tr class="odd_gradeA"> | |
197 <td>Gecko</td> | |
198 <td>Netscape 7.2</td> | |
199 <td>Win 95+ / Mac OS 8.6-9.2</td> | |
200 <td class="center">1.7</td> | |
201 <td class="center">A</td> | |
202 </tr> | |
203 <tr class="even_gradeA"> | |
204 <td>Gecko</td> | |
205 <td>Netscape Browser 8</td> | |
206 <td>Win 98SE+</td> | |
207 <td class="center">1.7</td> | |
208 <td class="center">A</td> | |
209 </tr> | |
210 <tr class="odd_gradeA"> | |
211 <td>Gecko</td> | |
212 <td>Netscape Navigator 9</td> | |
213 <td>Win 98+ / OSX.2+</td> | |
214 <td class="center">1.8</td> | |
215 <td class="center">A</td> | |
216 </tr> | |
217 <tr class="even_gradeA"> | |
218 <td>Gecko</td> | |
219 <td>Mozilla 1.0</td> | |
220 <td>Win 95+ / OSX.1+</td> | |
221 <td class="center">1</td> | |
222 <td class="center">A</td> | |
223 </tr> | |
224 <tr class="odd_gradeA"> | |
225 <td>Gecko</td> | |
226 <td>Mozilla 1.1</td> | |
227 <td>Win 95+ / OSX.1+</td> | |
228 <td class="center">1.1</td> | |
229 <td class="center">A</td> | |
230 </tr> | |
231 <tr class="even_gradeA"> | |
232 <td>Gecko</td> | |
233 <td>Mozilla 1.2</td> | |
234 <td>Win 95+ / OSX.1+</td> | |
235 <td class="center">1.2</td> | |
236 <td class="center">A</td> | |
237 </tr> | |
238 <tr class="odd_gradeA"> | |
239 <td>Gecko</td> | |
240 <td>Mozilla 1.3</td> | |
241 <td>Win 95+ / OSX.1+</td> | |
242 <td class="center">1.3</td> | |
243 <td class="center">A</td> | |
244 </tr> | |
245 <tr class="even_gradeA"> | |
246 <td>Gecko</td> | |
247 <td>Mozilla 1.4</td> | |
248 <td>Win 95+ / OSX.1+</td> | |
249 <td class="center">1.4</td> | |
250 <td class="center">A</td> | |
251 </tr> | |
252 <tr class="odd_gradeA"> | |
253 <td>Gecko</td> | |
254 <td>Mozilla 1.5</td> | |
255 <td>Win 95+ / OSX.1+</td> | |
256 <td class="center">1.5</td> | |
257 <td class="center">A</td> | |
258 </tr> | |
259 <tr class="even_gradeA"> | |
260 <td>Gecko</td> | |
261 <td>Mozilla 1.6</td> | |
262 <td>Win 95+ / OSX.1+</td> | |
263 <td class="center">1.6</td> | |
264 <td class="center">A</td> | |
265 </tr> | |
266 <tr class="odd_gradeA"> | |
267 <td>Gecko</td> | |
268 <td>Mozilla 1.7</td> | |
269 <td>Win 98+ / OSX.1+</td> | |
270 <td class="center">1.7</td> | |
271 <td class="center">A</td> | |
272 </tr> | |
273 <tr class="even_gradeA"> | |
274 <td>Gecko</td> | |
275 <td>Mozilla 1.8</td> | |
276 <td>Win 98+ / OSX.1+</td> | |
277 <td class="center">1.8</td> | |
278 <td class="center">A</td> | |
279 </tr> | |
280 <tr class="odd_gradeA"> | |
281 <td>Gecko</td> | |
282 <td>Seamonkey 1.1</td> | |
283 <td>Win 98+ / OSX.2+</td> | |
284 <td class="center">1.8</td> | |
285 <td class="center">A</td> | |
286 </tr> | |
287 <tr class="even_gradeA"> | |
288 <td>Gecko</td> | |
289 <td>Epiphany 2.20</td> | |
290 <td>Gnome</td> | |
291 <td class="center">1.8</td> | |
292 <td class="center">A</td> | |
293 </tr> | |
294 <tr class="odd_gradeA"> | |
295 <td>Webkit</td> | |
296 <td>Safari 1.2</td> | |
297 <td>OSX.3</td> | |
298 <td class="center">125.5</td> | |
299 <td class="center">A</td> | |
300 </tr> | |
301 <tr class="even_gradeA"> | |
302 <td>Webkit</td> | |
303 <td>Safari 1.3</td> | |
304 <td>OSX.3</td> | |
305 <td class="center">312.8</td> | |
306 <td class="center">A</td> | |
307 </tr> | |
308 <tr class="odd_gradeA"> | |
309 <td>Webkit</td> | |
310 <td>Safari 2.0</td> | |
311 <td>OSX.4+</td> | |
312 <td class="center">419.3</td> | |
313 <td class="center">A</td> | |
314 </tr> | |
315 <tr class="even_gradeA"> | |
316 <td>Webkit</td> | |
317 <td>Safari 3.0</td> | |
318 <td>OSX.4+</td> | |
319 <td class="center">522.1</td> | |
320 <td class="center">A</td> | |
321 </tr> | |
322 <tr class="odd_gradeA"> | |
323 <td>Webkit</td> | |
324 <td>OmniWeb 5.5</td> | |
325 <td>OSX.4+</td> | |
326 <td class="center">420</td> | |
327 <td class="center">A</td> | |
328 </tr> | |
329 <tr class="even_gradeA"> | |
330 <td>Webkit</td> | |
331 <td>iPod Touch / iPhone</td> | |
332 <td>iPod</td> | |
333 <td class="center">420.1</td> | |
334 <td class="center">A</td> | |
335 </tr> | |
336 <tr class="odd_gradeA"> | |
337 <td>Webkit</td> | |
338 <td>S60</td> | |
339 <td>S60</td> | |
340 <td class="center">413</td> | |
341 <td class="center">A</td> | |
342 </tr> | |
343 <tr class="even_gradeA"> | |
344 <td>Presto</td> | |
345 <td>Opera 7.0</td> | |
346 <td>Win 95+ / OSX.1+</td> | |
347 <td class="center">-</td> | |
348 <td class="center">A</td> | |
349 </tr> | |
350 <tr class="odd_gradeA"> | |
351 <td>Presto</td> | |
352 <td>Opera 7.5</td> | |
353 <td>Win 95+ / OSX.2+</td> | |
354 <td class="center">-</td> | |
355 <td class="center">A</td> | |
356 </tr> | |
357 <tr class="even_gradeA"> | |
358 <td>Presto</td> | |
359 <td>Opera 8.0</td> | |
360 <td>Win 95+ / OSX.2+</td> | |
361 <td class="center">-</td> | |
362 <td class="center">A</td> | |
363 </tr> | |
364 <tr class="odd_gradeA"> | |
365 <td>Presto</td> | |
366 <td>Opera 8.5</td> | |
367 <td>Win 95+ / OSX.2+</td> | |
368 <td class="center">-</td> | |
369 <td class="center">A</td> | |
370 </tr> | |
371 <tr class="even_gradeA"> | |
372 <td>Presto</td> | |
373 <td>Opera 9.0</td> | |
374 <td>Win 95+ / OSX.3+</td> | |
375 <td class="center">-</td> | |
376 <td class="center">A</td> | |
377 </tr> | |
378 <tr class="odd_gradeA"> | |
379 <td>Presto</td> | |
380 <td>Opera 9.2</td> | |
381 <td>Win 88+ / OSX.3+</td> | |
382 <td class="center">-</td> | |
383 <td class="center">A</td> | |
384 </tr> | |
385 <tr class="even_gradeA"> | |
386 <td>Presto</td> | |
387 <td>Opera 9.5</td> | |
388 <td>Win 88+ / OSX.3+</td> | |
389 <td class="center">-</td> | |
390 <td class="center">A</td> | |
391 </tr> | |
392 <tr class="odd_gradeA"> | |
393 <td>Presto</td> | |
394 <td>Opera for Wii</td> | |
395 <td>Wii</td> | |
396 <td class="center">-</td> | |
397 <td class="center">A</td> | |
398 </tr> | |
399 <tr class="even_gradeA"> | |
400 <td>Presto</td> | |
401 <td>Nokia N800</td> | |
402 <td>N800</td> | |
403 <td class="center">-</td> | |
404 <td class="center">A</td> | |
405 </tr> | |
406 <tr class="odd_gradeA"> | |
407 <td>Presto</td> | |
408 <td>Nintendo DS browser</td> | |
409 <td>Nintendo DS</td> | |
410 <td class="center">8.5</td> | |
411 <td class="center">C/A<sup>1</sup></td> | |
412 </tr> | |
413 <tr class="even_gradeC"> | |
414 <td>KHTML</td> | |
415 <td>Konqureror 3.1</td> | |
416 <td>KDE 3.1</td> | |
417 <td class="center">3.1</td> | |
418 <td class="center">C</td> | |
419 </tr> | |
420 <tr class="odd_gradeA"> | |
421 <td>KHTML</td> | |
422 <td>Konqureror 3.3</td> | |
423 <td>KDE 3.3</td> | |
424 <td class="center">3.3</td> | |
425 <td class="center">A</td> | |
426 </tr> | |
427 <tr class="even_gradeA"> | |
428 <td>KHTML</td> | |
429 <td>Konqureror 3.5</td> | |
430 <td>KDE 3.5</td> | |
431 <td class="center">3.5</td> | |
432 <td class="center">A</td> | |
433 </tr> | |
434 <tr class="odd_gradeX"> | |
435 <td>Tasman</td> | |
436 <td>Internet Explorer 4.5</td> | |
437 <td>Mac OS 8-9</td> | |
438 <td class="center">-</td> | |
439 <td class="center">X</td> | |
440 </tr> | |
441 <tr class="even_gradeC"> | |
442 <td>Tasman</td> | |
443 <td>Internet Explorer 5.1</td> | |
444 <td>Mac OS 7.6-9</td> | |
445 <td class="center">1</td> | |
446 <td class="center">C</td> | |
447 </tr> | |
448 <tr class="odd_gradeC"> | |
449 <td>Tasman</td> | |
450 <td>Internet Explorer 5.2</td> | |
451 <td>Mac OS 8-X</td> | |
452 <td class="center">1</td> | |
453 <td class="center">C</td> | |
454 </tr> | |
455 <tr class="even_gradeA"> | |
456 <td>Misc</td> | |
457 <td>NetFront 3.1</td> | |
458 <td>Embedded devices</td> | |
459 <td class="center">-</td> | |
460 <td class="center">C</td> | |
461 </tr> | |
462 <tr class="odd_gradeA"> | |
463 <td>Misc</td> | |
464 <td>NetFront 3.4</td> | |
465 <td>Embedded devices</td> | |
466 <td class="center">-</td> | |
467 <td class="center">A</td> | |
468 </tr> | |
469 <tr class="even_gradeX"> | |
470 <td>Misc</td> | |
471 <td>Dillo 0.8</td> | |
472 <td>Embedded devices</td> | |
473 <td class="center">-</td> | |
474 <td class="center">X</td> | |
475 </tr> | |
476 <tr class="odd_gradeX"> | |
477 <td>Misc</td> | |
478 <td>Links</td> | |
479 <td>Text only</td> | |
480 <td class="center">-</td> | |
481 <td class="center">X</td> | |
482 </tr> | |
483 <tr class="even_gradeX"> | |
484 <td>Misc</td> | |
485 <td>Lynx</td> | |
486 <td>Text only</td> | |
487 <td class="center">-</td> | |
488 <td class="center">X</td> | |
489 </tr> | |
490 <tr class="odd_gradeC"> | |
491 <td>Misc</td> | |
492 <td>IE Mobile</td> | |
493 <td>Windows Mobile 6</td> | |
494 <td class="center">-</td> | |
495 <td class="center">C</td> | |
496 </tr> | |
497 <tr class="even_gradeC"> | |
498 <td>Misc</td> | |
499 <td>PSP browser</td> | |
500 <td>PSP</td> | |
501 <td class="center">-</td> | |
502 <td class="center">C</td> | |
503 </tr> | |
504 <tr class="odd_gradeU"> | |
505 <td>Other browsers</td> | |
506 <td>All others</td> | |
507 <td>-</td> | |
508 <td class="center">-</td> | |
509 <td class="center">U</td> | |
510 </tr> | |
511 </tbody> | |
512 </table> | |
513 </div> | |
514 </form> | |
515 <div class="spacer"></div> | |
516 | |
517 | |
518 <h1>Examples</h1> | |
519 <ul> | |
520 <li><a href="index.html">Basic initialisation</a></li> | |
521 <li><a href="alt_insert.html">Styling the insert cursor</a></li> | |
522 <li><a href="col_filter.html">Individual column filtering</a></li> | |
523 <li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li> | |
524 <li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li> | |
525 <li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li> | |
526 <li><a href="predefined.html">Using a predefined column order set</a></li> | |
527 <li><a href="reset.html">Providing a user control to reset the column order</a></li> | |
528 <li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li> | |
529 <li><a href="server_side.html">Server-side processing support</a></li> | |
530 <li><a href="state_save.html">State saving of the column position</a></li> | |
531 <li><a href="theme.html">jQuery UI theme integration</a></li> | |
532 </ul> | |
533 | |
534 | |
535 <h1>Initialisation code</h1> | |
536 <pre>$(document).ready(function() { | |
537 var oTable; | |
538 | |
539 /* Add the events etc before DataTables hides a column */ | |
540 $("thead input").keyup( function () { | |
541 /* Filter on the column (the index) of this element */ | |
542 oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex( | |
543 oTable.fnSettings(), $("thead input").index(this) ) ); | |
544 } ); | |
545 | |
546 /* | |
547 * Support functions to provide a little bit of 'user friendlyness' to the textboxes | |
548 */ | |
549 $("thead input").each( function (i) { | |
550 this.initVal = this.value; | |
551 } ); | |
552 | |
553 $("thead input").focus( function () { | |
554 if ( this.className == "search_init" ) | |
555 { | |
556 this.className = ""; | |
557 this.value = ""; | |
558 } | |
559 } ); | |
560 | |
561 $("thead input").blur( function (i) { | |
562 if ( this.value == "" ) | |
563 { | |
564 this.className = "search_init"; | |
565 this.value = this.initVal; | |
566 } | |
567 } ); | |
568 | |
569 oTable = $('#example').dataTable( { | |
570 "sDom": 'RC<"clear">lfrtip', | |
571 "aoColumnDefs": [ | |
572 { "bVisible": false, "aTargets": [ 2 ] } | |
573 ], | |
574 "oLanguage": { | |
575 "sSearch": "Search all columns:" | |
576 }, | |
577 "bSortCellsTop": true | |
578 } ); | |
579 } );</pre> | |
580 | |
581 <div id="footer" style="text-align:center;"> | |
582 <span style="font-size:10px;"> | |
583 ColReorder and DataTables © Allan Jardine 2010 | |
584 </span> | |
585 </div> | |
586 </div> | |
587 </body> | |
588 </html> |