Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebApplication/MVC2/HeuristicLabWeb.PluginHost/HLWebPluginHost/Content/jQuery/jQueryPlugins/DataTables-1.7.6/extras/FixedColumns/col_filter.html @ 6286

Last change on this file since 6286 was 6286, checked in by dkahn, 13 years ago

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