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>ColVis 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/ColVis.css";
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/ColVis.js"></script>
16 <script type=
"text/javascript" charset=
"utf-8">
17 $(document).ready( function () {
18 $('#example').dataTable( {
19 "sDom": 'C<
"clear">lfrtip',
21 "fnLabel": function ( index, title, th ) {
22 return (index+
1) +'. '+ title;
29 <body id=
"dt_example">
31 <div class=
"full_width big">
36 <p>By default ColVis will use the information in the TH cell for each column as the button name to use in ColVis, which might not always be what you want (for example you might has HTML in the cell that you don't want in the button). The
<i>fnLabel
</i> callback provides the ability to customise the label used for the button. In this example the column index is prefixed to the column title.
</p>
41 <table cellpadding=
"0" cellspacing=
"0" border=
"0" class=
"display" id=
"example">
44 <th>Rendering engine
</th>
47 <th>Engine version
</th>
53 <th>Rendering engine
</th>
56 <th>Engine version
</th>
61 <tr class=
"odd_gradeX">
63 <td>Internet Explorer
4.0</td>
64 <td>Win
95+ (Entity:
&)
</td>
65 <td class=
"center">4</td>
66 <td class=
"center">X
</td>
68 <tr class=
"even_gradeC">
70 <td>Internet Explorer
5.0</td>
72 <td class=
"center">5</td>
73 <td class=
"center">C
</td>
75 <tr class=
"odd_gradeA">
77 <td>Internet Explorer
5.5</td>
79 <td class=
"center">5.5</td>
80 <td class=
"center">A
</td>
82 <tr class=
"even_gradeA">
84 <td>Internet Explorer
6</td>
86 <td class=
"center">6</td>
87 <td class=
"center">A
</td>
89 <tr class=
"odd_gradeA">
91 <td>Internet Explorer
7</td>
93 <td class=
"center">7</td>
94 <td class=
"center">A
</td>
96 <tr class=
"even_gradeA">
98 <td>AOL browser (AOL desktop)
</td>
100 <td class=
"center">6</td>
101 <td class=
"center">A
</td>
103 <tr class=
"odd_gradeA">
104 <td>Gecko (UTF-
8: $¢€)
</td>
106 <td>Win
98+ / OSX
.2+
</td>
107 <td class=
"center">1.7</td>
108 <td class=
"center">A
</td>
110 <tr class=
"even_gradeA">
113 <td>Win
98+ / OSX
.2+
</td>
114 <td class=
"center">1.8</td>
115 <td class=
"center">A
</td>
117 <tr class=
"odd_gradeA">
120 <td>Win
98+ / OSX
.2+
</td>
121 <td class=
"center">1.8</td>
122 <td class=
"center">A
</td>
124 <tr class=
"even_gradeA">
127 <td>Win
2k+ / OSX
.3+
</td>
128 <td class=
"center">1.9</td>
129 <td class=
"center">A
</td>
131 <tr class=
"odd_gradeA">
135 <td class=
"center">1.8</td>
136 <td class=
"center">A
</td>
138 <tr class=
"even_gradeA">
142 <td class=
"center">1.8</td>
143 <td class=
"center">A
</td>
145 <tr class=
"odd_gradeA">
147 <td>Netscape
7.2</td>
148 <td>Win
95+ / Mac OS
8.6-
9.2</td>
149 <td class=
"center">1.7</td>
150 <td class=
"center">A
</td>
152 <tr class=
"even_gradeA">
154 <td>Netscape Browser
8</td>
156 <td class=
"center">1.7</td>
157 <td class=
"center">A
</td>
159 <tr class=
"odd_gradeA">
161 <td>Netscape Navigator
9</td>
162 <td>Win
98+ / OSX
.2+
</td>
163 <td class=
"center">1.8</td>
164 <td class=
"center">A
</td>
166 <tr class=
"even_gradeA">
169 <td>Win
95+ / OSX
.1+
</td>
170 <td class=
"center">1</td>
171 <td class=
"center">A
</td>
173 <tr class=
"odd_gradeA">
176 <td>Win
95+ / OSX
.1+
</td>
177 <td class=
"center">1.1</td>
178 <td class=
"center">A
</td>
180 <tr class=
"even_gradeA">
183 <td>Win
95+ / OSX
.1+
</td>
184 <td class=
"center">1.2</td>
185 <td class=
"center">A
</td>
187 <tr class=
"odd_gradeA">
190 <td>Win
95+ / OSX
.1+
</td>
191 <td class=
"center">1.3</td>
192 <td class=
"center">A
</td>
194 <tr class=
"even_gradeA">
197 <td>Win
95+ / OSX
.1+
</td>
198 <td class=
"center">1.4</td>
199 <td class=
"center">A
</td>
201 <tr class=
"odd_gradeA">
204 <td>Win
95+ / OSX
.1+
</td>
205 <td class=
"center">1.5</td>
206 <td class=
"center">A
</td>
208 <tr class=
"even_gradeA">
211 <td>Win
95+ / OSX
.1+
</td>
212 <td class=
"center">1.6</td>
213 <td class=
"center">A
</td>
215 <tr class=
"odd_gradeA">
218 <td>Win
98+ / OSX
.1+
</td>
219 <td class=
"center">1.7</td>
220 <td class=
"center">A
</td>
222 <tr class=
"even_gradeA">
225 <td>Win
98+ / OSX
.1+
</td>
226 <td class=
"center">1.8</td>
227 <td class=
"center">A
</td>
229 <tr class=
"odd_gradeA">
231 <td>Seamonkey
1.1</td>
232 <td>Win
98+ / OSX
.2+
</td>
233 <td class=
"center">1.8</td>
234 <td class=
"center">A
</td>
236 <tr class=
"even_gradeA">
238 <td>Epiphany
2.20</td>
240 <td class=
"center">1.8</td>
241 <td class=
"center">A
</td>
243 <tr class=
"odd_gradeA">
247 <td class=
"center">125.5</td>
248 <td class=
"center">A
</td>
250 <tr class=
"even_gradeA">
254 <td class=
"center">312.8</td>
255 <td class=
"center">A
</td>
257 <tr class=
"odd_gradeA">
261 <td class=
"center">419.3</td>
262 <td class=
"center">A
</td>
264 <tr class=
"even_gradeA">
268 <td class=
"center">522.1</td>
269 <td class=
"center">A
</td>
271 <tr class=
"odd_gradeA">
275 <td class=
"center">420</td>
276 <td class=
"center">A
</td>
278 <tr class=
"even_gradeA">
280 <td>iPod Touch / iPhone
</td>
282 <td class=
"center">420.1</td>
283 <td class=
"center">A
</td>
285 <tr class=
"odd_gradeA">
289 <td class=
"center">413</td>
290 <td class=
"center">A
</td>
292 <tr class=
"even_gradeA">
295 <td>Win
95+ / OSX
.1+
</td>
296 <td class=
"center">-
</td>
297 <td class=
"center">A
</td>
299 <tr class=
"odd_gradeA">
302 <td>Win
95+ / OSX
.2+
</td>
303 <td class=
"center">-
</td>
304 <td class=
"center">A
</td>
306 <tr class=
"even_gradeA">
309 <td>Win
95+ / OSX
.2+
</td>
310 <td class=
"center">-
</td>
311 <td class=
"center">A
</td>
313 <tr class=
"odd_gradeA">
316 <td>Win
95+ / OSX
.2+
</td>
317 <td class=
"center">-
</td>
318 <td class=
"center">A
</td>
320 <tr class=
"even_gradeA">
323 <td>Win
95+ / OSX
.3+
</td>
324 <td class=
"center">-
</td>
325 <td class=
"center">A
</td>
327 <tr class=
"odd_gradeA">
330 <td>Win
88+ / OSX
.3+
</td>
331 <td class=
"center">-
</td>
332 <td class=
"center">A
</td>
334 <tr class=
"even_gradeA">
337 <td>Win
88+ / OSX
.3+
</td>
338 <td class=
"center">-
</td>
339 <td class=
"center">A
</td>
341 <tr class=
"odd_gradeA">
343 <td>Opera for Wii
</td>
345 <td class=
"center">-
</td>
346 <td class=
"center">A
</td>
348 <tr class=
"even_gradeA">
352 <td class=
"center">-
</td>
353 <td class=
"center">A
</td>
355 <tr class=
"odd_gradeA">
357 <td>Nintendo DS browser
</td>
359 <td class=
"center">8.5</td>
360 <td class=
"center">C/A
<sup>1</sup></td>
362 <tr class=
"even_gradeC">
364 <td>Konqureror
3.1</td>
366 <td class=
"center">3.1</td>
367 <td class=
"center">C
</td>
369 <tr class=
"odd_gradeA">
371 <td>Konqureror
3.3</td>
373 <td class=
"center">3.3</td>
374 <td class=
"center">A
</td>
376 <tr class=
"even_gradeA">
378 <td>Konqureror
3.5</td>
380 <td class=
"center">3.5</td>
381 <td class=
"center">A
</td>
383 <tr class=
"odd_gradeX">
385 <td>Internet Explorer
4.5</td>
387 <td class=
"center">-
</td>
388 <td class=
"center">X
</td>
390 <tr class=
"even_gradeC">
392 <td>Internet Explorer
5.1</td>
393 <td>Mac OS
7.6-
9</td>
394 <td class=
"center">1</td>
395 <td class=
"center">C
</td>
397 <tr class=
"odd_gradeC">
399 <td>Internet Explorer
5.2</td>
401 <td class=
"center">1</td>
402 <td class=
"center">C
</td>
404 <tr class=
"even_gradeA">
406 <td>NetFront
3.1</td>
407 <td>Embedded devices
</td>
408 <td class=
"center">-
</td>
409 <td class=
"center">C
</td>
411 <tr class=
"odd_gradeA">
413 <td>NetFront
3.4</td>
414 <td>Embedded devices
</td>
415 <td class=
"center">-
</td>
416 <td class=
"center">A
</td>
418 <tr class=
"even_gradeX">
421 <td>Embedded devices
</td>
422 <td class=
"center">-
</td>
423 <td class=
"center">X
</td>
425 <tr class=
"odd_gradeX">
429 <td class=
"center">-
</td>
430 <td class=
"center">X
</td>
432 <tr class=
"even_gradeX">
436 <td class=
"center">-
</td>
437 <td class=
"center">X
</td>
439 <tr class=
"odd_gradeC">
442 <td>Windows Mobile
6</td>
443 <td class=
"center">-
</td>
444 <td class=
"center">C
</td>
446 <tr class=
"even_gradeC">
450 <td class=
"center">-
</td>
451 <td class=
"center">C
</td>
453 <tr class=
"odd_gradeU">
454 <td>Other browsers
</td>
457 <td class=
"center">-
</td>
458 <td class=
"center">U
</td>
464 <div class=
"spacer"></div>
469 <li><a href=
"index.html">Basic initialisation
</a></li>
470 <li><a href=
"mouseover.html">Activate with a mouseover rather than click
</a></li>
471 <li><a href=
"text.html">Custom text in the button
</a></li>
472 <li><a href=
"theme.html">Using with jQuery UI ThemeRoller
</a></li>
473 <li><a href=
"exclude_columns.html">Excluding columns from the show / hide list
</a></li>
474 <li><a href=
"two_tables.html">Two tables initialised together - individual controls
</a></li>
475 <li><a href=
"two_tables_identical.html">Two tables initialised together - shared control
</a></li>
476 <li><a href=
"style.html">Alternative styling and reset to original
</a></li>
477 <li><a href=
"title_callback.html">Customisation of the button label with a callback
</a></li>
481 <h1>Initialisation code
</h1>
482 <pre>$(document).ready( function () {
483 $('#example').dataTable( {
484 "sDom": 'C
<"clear">lfrtip',
486 "fnLabel": function ( index, title, th ) {
487 return (index+
1) +'. '+ title;
493 <div id=
"footer" style=
"text-align:center;">
494 <span style=
"font-size:10px;">
495 ColVis and DataTables
© Allan Jardine
2009-
2010