Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebApplication/MVC2/HeuristicLabWeb.PluginHost/HLWebPluginHost/Content/jQuery/jQueryPlugins/DataTables-1.7.6/examples/advanced_init/complex_header.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: 17.0 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.css";
11      .bt { border-top: 1px solid black; }
12      .br { border-right: 1px solid black; }
13      .bb { border-bottom: 1px solid black; }
14      .bl { border-left: 1px solid black; }
15    </style>
16    <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
17    <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
18    <script type="text/javascript" charset="utf-8">
19      $(document).ready(function() {
20        $('#example').dataTable();
21      } );
22    </script>
23  </head>
24  <body id="dt_example">
25    <div id="container">
26      <div class="full_width big">
27        <i>DataTables</i> complex header example (row and colspans)
28      </div>
29     
30      <h1>Preamble</h1>
31      <p>When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspans in the header, assigning the required sorting listeners to the TH element suitable for that column. Each column must have one TH cell (and only one) which is unique to it for the listeners to be added. The example shown below has the core browser information grouped together.</p>
32     
33      <h1>Live example</h1>
34      <div id="demo">
35<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
36  <thead>
37    <tr>
38      <th rowspan="2" class="bl bt">Rendering engine</th>
39      <th colspan="3" class="bl br bt">Browser details</th>
40      <th rowspan="2" class="br bt">CSS grade</th>
41    </tr>
42    <tr>
43      <th class="bl">Browser</th>
44      <th>Platform(s)</th>
45      <th class="br">Engine version</th>
46    </tr>
47    <!--
48    <tr>
49      <th rowspan="2">Rendering engine</th>
50      <th>Browser</th>
51      <th>Platform(s)</th>
52      <th>Engine version</th>
53      <th rowspan="2">CSS grade</th>
54    </tr>
55    <tr>
56      <th colspan="3">Browser details</th>
57    </tr>
58    -->
59  </thead>
60  <tbody>
61    <tr class="gradeX">
62      <td>Trident</td>
63      <td>Internet
64         Explorer 4.0</td>
65      <td>Win 95+</td>
66      <td class="center">4</td>
67      <td class="center">X</td>
68    </tr>
69    <tr class="gradeC">
70      <td>Trident</td>
71      <td>Internet
72         Explorer 5.0</td>
73      <td>Win 95+</td>
74      <td class="center">5</td>
75      <td class="center">C</td>
76    </tr>
77    <tr class="gradeA">
78      <td>Trident</td>
79      <td>Internet
80         Explorer 5.5</td>
81      <td>Win 95+</td>
82      <td class="center">5.5</td>
83      <td class="center">A</td>
84    </tr>
85    <tr class="gradeA">
86      <td>Trident</td>
87      <td>Internet
88         Explorer 6</td>
89      <td>Win 98+</td>
90      <td class="center">6</td>
91      <td class="center">A</td>
92    </tr>
93    <tr class="gradeA">
94      <td>Trident</td>
95      <td>Internet Explorer 7</td>
96      <td>Win XP SP2+</td>
97      <td class="center">7</td>
98      <td class="center">A</td>
99    </tr>
100    <tr class="gradeA">
101      <td>Trident</td>
102      <td>AOL browser (AOL desktop)</td>
103      <td>Win XP</td>
104      <td class="center">6</td>
105      <td class="center">A</td>
106    </tr>
107    <tr class="gradeA">
108      <td>Gecko</td>
109      <td>Firefox 1.0</td>
110      <td>Win 98+ / OSX.2+</td>
111      <td class="center">1.7</td>
112      <td class="center">A</td>
113    </tr>
114    <tr class="gradeA">
115      <td>Gecko</td>
116      <td>Firefox 1.5</td>
117      <td>Win 98+ / OSX.2+</td>
118      <td class="center">1.8</td>
119      <td class="center">A</td>
120    </tr>
121    <tr class="gradeA">
122      <td>Gecko</td>
123      <td>Firefox 2.0</td>
124      <td>Win 98+ / OSX.2+</td>
125      <td class="center">1.8</td>
126      <td class="center">A</td>
127    </tr>
128    <tr class="gradeA">
129      <td>Gecko</td>
130      <td>Firefox 3.0</td>
131      <td>Win 2k+ / OSX.3+</td>
132      <td class="center">1.9</td>
133      <td class="center">A</td>
134    </tr>
135    <tr class="gradeA">
136      <td>Gecko</td>
137      <td>Camino 1.0</td>
138      <td>OSX.2+</td>
139      <td class="center">1.8</td>
140      <td class="center">A</td>
141    </tr>
142    <tr class="gradeA">
143      <td>Gecko</td>
144      <td>Camino 1.5</td>
145      <td>OSX.3+</td>
146      <td class="center">1.8</td>
147      <td class="center">A</td>
148    </tr>
149    <tr class="gradeA">
150      <td>Gecko</td>
151      <td>Netscape 7.2</td>
152      <td>Win 95+ / Mac OS 8.6-9.2</td>
153      <td class="center">1.7</td>
154      <td class="center">A</td>
155    </tr>
156    <tr class="gradeA">
157      <td>Gecko</td>
158      <td>Netscape Browser 8</td>
159      <td>Win 98SE+</td>
160      <td class="center">1.7</td>
161      <td class="center">A</td>
162    </tr>
163    <tr class="gradeA">
164      <td>Gecko</td>
165      <td>Netscape Navigator 9</td>
166      <td>Win 98+ / OSX.2+</td>
167      <td class="center">1.8</td>
168      <td class="center">A</td>
169    </tr>
170    <tr class="gradeA">
171      <td>Gecko</td>
172      <td>Mozilla 1.0</td>
173      <td>Win 95+ / OSX.1+</td>
174      <td class="center">1</td>
175      <td class="center">A</td>
176    </tr>
177    <tr class="gradeA">
178      <td>Gecko</td>
179      <td>Mozilla 1.1</td>
180      <td>Win 95+ / OSX.1+</td>
181      <td class="center">1.1</td>
182      <td class="center">A</td>
183    </tr>
184    <tr class="gradeA">
185      <td>Gecko</td>
186      <td>Mozilla 1.2</td>
187      <td>Win 95+ / OSX.1+</td>
188      <td class="center">1.2</td>
189      <td class="center">A</td>
190    </tr>
191    <tr class="gradeA">
192      <td>Gecko</td>
193      <td>Mozilla 1.3</td>
194      <td>Win 95+ / OSX.1+</td>
195      <td class="center">1.3</td>
196      <td class="center">A</td>
197    </tr>
198    <tr class="gradeA">
199      <td>Gecko</td>
200      <td>Mozilla 1.4</td>
201      <td>Win 95+ / OSX.1+</td>
202      <td class="center">1.4</td>
203      <td class="center">A</td>
204    </tr>
205    <tr class="gradeA">
206      <td>Gecko</td>
207      <td>Mozilla 1.5</td>
208      <td>Win 95+ / OSX.1+</td>
209      <td class="center">1.5</td>
210      <td class="center">A</td>
211    </tr>
212    <tr class="gradeA">
213      <td>Gecko</td>
214      <td>Mozilla 1.6</td>
215      <td>Win 95+ / OSX.1+</td>
216      <td class="center">1.6</td>
217      <td class="center">A</td>
218    </tr>
219    <tr class="gradeA">
220      <td>Gecko</td>
221      <td>Mozilla 1.7</td>
222      <td>Win 98+ / OSX.1+</td>
223      <td class="center">1.7</td>
224      <td class="center">A</td>
225    </tr>
226    <tr class="gradeA">
227      <td>Gecko</td>
228      <td>Mozilla 1.8</td>
229      <td>Win 98+ / OSX.1+</td>
230      <td class="center">1.8</td>
231      <td class="center">A</td>
232    </tr>
233    <tr class="gradeA">
234      <td>Gecko</td>
235      <td>Seamonkey 1.1</td>
236      <td>Win 98+ / OSX.2+</td>
237      <td class="center">1.8</td>
238      <td class="center">A</td>
239    </tr>
240    <tr class="gradeA">
241      <td>Gecko</td>
242      <td>Epiphany 2.20</td>
243      <td>Gnome</td>
244      <td class="center">1.8</td>
245      <td class="center">A</td>
246    </tr>
247    <tr class="gradeA">
248      <td>Webkit</td>
249      <td>Safari 1.2</td>
250      <td>OSX.3</td>
251      <td class="center">125.5</td>
252      <td class="center">A</td>
253    </tr>
254    <tr class="gradeA">
255      <td>Webkit</td>
256      <td>Safari 1.3</td>
257      <td>OSX.3</td>
258      <td class="center">312.8</td>
259      <td class="center">A</td>
260    </tr>
261    <tr class="gradeA">
262      <td>Webkit</td>
263      <td>Safari 2.0</td>
264      <td>OSX.4+</td>
265      <td class="center">419.3</td>
266      <td class="center">A</td>
267    </tr>
268    <tr class="gradeA">
269      <td>Webkit</td>
270      <td>Safari 3.0</td>
271      <td>OSX.4+</td>
272      <td class="center">522.1</td>
273      <td class="center">A</td>
274    </tr>
275    <tr class="gradeA">
276      <td>Webkit</td>
277      <td>OmniWeb 5.5</td>
278      <td>OSX.4+</td>
279      <td class="center">420</td>
280      <td class="center">A</td>
281    </tr>
282    <tr class="gradeA">
283      <td>Webkit</td>
284      <td>iPod Touch / iPhone</td>
285      <td>iPod</td>
286      <td class="center">420.1</td>
287      <td class="center">A</td>
288    </tr>
289    <tr class="gradeA">
290      <td>Webkit</td>
291      <td>S60</td>
292      <td>S60</td>
293      <td class="center">413</td>
294      <td class="center">A</td>
295    </tr>
296    <tr class="gradeA">
297      <td>Presto</td>
298      <td>Opera 7.0</td>
299      <td>Win 95+ / OSX.1+</td>
300      <td class="center">-</td>
301      <td class="center">A</td>
302    </tr>
303    <tr class="gradeA">
304      <td>Presto</td>
305      <td>Opera 7.5</td>
306      <td>Win 95+ / OSX.2+</td>
307      <td class="center">-</td>
308      <td class="center">A</td>
309    </tr>
310    <tr class="gradeA">
311      <td>Presto</td>
312      <td>Opera 8.0</td>
313      <td>Win 95+ / OSX.2+</td>
314      <td class="center">-</td>
315      <td class="center">A</td>
316    </tr>
317    <tr class="gradeA">
318      <td>Presto</td>
319      <td>Opera 8.5</td>
320      <td>Win 95+ / OSX.2+</td>
321      <td class="center">-</td>
322      <td class="center">A</td>
323    </tr>
324    <tr class="gradeA">
325      <td>Presto</td>
326      <td>Opera 9.0</td>
327      <td>Win 95+ / OSX.3+</td>
328      <td class="center">-</td>
329      <td class="center">A</td>
330    </tr>
331    <tr class="gradeA">
332      <td>Presto</td>
333      <td>Opera 9.2</td>
334      <td>Win 88+ / OSX.3+</td>
335      <td class="center">-</td>
336      <td class="center">A</td>
337    </tr>
338    <tr class="gradeA">
339      <td>Presto</td>
340      <td>Opera 9.5</td>
341      <td>Win 88+ / OSX.3+</td>
342      <td class="center">-</td>
343      <td class="center">A</td>
344    </tr>
345    <tr class="gradeA">
346      <td>Presto</td>
347      <td>Opera for Wii</td>
348      <td>Wii</td>
349      <td class="center">-</td>
350      <td class="center">A</td>
351    </tr>
352    <tr class="gradeA">
353      <td>Presto</td>
354      <td>Nokia N800</td>
355      <td>N800</td>
356      <td class="center">-</td>
357      <td class="center">A</td>
358    </tr>
359    <tr class="gradeA">
360      <td>Presto</td>
361      <td>Nintendo DS browser</td>
362      <td>Nintendo DS</td>
363      <td class="center">8.5</td>
364      <td class="center">C/A<sup>1</sup></td>
365    </tr>
366    <tr class="gradeC">
367      <td>KHTML</td>
368      <td>Konqureror 3.1</td>
369      <td>KDE 3.1</td>
370      <td class="center">3.1</td>
371      <td class="center">C</td>
372    </tr>
373    <tr class="gradeA">
374      <td>KHTML</td>
375      <td>Konqureror 3.3</td>
376      <td>KDE 3.3</td>
377      <td class="center">3.3</td>
378      <td class="center">A</td>
379    </tr>
380    <tr class="gradeA">
381      <td>KHTML</td>
382      <td>Konqureror 3.5</td>
383      <td>KDE 3.5</td>
384      <td class="center">3.5</td>
385      <td class="center">A</td>
386    </tr>
387    <tr class="gradeX">
388      <td>Tasman</td>
389      <td>Internet Explorer 4.5</td>
390      <td>Mac OS 8-9</td>
391      <td class="center">-</td>
392      <td class="center">X</td>
393    </tr>
394    <tr class="gradeC">
395      <td>Tasman</td>
396      <td>Internet Explorer 5.1</td>
397      <td>Mac OS 7.6-9</td>
398      <td class="center">1</td>
399      <td class="center">C</td>
400    </tr>
401    <tr class="gradeC">
402      <td>Tasman</td>
403      <td>Internet Explorer 5.2</td>
404      <td>Mac OS 8-X</td>
405      <td class="center">1</td>
406      <td class="center">C</td>
407    </tr>
408    <tr class="gradeA">
409      <td>Misc</td>
410      <td>NetFront 3.1</td>
411      <td>Embedded devices</td>
412      <td class="center">-</td>
413      <td class="center">C</td>
414    </tr>
415    <tr class="gradeA">
416      <td>Misc</td>
417      <td>NetFront 3.4</td>
418      <td>Embedded devices</td>
419      <td class="center">-</td>
420      <td class="center">A</td>
421    </tr>
422    <tr class="gradeX">
423      <td>Misc</td>
424      <td>Dillo 0.8</td>
425      <td>Embedded devices</td>
426      <td class="center">-</td>
427      <td class="center">X</td>
428    </tr>
429    <tr class="gradeX">
430      <td>Misc</td>
431      <td>Links</td>
432      <td>Text only</td>
433      <td class="center">-</td>
434      <td class="center">X</td>
435    </tr>
436    <tr class="gradeX">
437      <td>Misc</td>
438      <td>Lynx</td>
439      <td>Text only</td>
440      <td class="center">-</td>
441      <td class="center">X</td>
442    </tr>
443    <tr class="gradeC">
444      <td>Misc</td>
445      <td>IE Mobile</td>
446      <td>Windows Mobile 6</td>
447      <td class="center">-</td>
448      <td class="center">C</td>
449    </tr>
450    <tr class="gradeC">
451      <td>Misc</td>
452      <td>PSP browser</td>
453      <td>PSP</td>
454      <td class="center">-</td>
455      <td class="center">C</td>
456    </tr>
457    <tr class="gradeU">
458      <td>Other browsers</td>
459      <td>All others</td>
460      <td>-</td>
461      <td class="center">-</td>
462      <td class="center">U</td>
463    </tr>
464  </tbody>
465  <tfoot>
466    <tr>
467      <th>Rendering engine</th>
468      <th>Browser</th>
469      <th>Platform(s)</th>
470      <th>Engine version</th>
471      <th>CSS grade</th>
472    </tr>
473  </tfoot>
474</table>
475      </div>
476      <div class="spacer"></div>
477     
478     
479      <h1>Initialisation code</h1>
480      <pre>$(document).ready(function() {
481  $('#example').dataTable();
482} );</pre>
483     
484     
485      <h1>Other examples</h1>
486      <h2>Basic initialisation</h2>
487      <ul>
488        <li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
489        <li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
490        <li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
491        <li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
492        <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
493        <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
494        <li><a href="../basic_init/dom.html">DOM positioning</a></li>
495        <li><a href="../basic_init/state_save.html">State saving</a></li>
496        <li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
497        <li>Scrolling:
498          <a href="../basic_init/scroll_x.html">Horizontal</a> /
499          <a href="../basic_init/scroll_y.html">Vertical</a> /
500          <a href="../basic_init/scroll_xy.html">Both</a> /
501          <a href="../basic_init/scroll_y_theme.html">Themed</a> /
502          <a href="../basic_init/scroll_y_infinite.html">Infinite</a>
503        </li>
504        <li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
505        <li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
506      </ul>
507     
508      <h2>Advanced initialisation</h2>
509      <ul>
510        <li><a href="../advanced_init/events_pre_init.html">Events (pre initialisation)</a></li>
511        <li><a href="../advanced_init/events_post_init.html">Events (post initialisation)</a></li>
512        <li><a href="../advanced_init/column_render.html">Column rendering</a></li>
513        <li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
514        <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
515        <li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
516        <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
517        <li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
518        <li><a href="../advanced_init/complex_header.html">Column grouping through col/row spans</a></li>
519        <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
520        <li><a href="../advanced_init/row_callback.html">Row callback</a></li>
521        <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
522        <li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
523      </ul>
524     
525      <h2>Data sources</h2>
526      <ul>
527        <li><a href="../data_sources/dom.html">DOM</a></li>
528        <li><a href="../data_sources/js_array.html">Javascript array</a></li>
529        <li><a href="../data_sources/ajax.html">Ajax source</a></li>
530        <li><a href="../data_sources/server_side.html">Server side processing</a></li>
531      </ul>
532     
533      <h2>Server-side processing</h2>
534      <ul>
535        <li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
536        <li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
537        <li><a href="../server_side/post.html">Use HTTP POST</a></li>
538        <li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
539        <li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
540        <li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
541        <li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
542      </ul>
543     
544      <h2>API</h2>
545      <ul>
546        <li><a href="../api/add_row.html">Dynamically add a new row</a></li>
547        <li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
548        <li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
549        <li><a href="../api/highlight.html">Highlight rows and columns</a></li>
550        <li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
551        <li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
552        <li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
553        <li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
554        <li><a href="../api/form.html">Submit form with elements in table</a></li>
555        <li><a href="../api/counter_column.html">Index column (static number column)</a></li>
556        <li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
557        <li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
558        <li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
559        <li><a href="../api/regex.html">Regular expression filtering</a></li>
560      </ul>
561     
562      <h2>Plug-ins</h2>
563      <ul>
564        <li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
565        <li><a href="../plug-ins/sorting_plugin.html">Sorting and type detection</a></li>
566        <li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
567        <li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
568        <li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
569        <li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
570      </ul>
571     
572     
573      <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>
574     
575     
576      <div id="footer" style="text-align:center;">
577        <span style="font-size:10px;">
578          DataTables &copy; Allan Jardine 2008-2010.
579        </span>
580      </div>
581    </div>
582  </body>
583</html>
Note: See TracBrowser for help on using the repository browser.