Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebApplication/MVC2/HeuristicLabWeb.PluginHost/HLWebPluginHost/Content/jQuery/jQueryPlugins/DataTables-1.7.6/examples/api/tabs_and_scrolling.html @ 6286

Last change on this file since 6286 was 6286, checked in by dkahn, 13 years ago

#1198 Added jQuery plus plugins
File size: 14.1 KB
RevLine 
[6286]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 oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
22            if ( oTable.length > 0 ) {
23              oTable.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>$(document).ready(function() {
301  $("#tabs").tabs( {
302    "show": function(event, ui) {
303      var oTable = $('div.dataTables_scrollBody&gt;table.display', ui.panel).dataTable();
304      if ( oTable.length &gt; 0 ) {
305        oTable.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     
321     
322      <h1>Other examples</h1>
323      <h2>Basic initialisation</h2>
324      <ul>
325        <li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
326        <li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
327        <li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
328        <li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
329        <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
330        <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
331        <li><a href="../basic_init/dom.html">DOM positioning</a></li>
332        <li><a href="../basic_init/state_save.html">State saving</a></li>
333        <li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
334        <li>Scrolling:
335          <a href="../basic_init/scroll_x.html">Horizontal</a> /
336          <a href="../basic_init/scroll_y.html">Vertical</a> /
337          <a href="../basic_init/scroll_xy.html">Both</a> /
338          <a href="../basic_init/scroll_y_theme.html">Themed</a> /
339          <a href="../basic_init/scroll_y_infinite.html">Infinite</a>
340        </li>
341        <li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
342        <li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
343      </ul>
344     
345      <h2>Advanced initialisation</h2>
346      <ul>
347        <li><a href="../advanced_init/events_pre_init.html">Events (pre initialisation)</a></li>
348        <li><a href="../advanced_init/events_post_init.html">Events (post initialisation)</a></li>
349        <li><a href="../advanced_init/column_render.html">Column rendering</a></li>
350        <li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
351        <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
352        <li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
353        <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
354        <li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
355        <li><a href="../advanced_init/complex_header.html">Column grouping through col/row spans</a></li>
356        <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
357        <li><a href="../advanced_init/row_callback.html">Row callback</a></li>
358        <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
359        <li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
360      </ul>
361     
362      <h2>Data sources</h2>
363      <ul>
364        <li><a href="../data_sources/dom.html">DOM</a></li>
365        <li><a href="../data_sources/js_array.html">Javascript array</a></li>
366        <li><a href="../data_sources/ajax.html">Ajax source</a></li>
367        <li><a href="../data_sources/server_side.html">Server side processing</a></li>
368      </ul>
369     
370      <h2>Server-side processing</h2>
371      <ul>
372        <li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
373        <li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
374        <li><a href="../server_side/post.html">Use HTTP POST</a></li>
375        <li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
376        <li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
377        <li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
378        <li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
379      </ul>
380     
381      <h2>API</h2>
382      <ul>
383        <li><a href="../api/add_row.html">Dynamically add a new row</a></li>
384        <li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
385        <li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
386        <li><a href="../api/highlight.html">Highlight rows and columns</a></li>
387        <li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
388        <li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
389        <li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
390        <li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
391        <li><a href="../api/form.html">Submit form with elements in table</a></li>
392        <li><a href="../api/counter_column.html">Index column (static number column)</a></li>
393        <li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
394        <li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
395        <li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
396        <li><a href="../api/regex.html">Regular expression filtering</a></li>
397      </ul>
398     
399      <h2>Plug-ins</h2>
400      <ul>
401        <li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
402        <li><a href="../plug-ins/sorting_plugin.html">Sorting and type detection</a></li>
403        <li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
404        <li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
405        <li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
406        <li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
407      </ul>
408     
409     
410      <p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
411     
412     
413      <div id="footer" style="text-align:center;">
414        <span style="font-size:10px;">
415          DataTables &copy; Allan Jardine 2008-2010.
416        </span>
417      </div>
418    </div>
419  </body>
420</html>
Note: See TracBrowser for help on using the repository browser.