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_jui.css";
11 @import
"../../examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
12 @import
"media/css/ColVisAlt.css";
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/ColVis.js"></script>
17 <script type=
"text/javascript" charset=
"utf-8">
18 $(document).ready( function () {
19 $('#example').dataTable( {
20 "sDom": '<
"H"fr
>tC<
"F"ip
>',
24 "bScrollCollapse": true,
25 "bScrollAutoCss": false,
27 {
"bVisible": false,
"aTargets": [
2 ] }
30 "buttonText":
" ",
34 "fnDrawCallback": function (o) {
35 /* Position the ColVis button as needed */
36 var nColVis = $('div.ColVis', o.nTableWrapper)[
0];
37 nColVis.style.width = o.oScroll.iBarWidth+
"px";
38 nColVis.style.top = ($('div.dataTables_scroll', o.nTableWrapper).position().top)+
"px";
39 nColVis.style.height = ($('div.dataTables_scrollHead table', o.nTableWrapper).height())+
"px";
45 <body id=
"dt_example">
47 <div class=
"full_width big">
48 ColVis example with alternative styling
52 <p>This demo of ColVis shows a number of different features of the plug-in. Firstly, it shows alternative styling of the plug-in with the button nested just above the scrollbar in the DataTable. Secondly there is a
"Restore" button in the ColVis drop down, which will restore the original visibility settings when the table was initialised (this is controlled by using the
"bRestore" option). Finally it shows that the drop down can be set to align on the right of the button, rather than the left.
</p>
53 <p>Note that this demo requires DataTables
1.7.5 or later.
</p>
58 <table cellpadding=
"0" cellspacing=
"0" border=
"0" class=
"display" id=
"example">
61 <th>Rendering engine
</th>
64 <th>Engine version
</th>
70 <th>Rendering engine
</th>
73 <th>Engine version
</th>
78 <tr class=
"odd_gradeX">
80 <td>Internet Explorer
4.0</td>
81 <td>Win
95+ (Entity:
&)
</td>
82 <td class=
"center">4</td>
83 <td class=
"center">X
</td>
85 <tr class=
"even_gradeC">
87 <td>Internet Explorer
5.0</td>
89 <td class=
"center">5</td>
90 <td class=
"center">C
</td>
92 <tr class=
"odd_gradeA">
94 <td>Internet Explorer
5.5</td>
96 <td class=
"center">5.5</td>
97 <td class=
"center">A
</td>
99 <tr class=
"even_gradeA">
101 <td>Internet Explorer
6</td>
103 <td class=
"center">6</td>
104 <td class=
"center">A
</td>
106 <tr class=
"odd_gradeA">
108 <td>Internet Explorer
7</td>
110 <td class=
"center">7</td>
111 <td class=
"center">A
</td>
113 <tr class=
"even_gradeA">
115 <td>AOL browser (AOL desktop)
</td>
117 <td class=
"center">6</td>
118 <td class=
"center">A
</td>
120 <tr class=
"odd_gradeA">
121 <td>Gecko (UTF-
8: $¢€)
</td>
123 <td>Win
98+ / OSX
.2+
</td>
124 <td class=
"center">1.7</td>
125 <td class=
"center">A
</td>
127 <tr class=
"even_gradeA">
130 <td>Win
98+ / OSX
.2+
</td>
131 <td class=
"center">1.8</td>
132 <td class=
"center">A
</td>
134 <tr class=
"odd_gradeA">
137 <td>Win
98+ / OSX
.2+
</td>
138 <td class=
"center">1.8</td>
139 <td class=
"center">A
</td>
141 <tr class=
"even_gradeA">
144 <td>Win
2k+ / OSX
.3+
</td>
145 <td class=
"center">1.9</td>
146 <td class=
"center">A
</td>
148 <tr class=
"odd_gradeA">
152 <td class=
"center">1.8</td>
153 <td class=
"center">A
</td>
155 <tr class=
"even_gradeA">
159 <td class=
"center">1.8</td>
160 <td class=
"center">A
</td>
162 <tr class=
"odd_gradeA">
164 <td>Netscape
7.2</td>
165 <td>Win
95+ / Mac OS
8.6-
9.2</td>
166 <td class=
"center">1.7</td>
167 <td class=
"center">A
</td>
169 <tr class=
"even_gradeA">
171 <td>Netscape Browser
8</td>
173 <td class=
"center">1.7</td>
174 <td class=
"center">A
</td>
176 <tr class=
"odd_gradeA">
178 <td>Netscape Navigator
9</td>
179 <td>Win
98+ / OSX
.2+
</td>
180 <td class=
"center">1.8</td>
181 <td class=
"center">A
</td>
183 <tr class=
"even_gradeA">
186 <td>Win
95+ / OSX
.1+
</td>
187 <td class=
"center">1</td>
188 <td class=
"center">A
</td>
190 <tr class=
"odd_gradeA">
193 <td>Win
95+ / OSX
.1+
</td>
194 <td class=
"center">1.1</td>
195 <td class=
"center">A
</td>
197 <tr class=
"even_gradeA">
200 <td>Win
95+ / OSX
.1+
</td>
201 <td class=
"center">1.2</td>
202 <td class=
"center">A
</td>
204 <tr class=
"odd_gradeA">
207 <td>Win
95+ / OSX
.1+
</td>
208 <td class=
"center">1.3</td>
209 <td class=
"center">A
</td>
211 <tr class=
"even_gradeA">
214 <td>Win
95+ / OSX
.1+
</td>
215 <td class=
"center">1.4</td>
216 <td class=
"center">A
</td>
218 <tr class=
"odd_gradeA">
221 <td>Win
95+ / OSX
.1+
</td>
222 <td class=
"center">1.5</td>
223 <td class=
"center">A
</td>
225 <tr class=
"even_gradeA">
228 <td>Win
95+ / OSX
.1+
</td>
229 <td class=
"center">1.6</td>
230 <td class=
"center">A
</td>
232 <tr class=
"odd_gradeA">
235 <td>Win
98+ / OSX
.1+
</td>
236 <td class=
"center">1.7</td>
237 <td class=
"center">A
</td>
239 <tr class=
"even_gradeA">
242 <td>Win
98+ / OSX
.1+
</td>
243 <td class=
"center">1.8</td>
244 <td class=
"center">A
</td>
246 <tr class=
"odd_gradeA">
248 <td>Seamonkey
1.1</td>
249 <td>Win
98+ / OSX
.2+
</td>
250 <td class=
"center">1.8</td>
251 <td class=
"center">A
</td>
253 <tr class=
"even_gradeA">
255 <td>Epiphany
2.20</td>
257 <td class=
"center">1.8</td>
258 <td class=
"center">A
</td>
260 <tr class=
"odd_gradeA">
264 <td class=
"center">125.5</td>
265 <td class=
"center">A
</td>
267 <tr class=
"even_gradeA">
271 <td class=
"center">312.8</td>
272 <td class=
"center">A
</td>
274 <tr class=
"odd_gradeA">
278 <td class=
"center">419.3</td>
279 <td class=
"center">A
</td>
281 <tr class=
"even_gradeA">
285 <td class=
"center">522.1</td>
286 <td class=
"center">A
</td>
288 <tr class=
"odd_gradeA">
292 <td class=
"center">420</td>
293 <td class=
"center">A
</td>
295 <tr class=
"even_gradeA">
297 <td>iPod Touch / iPhone
</td>
299 <td class=
"center">420.1</td>
300 <td class=
"center">A
</td>
302 <tr class=
"odd_gradeA">
306 <td class=
"center">413</td>
307 <td class=
"center">A
</td>
309 <tr class=
"even_gradeA">
312 <td>Win
95+ / OSX
.1+
</td>
313 <td class=
"center">-
</td>
314 <td class=
"center">A
</td>
316 <tr class=
"odd_gradeA">
319 <td>Win
95+ / OSX
.2+
</td>
320 <td class=
"center">-
</td>
321 <td class=
"center">A
</td>
323 <tr class=
"even_gradeA">
326 <td>Win
95+ / OSX
.2+
</td>
327 <td class=
"center">-
</td>
328 <td class=
"center">A
</td>
330 <tr class=
"odd_gradeA">
333 <td>Win
95+ / OSX
.2+
</td>
334 <td class=
"center">-
</td>
335 <td class=
"center">A
</td>
337 <tr class=
"even_gradeA">
340 <td>Win
95+ / OSX
.3+
</td>
341 <td class=
"center">-
</td>
342 <td class=
"center">A
</td>
344 <tr class=
"odd_gradeA">
347 <td>Win
88+ / OSX
.3+
</td>
348 <td class=
"center">-
</td>
349 <td class=
"center">A
</td>
351 <tr class=
"even_gradeA">
354 <td>Win
88+ / OSX
.3+
</td>
355 <td class=
"center">-
</td>
356 <td class=
"center">A
</td>
358 <tr class=
"odd_gradeA">
360 <td>Opera for Wii
</td>
362 <td class=
"center">-
</td>
363 <td class=
"center">A
</td>
365 <tr class=
"even_gradeA">
369 <td class=
"center">-
</td>
370 <td class=
"center">A
</td>
372 <tr class=
"odd_gradeA">
374 <td>Nintendo DS browser
</td>
376 <td class=
"center">8.5</td>
377 <td class=
"center">C/A
<sup>1</sup></td>
379 <tr class=
"even_gradeC">
381 <td>Konqureror
3.1</td>
383 <td class=
"center">3.1</td>
384 <td class=
"center">C
</td>
386 <tr class=
"odd_gradeA">
388 <td>Konqureror
3.3</td>
390 <td class=
"center">3.3</td>
391 <td class=
"center">A
</td>
393 <tr class=
"even_gradeA">
395 <td>Konqureror
3.5</td>
397 <td class=
"center">3.5</td>
398 <td class=
"center">A
</td>
400 <tr class=
"odd_gradeX">
402 <td>Internet Explorer
4.5</td>
404 <td class=
"center">-
</td>
405 <td class=
"center">X
</td>
407 <tr class=
"even_gradeC">
409 <td>Internet Explorer
5.1</td>
410 <td>Mac OS
7.6-
9</td>
411 <td class=
"center">1</td>
412 <td class=
"center">C
</td>
414 <tr class=
"odd_gradeC">
416 <td>Internet Explorer
5.2</td>
418 <td class=
"center">1</td>
419 <td class=
"center">C
</td>
421 <tr class=
"even_gradeA">
423 <td>NetFront
3.1</td>
424 <td>Embedded devices
</td>
425 <td class=
"center">-
</td>
426 <td class=
"center">C
</td>
428 <tr class=
"odd_gradeA">
430 <td>NetFront
3.4</td>
431 <td>Embedded devices
</td>
432 <td class=
"center">-
</td>
433 <td class=
"center">A
</td>
435 <tr class=
"even_gradeX">
438 <td>Embedded devices
</td>
439 <td class=
"center">-
</td>
440 <td class=
"center">X
</td>
442 <tr class=
"odd_gradeX">
446 <td class=
"center">-
</td>
447 <td class=
"center">X
</td>
449 <tr class=
"even_gradeX">
453 <td class=
"center">-
</td>
454 <td class=
"center">X
</td>
456 <tr class=
"odd_gradeC">
459 <td>Windows Mobile
6</td>
460 <td class=
"center">-
</td>
461 <td class=
"center">C
</td>
463 <tr class=
"even_gradeC">
467 <td class=
"center">-
</td>
468 <td class=
"center">C
</td>
470 <tr class=
"odd_gradeU">
471 <td>Other browsers
</td>
474 <td class=
"center">-
</td>
475 <td class=
"center">U
</td>
481 <div class=
"spacer"></div>
486 <li><a href=
"index.html">Basic initialisation
</a></li>
487 <li><a href=
"mouseover.html">Activate with a mouseover rather than click
</a></li>
488 <li><a href=
"text.html">Custom text in the button
</a></li>
489 <li><a href=
"theme.html">Using with jQuery UI ThemeRoller
</a></li>
490 <li><a href=
"exclude_columns.html">Excluding columns from the show / hide list
</a></li>
491 <li><a href=
"two_tables.html">Two tables initialised together - individual controls
</a></li>
492 <li><a href=
"two_tables_identical.html">Two tables initialised together - shared control
</a></li>
493 <li><a href=
"style.html">Alternative styling and reset to original
</a></li>
494 <li><a href=
"title_callback.html">Customisation of the button label with a callback
</a></li>
498 <h1>Initialisation code
</h1>
499 <pre>$(document).ready( function () {
500 $('#example').dataTable( {
501 "sDom": '
<"H"fr
>tC
<"F"ip
>',
505 "bScrollCollapse": true,
506 "bScrollAutoCss": false,
508 {
"bVisible": false,
"aTargets": [
2 ] }
511 "buttonText":
"&nbsp;",
515 "fnDrawCallback": function (o) {
516 /* Position the ColVis button as needed */
517 var nColVis = $('div.ColVis', o.nTableWrapper)[
0];
518 nColVis.style.width = o.oScroll.iBarWidth+
"px";
519 nColVis.style.top = ($('div.dataTables_scroll', o.nTableWrapper).position().top)+
"px";
520 nColVis.style.height = ($('div.dataTables_scrollHead table', o.nTableWrapper).height())+
"px";
525 <div id=
"footer" style=
"text-align:center;">
526 <span style=
"font-size:10px;">
527 ColVis and DataTables
© Allan Jardine
2009-
2010