5a920362 |
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>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"; |
12 | </style> |
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 | $('table').dataTable( { |
19 | "sDom": 'C<"clear">lfrtip' |
20 | } ); |
21 | } ); |
22 | </script> |
23 | </head> |
24 | <body id="dt_example"> |
25 | <div id="container"> |
26 | <div class="full_width big"> |
27 | ColVis example - two tables with individual controls |
28 | </div> |
29 | |
30 | <h1>Preamble</h1> |
31 | <p>It can be useful to have DataTables initialise more than one table with a single call can for them to each have individual ColVis controllers. All this requires is a suitable jQuery selector to be used, and DataTables and ColVis will take care of the rest - as shown in this example.</p> |
32 | |
33 | <h1>Live example</h1> |
34 | <form> |
35 | <div id="demo"> |
36 | <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> |
37 | <thead> |
38 | <tr> |
39 | <th>Rendering engine</th> |
40 | <th>Browser</th> |
41 | <th>Platform(s)</th> |
42 | <th>Engine version</th> |
43 | <th>CSS grade</th> |
44 | </tr> |
45 | </thead> |
46 | <tfoot> |
47 | <tr> |
48 | <th>Rendering engine</th> |
49 | <th>Browser</th> |
50 | <th>Platform(s)</th> |
51 | <th>Engine version</th> |
52 | <th>CSS grade</th> |
53 | </tr> |
54 | </tfoot> |
55 | <tbody> |
56 | <tr class="odd_gradeX"> |
57 | <td>Trident</td> |
58 | <td>Internet Explorer 4.0</td> |
59 | <td>Win 95+ (Entity: &)</td> |
60 | <td class="center">4</td> |
61 | <td class="center">X</td> |
62 | </tr> |
63 | <tr class="even_gradeC"> |
64 | <td>Trident</td> |
65 | <td>Internet Explorer 5.0</td> |
66 | <td>Win 95+</td> |
67 | <td class="center">5</td> |
68 | <td class="center">C</td> |
69 | </tr> |
70 | <tr class="odd_gradeA"> |
71 | <td>Trident</td> |
72 | <td>Internet Explorer 5.5</td> |
73 | <td>Win 95+</td> |
74 | <td class="center">5.5</td> |
75 | <td class="center">A</td> |
76 | </tr> |
77 | <tr class="even_gradeA"> |
78 | <td>Trident</td> |
79 | <td>Internet Explorer 6</td> |
80 | <td>Win 98+</td> |
81 | <td class="center">6</td> |
82 | <td class="center">A</td> |
83 | </tr> |
84 | <tr class="odd_gradeA"> |
85 | <td>Trident</td> |
86 | <td>Internet Explorer 7</td> |
87 | <td>Win XP SP2+</td> |
88 | <td class="center">7</td> |
89 | <td class="center">A</td> |
90 | </tr> |
91 | <tr class="even_gradeA"> |
92 | <td>Trident</td> |
93 | <td>AOL browser (AOL desktop)</td> |
94 | <td>Win XP</td> |
95 | <td class="center">6</td> |
96 | <td class="center">A</td> |
97 | </tr> |
98 | </tbody> |
99 | </table> |
100 | |
101 | <table cellpadding="0" cellspacing="0" border="0" class="display" id="example2"> |
102 | <thead> |
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 | </thead> |
111 | <tfoot> |
112 | <tr> |
113 | <th>Rendering engine</th> |
114 | <th>Browser</th> |
115 | <th>Platform(s)</th> |
116 | <th>Engine version</th> |
117 | <th>CSS grade</th> |
118 | </tr> |
119 | </tfoot> |
120 | <tbody> |
121 | <tr class="odd_gradeA"> |
122 | <td>Gecko (UTF-8: $¢€)</td> |
123 | <td>Firefox 1.0</td> |
124 | <td>Win 98+ / OSX.2+</td> |
125 | <td class="center">1.7</td> |
126 | <td class="center">A</td> |
127 | </tr> |
128 | <tr class="even_gradeA"> |
129 | <td>Gecko</td> |
130 | <td>Firefox 1.5</td> |
131 | <td>Win 98+ / OSX.2+</td> |
132 | <td class="center">1.8</td> |
133 | <td class="center">A</td> |
134 | </tr> |
135 | <tr class="odd_gradeA"> |
136 | <td>Gecko</td> |
137 | <td>Firefox 2.0</td> |
138 | <td>Win 98+ / OSX.2+</td> |
139 | <td class="center">1.8</td> |
140 | <td class="center">A</td> |
141 | </tr> |
142 | <tr class="even_gradeA"> |
143 | <td>Gecko</td> |
144 | <td>Firefox 3.0</td> |
145 | <td>Win 2k+ / OSX.3+</td> |
146 | <td class="center">1.9</td> |
147 | <td class="center">A</td> |
148 | </tr> |
149 | <tr class="odd_gradeA"> |
150 | <td>Gecko</td> |
151 | <td>Camino 1.0</td> |
152 | <td>OSX.2+</td> |
153 | <td class="center">1.8</td> |
154 | <td class="center">A</td> |
155 | </tr> |
156 | <tr class="even_gradeA"> |
157 | <td>Gecko</td> |
158 | <td>Camino 1.5</td> |
159 | <td>OSX.3+</td> |
160 | <td class="center">1.8</td> |
161 | <td class="center">A</td> |
162 | </tr> |
163 | <tr class="odd_gradeA"> |
164 | <td>Gecko</td> |
165 | <td>Netscape 7.2</td> |
166 | <td>Win 95+ / Mac OS 8.6-9.2</td> |
167 | <td class="center">1.7</td> |
168 | <td class="center">A</td> |
169 | </tr> |
170 | <tr class="even_gradeA"> |
171 | <td>Gecko</td> |
172 | <td>Netscape Browser 8</td> |
173 | <td>Win 98SE+</td> |
174 | <td class="center">1.7</td> |
175 | <td class="center">A</td> |
176 | </tr> |
177 | <tr class="odd_gradeA"> |
178 | <td>Gecko</td> |
179 | <td>Netscape Navigator 9</td> |
180 | <td>Win 98+ / OSX.2+</td> |
181 | <td class="center">1.8</td> |
182 | <td class="center">A</td> |
183 | </tr> |
184 | <tr class="even_gradeA"> |
185 | <td>Gecko</td> |
186 | <td>Mozilla 1.0</td> |
187 | <td>Win 95+ / OSX.1+</td> |
188 | <td class="center">1</td> |
189 | <td class="center">A</td> |
190 | </tr> |
191 | <tr class="odd_gradeA"> |
192 | <td>Gecko</td> |
193 | <td>Mozilla 1.1</td> |
194 | <td>Win 95+ / OSX.1+</td> |
195 | <td class="center">1.1</td> |
196 | <td class="center">A</td> |
197 | </tr> |
198 | <tr class="even_gradeA"> |
199 | <td>Gecko</td> |
200 | <td>Mozilla 1.2</td> |
201 | <td>Win 95+ / OSX.1+</td> |
202 | <td class="center">1.2</td> |
203 | <td class="center">A</td> |
204 | </tr> |
205 | <tr class="odd_gradeA"> |
206 | <td>Gecko</td> |
207 | <td>Mozilla 1.3</td> |
208 | <td>Win 95+ / OSX.1+</td> |
209 | <td class="center">1.3</td> |
210 | <td class="center">A</td> |
211 | </tr> |
212 | <tr class="even_gradeA"> |
213 | <td>Gecko</td> |
214 | <td>Mozilla 1.4</td> |
215 | <td>Win 95+ / OSX.1+</td> |
216 | <td class="center">1.4</td> |
217 | <td class="center">A</td> |
218 | </tr> |
219 | <tr class="odd_gradeA"> |
220 | <td>Gecko</td> |
221 | <td>Mozilla 1.5</td> |
222 | <td>Win 95+ / OSX.1+</td> |
223 | <td class="center">1.5</td> |
224 | <td class="center">A</td> |
225 | </tr> |
226 | <tr class="even_gradeA"> |
227 | <td>Gecko</td> |
228 | <td>Mozilla 1.6</td> |
229 | <td>Win 95+ / OSX.1+</td> |
230 | <td class="center">1.6</td> |
231 | <td class="center">A</td> |
232 | </tr> |
233 | <tr class="odd_gradeA"> |
234 | <td>Gecko</td> |
235 | <td>Mozilla 1.7</td> |
236 | <td>Win 98+ / OSX.1+</td> |
237 | <td class="center">1.7</td> |
238 | <td class="center">A</td> |
239 | </tr> |
240 | <tr class="even_gradeA"> |
241 | <td>Gecko</td> |
242 | <td>Mozilla 1.8</td> |
243 | <td>Win 98+ / OSX.1+</td> |
244 | <td class="center">1.8</td> |
245 | <td class="center">A</td> |
246 | </tr> |
247 | <tr class="odd_gradeA"> |
248 | <td>Gecko</td> |
249 | <td>Seamonkey 1.1</td> |
250 | <td>Win 98+ / OSX.2+</td> |
251 | <td class="center">1.8</td> |
252 | <td class="center">A</td> |
253 | </tr> |
254 | <tr class="even_gradeA"> |
255 | <td>Gecko</td> |
256 | <td>Epiphany 2.20</td> |
257 | <td>Gnome</td> |
258 | <td class="center">1.8</td> |
259 | <td class="center">A</td> |
260 | </tr> |
261 | </tbody> |
262 | </table> |
263 | </div> |
264 | </form> |
265 | <div class="spacer"></div> |
266 | |
267 | |
268 | <h1>Examples</h1> |
269 | <ul> |
270 | <li><a href="index.html">Basic initialisation</a></li> |
271 | <li><a href="mouseover.html">Activate with a mouseover rather than click</a></li> |
272 | <li><a href="text.html">Custom text in the button</a></li> |
273 | <li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li> |
274 | <li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li> |
275 | <li><a href="two_tables.html">Two tables initialised together - individual controls</a></li> |
276 | <li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li> |
277 | <li><a href="style.html">Alternative styling and reset to original</a></li> |
278 | <li><a href="title_callback.html">Customisation of the button label with a callback</a></li> |
279 | </ul> |
280 | |
281 | |
282 | <h1>Initialisation code</h1> |
283 | <pre>$(document).ready( function () { |
284 | $('table').dataTable( { |
285 | "sDom": 'C<"clear">lfrtip' |
286 | } ); |
287 | } );</pre> |
288 | |
289 | <div id="footer" style="text-align:center;"> |
290 | <span style="font-size:10px;"> |
291 | ColVis and DataTables © Allan Jardine 2009-2010 |
292 | </span> |
293 | </div> |
294 | </div> |
295 | </body> |
296 | </html> |