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