Mercurial > repos > saskia-hiltemann > ireport

comparison DataTables-1.9.4/examples/api/tabs_and_scrolling.html @ 0:ac5f9272033b draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
first upload
author saskia-hiltemann
date Tue, 01 Jul 2014 11:42:23 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:ac5f9272033b
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.datatables.net/favicon.ico" />
6
7 <title>DataTables 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_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
12 .ui-tabs .ui-tabs-panel { padding: 10px }
13 </style>
14 <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
15 <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
16 <script type="text/javascript" language="javascript" src="../examples_support/jquery-ui-tabs.js"></script>
17 <script type="text/javascript" charset="utf-8">
18 $(document).ready(function() {
19 $("#tabs").tabs( {
20 "show": function(event, ui) {
21 var table = $.fn.dataTable.fnTables(true);
22 if ( table.length > 0 ) {
23 $(table).dataTable().fnAdjustColumnSizing();
24 }
25 }
26 } );
27
28 $('table.display').dataTable( {
29 "sScrollY": "200px",
30 "bScrollCollapse": true,
31 "bPaginate": false,
32 "bJQueryUI": true,
33 "aoColumnDefs": [
34 { "sWidth": "10%", "aTargets": [ -1 ] }
35 ]
36 } );
37 } );
38 </script>
39 </head>
40 <body id="dt_example">
41 <div id="container">
42 <div class="full_width big">
43 DataTables scrolling and jQuery UI tabs
44 </div>
45
46 <h1>Preamble</h1>
47 <p>This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed any other method whereby the table is in a hidden (display:none) element when it is initialised). The reason this requires special consideration, is that when DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements with which to give DataTables, and this will require in the misalignment of columns when scrolling is enabled.</p>
48 <p>The method to get around this is to call the fnAdjustColumnSizing API function. This function will calculate the column widths that are needed based on the current data and then redraw the table - which is exactly what is needed when the table becomes visible for the first time. For this we use the 'show' method provided by jQuery UI tables. We check to see if the DataTable has been created or not (note the extra selector for 'div.dataTables_scrollBody', this is added when the DataTable is initialised). If the table has been initialised, we re-size it. An optimisation could be added to re-size only of the first showing of the table.</p>
49
50 <h1>Live example</h1>
51 <div id="demo">
52 <div id="tabs">
53 <ul>
54 <li><a href="#tabs-1">Trident browsers</a></li>
55 <li><a href="#tabs-2">Gecko browsers</a></li>
56 </ul>
57
58 <div id="tabs-1">
59 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
60 <thead>
61 <tr>
62 <th>Rendering engine</th>
63 <th>Browser</th>
64 <th>Platform(s)</th>
65 <th>Engine version</th>
66 <th>Grade</th>
67 </tr>
68 </thead>
69 <tfoot>
70 <tr>
71 <th>Rendering engine</th>
72 <th>Browser</th>
73 <th>Platform(s)</th>
74 <th>Engine version</th>
75 <th>Grade</th>
76 </tr>
77 </tfoot>
78 <tbody>
79 <tr class="odd gradeX">
80 <td>Trident</td>
81 <td>Internet
82 Explorer 4.0</td>
83 <td>Win 95+</td>
84 <td class="center">4</td>
85 <td class="center">X</td>
86 </tr>
87 <tr class="odd gradeC">
88 <td>Trident</td>
89 <td>Internet
90 Explorer 5.0</td>
91 <td>Win 95+</td>
92 <td class="center">5</td>
93 <td class="center">C</td>
94 </tr>
95 <tr class="odd gradeA">
96 <td>Trident</td>
97 <td>Internet
98 Explorer 5.5</td>
99 <td>Win 95+</td>
100 <td class="center">5.5</td>
101 <td class="center">A</td>
102 </tr>
103 <tr class="odd gradeA">
104 <td>Trident</td>
105 <td>Internet
106 Explorer 6</td>
107 <td>Win 98+</td>
108 <td class="center">6</td>
109 <td class="center">A</td>
110 </tr>
111 <tr class="odd gradeA">
112 <td>Trident</td>
113 <td>Internet Explorer 7</td>
114 <td>Win XP SP2+</td>
115 <td class="center">7</td>
116 <td class="center">A</td>
117 </tr>
118 <tr class="odd gradeA">
119 <td>Trident</td>
120 <td>AOL browser (AOL desktop)</td>
121 <td>Win XP</td>
122 <td class="center">6</td>
123 <td class="center">A</td>
124 </tr>
125 <tbody>
126 </table>
127 </div>
128
129
130 <div id="tabs-2">
131 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
132 <thead>
133 <tr>
134 <th>Rendering engine</th>
135 <th>Browser</th>
136 <th>Platform(s)</th>
137 <th>Engine version</th>
138 <th>Grade</th>
139 </tr>
140 </thead>
141 <tfoot>
142 <tr>
143 <th>Rendering engine</th>
144 <th>Browser</th>
145 <th>Platform(s)</th>
146 <th>Engine version</th>
147 <th>Grade</th>
148 </tr>
149 </tfoot>
150 <tbody>
151 <tr class="gradeA">
152 <td>Gecko</td>
153 <td>Firefox 1.0</td>
154 <td>Win 98+ / OSX.2+</td>
155 <td class="center">1.7</td>
156 <td class="center">A</td>
157 </tr>
158 <tr class="gradeA">
159 <td>Gecko</td>
160 <td>Firefox 1.5</td>
161 <td>Win 98+ / OSX.2+</td>
162 <td class="center">1.8</td>
163 <td class="center">A</td>
164 </tr>
165 <tr class="gradeA">
166 <td>Gecko</td>
167 <td>Firefox 2.0</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="gradeA">
173 <td>Gecko</td>
174 <td>Firefox 3.0</td>
175 <td>Win 2k+ / OSX.3+</td>
176 <td class="center">1.9</td>
177 <td class="center">A</td>
178 </tr>
179 <tr class="gradeA">
180 <td>Gecko</td>
181 <td>Camino 1.0</td>
182 <td>OSX.2+</td>
183 <td class="center">1.8</td>
184 <td class="center">A</td>
185 </tr>
186 <tr class="gradeA">
187 <td>Gecko</td>
188 <td>Camino 1.5</td>
189 <td>OSX.3+</td>
190 <td class="center">1.8</td>
191 <td class="center">A</td>
192 </tr>
193 <tr class="gradeA">
194 <td>Gecko</td>
195 <td>Netscape 7.2</td>
196 <td>Win 95+ / Mac OS 8.6-9.2</td>
197 <td class="center">1.7</td>
198 <td class="center">A</td>
199 </tr>
200 <tr class="gradeA">
201 <td>Gecko</td>
202 <td>Netscape Browser 8</td>
203 <td>Win 98SE+</td>
204 <td class="center">1.7</td>
205 <td class="center">A</td>
206 </tr>
207 <tr class="gradeA">
208 <td>Gecko</td>
209 <td>Netscape Navigator 9</td>
210 <td>Win 98+ / OSX.2+</td>
211 <td class="center">1.8</td>
212 <td class="center">A</td>
213 </tr>
214 <tr class="gradeA">
215 <td>Gecko</td>
216 <td>Mozilla 1.0</td>
217 <td>Win 95+ / OSX.1+</td>
218 <td class="center">1</td>
219 <td class="center">A</td>
220 </tr>
221 <tr class="gradeA">
222 <td>Gecko</td>
223 <td>Mozilla 1.1</td>
224 <td>Win 95+ / OSX.1+</td>
225 <td class="center">1.1</td>
226 <td class="center">A</td>
227 </tr>
228 <tr class="gradeA">
229 <td>Gecko</td>
230 <td>Mozilla 1.2</td>
231 <td>Win 95+ / OSX.1+</td>
232 <td class="center">1.2</td>
233 <td class="center">A</td>
234 </tr>
235 <tr class="gradeA">
236 <td>Gecko</td>
237 <td>Mozilla 1.3</td>
238 <td>Win 95+ / OSX.1+</td>
239 <td class="center">1.3</td>
240 <td class="center">A</td>
241 </tr>
242 <tr class="gradeA">
243 <td>Gecko</td>
244 <td>Mozilla 1.4</td>
245 <td>Win 95+ / OSX.1+</td>
246 <td class="center">1.4</td>
247 <td class="center">A</td>
248 </tr>
249 <tr class="gradeA">
250 <td>Gecko</td>
251 <td>Mozilla 1.5</td>
252 <td>Win 95+ / OSX.1+</td>
253 <td class="center">1.5</td>
254 <td class="center">A</td>
255 </tr>
256 <tr class="gradeA">
257 <td>Gecko</td>
258 <td>Mozilla 1.6</td>
259 <td>Win 95+ / OSX.1+</td>
260 <td class="center">1.6</td>
261 <td class="center">A</td>
262 </tr>
263 <tr class="gradeA">
264 <td>Gecko</td>
265 <td>Mozilla 1.7</td>
266 <td>Win 98+ / OSX.1+</td>
267 <td class="center">1.7</td>
268 <td class="center">A</td>
269 </tr>
270 <tr class="gradeA">
271 <td>Gecko</td>
272 <td>Mozilla 1.8</td>
273 <td>Win 98+ / OSX.1+</td>
274 <td class="center">1.8</td>
275 <td class="center">A</td>
276 </tr>
277 <tr class="gradeA">
278 <td>Gecko</td>
279 <td>Seamonkey 1.1</td>
280 <td>Win 98+ / OSX.2+</td>
281 <td class="center">1.8</td>
282 <td class="center">A</td>
283 </tr>
284 <tr class="gradeA">
285 <td>Gecko</td>
286 <td>Epiphany 2.20</td>
287 <td>Gnome</td>
288 <td class="center">1.8</td>
289 <td class="center">A</td>
290 </tr>
291 </tbody>
292 </table>
293 </div>
294 </div>
295 </div>
296 <div class="spacer"></div>
297
298
299 <h1>Initialisation code</h1>
300 <pre class="brush: js;">$(document).ready(function() {
301 $("#tabs").tabs( {
302 "show": function(event, ui) {
303 var table = $.fn.dataTable.fnTables(true);
304 if ( table.length &gt; 0 ) {
305 $(table).dataTable().fnAdjustColumnSizing();
306 }
307 }
308 } );
309
310 $('table.display').dataTable( {
311 "sScrollY": "200px",
312 "bScrollCollapse": true,
313 "bPaginate": false,
314 "bJQueryUI": true,
315 "aoColumnDefs": [
316 { "sWidth": "10%", "aTargets": [ -1 ] }
317 ]
318 } );
319 } );</pre>
320 <style type="text/css">
321 @import "../examples_support/syntax/css/shCore.css";
322 </style>
323 <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
324
325
326 <h1>Other examples</h1>
327 <div class="demo_links">
328 <h2>Basic initialisation</h2>
329 <ul>
330 <li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
331 <li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
332 <li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
333 <li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
334 <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
335 <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
336 <li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
337 <li><a href="../basic_init/dom.html">DOM positioning</a></li>
338 <li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
339 <li><a href="../basic_init/state_save.html">State saving</a></li>
340 <li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
341 <li>Scrolling: <br>
342 <a href="../basic_init/scroll_x.html">Horizontal</a> /
343 <a href="../basic_init/scroll_y.html">Vertical</a> /
344 <a href="../basic_init/scroll_xy.html">Both</a> /
345 <a href="../basic_init/scroll_y_theme.html">Themed</a> /
346 <a href="../basic_init/scroll_y_infinite.html">Infinite</a>
347 </li>
348 <li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
349 <li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
350 </ul>
351
352 <h2>Advanced initialisation</h2>
353 <ul>
354 <li>Events: <br>
355 <a href="../advanced_init/events_live.html">Live events</a> /
356 <a href="../advanced_init/events_pre_init.html">Pre-init</a> /
357 <a href="../advanced_init/events_post_init.html">Post-init</a>
358 </li>
359 <li><a href="../advanced_init/column_render.html">Column rendering</a></li>
360 <li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
361 <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
362 <li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
363 <li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
364 <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
365 <li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
366 <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
367 <li><a href="../advanced_init/row_callback.html">Row callback</a></li>
368 <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
369 <li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
370 <li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
371 <li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
372 <li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
373 <li><a href="../advanced_init/dt_events.html">Custom events</a></li>
374 </ul>
375
376 <h2>API</h2>
377 <ul>
378 <li><a href="../api/add_row.html">Dynamically add a new row</a></li>
379 <li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
380 <li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
381 <li><a href="../api/highlight.html">Highlight rows and columns</a></li>
382 <li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
383 <li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
384 <li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
385 <li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
386 <li><a href="../api/form.html">Submit form with elements in table</a></li>
387 <li><a href="../api/counter_column.html">Index column (static number column)</a></li>
388 <li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
389 <li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
390 <li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
391 <li><a href="../api/regex.html">Regular expression filtering</a></li>
392 </ul>
393 </div>
394
395 <div class="demo_links">
396 <h2>Data sources</h2>
397 <ul>
398 <li><a href="../data_sources/dom.html">DOM</a></li>
399 <li><a href="../data_sources/js_array.html">Javascript array</a></li>
400 <li><a href="../data_sources/ajax.html">Ajax source</a></li>
401 <li><a href="../data_sources/server_side.html">Server side processing</a></li>
402 </ul>
403
404 <h2>Server-side processing</h2>
405 <ul>
406 <li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
407 <li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
408 <li><a href="../server_side/post.html">Use HTTP POST</a></li>
409 <li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
410 <li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
411 <li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
412 <li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
413 <li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
414 <li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
415 <li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
416 <li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
417 </ul>
418
419 <h2>Ajax data source</h2>
420 <ul>
421 <li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
422 <li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
423 <li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
424 <li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
425 <li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
426 <li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
427 <li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
428 </ul>
429
430 <h2>Plug-ins</h2>
431 <ul>
432 <li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
433 <li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
434 <li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
435 <li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
436 <li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
437 <li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
438 <li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
439 </ul>
440 </div>
441
442
443 <div id="footer" class="clear" style="text-align:center;">
444 <p>
445 Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
446 Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
447 </p>
448
449 <span style="font-size:10px;">
450 DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
451 DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
452 </span>
453 </div>
454 </div>
455 </body>
456 </html>