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/row_grouping.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: 18.4 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/media/images/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      div.giveHeight {
12        /* Stop the controls at the bottom bouncing around */
13        min-height: 380px;
14      }
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        oTable = $('#example').dataTable({
21          "fnDrawCallback": function ( oSettings ) {
22            if ( oSettings.aiDisplay.length == 0 )
23            {
24              return;
25            }
26           
27            var nTrs = $('tbody tr', oSettings.nTable);
28            var iColspan = nTrs[0].getElementsByTagName('td').length;
29            var sLastGroup = "";
30            for ( var i=0 ; i<nTrs.length ; i++ )
31            {
32              var iDisplayIndex = oSettings._iDisplayStart + i;
33              var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
34              if ( sGroup != sLastGroup )
35              {
36                var nGroup = document.createElement( 'tr' );
37                var nCell = document.createElement( 'td' );
38                nCell.colSpan = iColspan;
39                nCell.className = "group";
40                nCell.innerHTML = sGroup;
41                nGroup.appendChild( nCell );
42                nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
43                sLastGroup = sGroup;
44              }
45            }
46          },
47          "aoColumnDefs": [
48            { "bVisible": false, "aTargets": [ 0 ] }
49          ],
50          "aaSortingFixed": [[ 0, 'asc' ]],
51          "aaSorting": [[ 1, 'asc' ]],
52          "sDom": 'lfr<"giveHeight"t>ip'
53        });
54      } );
55    </script>
56  </head>
57  <body id="dt_example">
58    <div id="container">
59      <div class="full_width big">
60        <i>DataTables</i> row grouping example
61      </div>
62     
63      <h1>Preamble</h1>
64      <p>Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the plug-in it was felt), it is most certainly possible to give the look and feel of row grouping. In the example below the 'group' is the browser engine, which is based on the information in the first column (set to hidden). The grouping indicator is added by the fnDrawCallback function, which will parse through the rows which are displayed, and enter a TR element where a new group is found.</p>
65     
66      <h1>Live example</h1>
67      <div id="demo">
68<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
69  <thead>
70    <tr>
71      <th>Rendering engine</th>
72      <th>Browser</th>
73      <th>Platform(s)</th>
74      <th>Engine version</th>
75      <th>CSS grade</th>
76    </tr>
77  </thead>
78  <tbody>
79    <tr class="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="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="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="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="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="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    <tr class="gradeA">
126      <td>Gecko</td>
127      <td>Firefox 1.0</td>
128      <td>Win 98+ / OSX.2+</td>
129      <td class="center">1.7</td>
130      <td class="center">A</td>
131    </tr>
132    <tr class="gradeA">
133      <td>Gecko</td>
134      <td>Firefox 1.5</td>
135      <td>Win 98+ / OSX.2+</td>
136      <td class="center">1.8</td>
137      <td class="center">A</td>
138    </tr>
139    <tr class="gradeA">
140      <td>Gecko</td>
141      <td>Firefox 2.0</td>
142      <td>Win 98+ / OSX.2+</td>
143      <td class="center">1.8</td>
144      <td class="center">A</td>
145    </tr>
146    <tr class="gradeA">
147      <td>Gecko</td>
148      <td>Firefox 3.0</td>
149      <td>Win 2k+ / OSX.3+</td>
150      <td class="center">1.9</td>
151      <td class="center">A</td>
152    </tr>
153    <tr class="gradeA">
154      <td>Gecko</td>
155      <td>Camino 1.0</td>
156      <td>OSX.2+</td>
157      <td class="center">1.8</td>
158      <td class="center">A</td>
159    </tr>
160    <tr class="gradeA">
161      <td>Gecko</td>
162      <td>Camino 1.5</td>
163      <td>OSX.3+</td>
164      <td class="center">1.8</td>
165      <td class="center">A</td>
166    </tr>
167    <tr class="gradeA">
168      <td>Gecko</td>
169      <td>Netscape 7.2</td>
170      <td>Win 95+ / Mac OS 8.6-9.2</td>
171      <td class="center">1.7</td>
172      <td class="center">A</td>
173    </tr>
174    <tr class="gradeA">
175      <td>Gecko</td>
176      <td>Netscape Browser 8</td>
177      <td>Win 98SE+</td>
178      <td class="center">1.7</td>
179      <td class="center">A</td>
180    </tr>
181    <tr class="gradeA">
182      <td>Gecko</td>
183      <td>Netscape Navigator 9</td>
184      <td>Win 98+ / OSX.2+</td>
185      <td class="center">1.8</td>
186      <td class="center">A</td>
187    </tr>
188    <tr class="gradeA">
189      <td>Gecko</td>
190      <td>Mozilla 1.0</td>
191      <td>Win 95+ / OSX.1+</td>
192      <td class="center">1</td>
193      <td class="center">A</td>
194    </tr>
195    <tr class="gradeA">
196      <td>Gecko</td>
197      <td>Mozilla 1.1</td>
198      <td>Win 95+ / OSX.1+</td>
199      <td class="center">1.1</td>
200      <td class="center">A</td>
201    </tr>
202    <tr class="gradeA">
203      <td>Gecko</td>
204      <td>Mozilla 1.2</td>
205      <td>Win 95+ / OSX.1+</td>
206      <td class="center">1.2</td>
207      <td class="center">A</td>
208    </tr>
209    <tr class="gradeA">
210      <td>Gecko</td>
211      <td>Mozilla 1.3</td>
212      <td>Win 95+ / OSX.1+</td>
213      <td class="center">1.3</td>
214      <td class="center">A</td>
215    </tr>
216    <tr class="gradeA">
217      <td>Gecko</td>
218      <td>Mozilla 1.4</td>
219      <td>Win 95+ / OSX.1+</td>
220      <td class="center">1.4</td>
221      <td class="center">A</td>
222    </tr>
223    <tr class="gradeA">
224      <td>Gecko</td>
225      <td>Mozilla 1.5</td>
226      <td>Win 95+ / OSX.1+</td>
227      <td class="center">1.5</td>
228      <td class="center">A</td>
229    </tr>
230    <tr class="gradeA">
231      <td>Gecko</td>
232      <td>Mozilla 1.6</td>
233      <td>Win 95+ / OSX.1+</td>
234      <td class="center">1.6</td>
235      <td class="center">A</td>
236    </tr>
237    <tr class="gradeA">
238      <td>Gecko</td>
239      <td>Mozilla 1.7</td>
240      <td>Win 98+ / OSX.1+</td>
241      <td class="center">1.7</td>
242      <td class="center">A</td>
243    </tr>
244    <tr class="gradeA">
245      <td>Gecko</td>
246      <td>Mozilla 1.8</td>
247      <td>Win 98+ / OSX.1+</td>
248      <td class="center">1.8</td>
249      <td class="center">A</td>
250    </tr>
251    <tr class="gradeA">
252      <td>Gecko</td>
253      <td>Seamonkey 1.1</td>
254      <td>Win 98+ / OSX.2+</td>
255      <td class="center">1.8</td>
256      <td class="center">A</td>
257    </tr>
258    <tr class="gradeA">
259      <td>Gecko</td>
260      <td>Epiphany 2.20</td>
261      <td>Gnome</td>
262      <td class="center">1.8</td>
263      <td class="center">A</td>
264    </tr>
265    <tr class="gradeA">
266      <td>Webkit</td>
267      <td>Safari 1.2</td>
268      <td>OSX.3</td>
269      <td class="center">125.5</td>
270      <td class="center">A</td>
271    </tr>
272    <tr class="gradeA">
273      <td>Webkit</td>
274      <td>Safari 1.3</td>
275      <td>OSX.3</td>
276      <td class="center">312.8</td>
277      <td class="center">A</td>
278    </tr>
279    <tr class="gradeA">
280      <td>Webkit</td>
281      <td>Safari 2.0</td>
282      <td>OSX.4+</td>
283      <td class="center">419.3</td>
284      <td class="center">A</td>
285    </tr>
286    <tr class="gradeA">
287      <td>Webkit</td>
288      <td>Safari 3.0</td>
289      <td>OSX.4+</td>
290      <td class="center">522.1</td>
291      <td class="center">A</td>
292    </tr>
293    <tr class="gradeA">
294      <td>Webkit</td>
295      <td>OmniWeb 5.5</td>
296      <td>OSX.4+</td>
297      <td class="center">420</td>
298      <td class="center">A</td>
299    </tr>
300    <tr class="gradeA">
301      <td>Webkit</td>
302      <td>iPod Touch / iPhone</td>
303      <td>iPod</td>
304      <td class="center">420.1</td>
305      <td class="center">A</td>
306    </tr>
307    <tr class="gradeA">
308      <td>Webkit</td>
309      <td>S60</td>
310      <td>S60</td>
311      <td class="center">413</td>
312      <td class="center">A</td>
313    </tr>
314    <tr class="gradeA">
315      <td>Presto</td>
316      <td>Opera 7.0</td>
317      <td>Win 95+ / OSX.1+</td>
318      <td class="center">-</td>
319      <td class="center">A</td>
320    </tr>
321    <tr class="gradeA">
322      <td>Presto</td>
323      <td>Opera 7.5</td>
324      <td>Win 95+ / OSX.2+</td>
325      <td class="center">-</td>
326      <td class="center">A</td>
327    </tr>
328    <tr class="gradeA">
329      <td>Presto</td>
330      <td>Opera 8.0</td>
331      <td>Win 95+ / OSX.2+</td>
332      <td class="center">-</td>
333      <td class="center">A</td>
334    </tr>
335    <tr class="gradeA">
336      <td>Presto</td>
337      <td>Opera 8.5</td>
338      <td>Win 95+ / OSX.2+</td>
339      <td class="center">-</td>
340      <td class="center">A</td>
341    </tr>
342    <tr class="gradeA">
343      <td>Presto</td>
344      <td>Opera 9.0</td>
345      <td>Win 95+ / OSX.3+</td>
346      <td class="center">-</td>
347      <td class="center">A</td>
348    </tr>
349    <tr class="gradeA">
350      <td>Presto</td>
351      <td>Opera 9.2</td>
352      <td>Win 88+ / OSX.3+</td>
353      <td class="center">-</td>
354      <td class="center">A</td>
355    </tr>
356    <tr class="gradeA">
357      <td>Presto</td>
358      <td>Opera 9.5</td>
359      <td>Win 88+ / OSX.3+</td>
360      <td class="center">-</td>
361      <td class="center">A</td>
362    </tr>
363    <tr class="gradeA">
364      <td>Presto</td>
365      <td>Opera for Wii</td>
366      <td>Wii</td>
367      <td class="center">-</td>
368      <td class="center">A</td>
369    </tr>
370    <tr class="gradeA">
371      <td>Presto</td>
372      <td>Nokia N800</td>
373      <td>N800</td>
374      <td class="center">-</td>
375      <td class="center">A</td>
376    </tr>
377    <tr class="gradeA">
378      <td>Presto</td>
379      <td>Nintendo DS browser</td>
380      <td>Nintendo DS</td>
381      <td class="center">8.5</td>
382      <td class="center">C/A<sup>1</sup></td>
383    </tr>
384    <tr class="gradeC">
385      <td>KHTML</td>
386      <td>Konqureror 3.1</td>
387      <td>KDE 3.1</td>
388      <td class="center">3.1</td>
389      <td class="center">C</td>
390    </tr>
391    <tr class="gradeA">
392      <td>KHTML</td>
393      <td>Konqureror 3.3</td>
394      <td>KDE 3.3</td>
395      <td class="center">3.3</td>
396      <td class="center">A</td>
397    </tr>
398    <tr class="gradeA">
399      <td>KHTML</td>
400      <td>Konqureror 3.5</td>
401      <td>KDE 3.5</td>
402      <td class="center">3.5</td>
403      <td class="center">A</td>
404    </tr>
405    <tr class="gradeX">
406      <td>Tasman</td>
407      <td>Internet Explorer 4.5</td>
408      <td>Mac OS 8-9</td>
409      <td class="center">-</td>
410      <td class="center">X</td>
411    </tr>
412    <tr class="gradeC">
413      <td>Tasman</td>
414      <td>Internet Explorer 5.1</td>
415      <td>Mac OS 7.6-9</td>
416      <td class="center">1</td>
417      <td class="center">C</td>
418    </tr>
419    <tr class="gradeC">
420      <td>Tasman</td>
421      <td>Internet Explorer 5.2</td>
422      <td>Mac OS 8-X</td>
423      <td class="center">1</td>
424      <td class="center">C</td>
425    </tr>
426    <tr class="gradeA">
427      <td>Misc</td>
428      <td>NetFront 3.1</td>
429      <td>Embedded devices</td>
430      <td class="center">-</td>
431      <td class="center">C</td>
432    </tr>
433    <tr class="gradeA">
434      <td>Misc</td>
435      <td>NetFront 3.4</td>
436      <td>Embedded devices</td>
437      <td class="center">-</td>
438      <td class="center">A</td>
439    </tr>
440    <tr class="gradeX">
441      <td>Misc</td>
442      <td>Dillo 0.8</td>
443      <td>Embedded devices</td>
444      <td class="center">-</td>
445      <td class="center">X</td>
446    </tr>
447    <tr class="gradeX">
448      <td>Misc</td>
449      <td>Links</td>
450      <td>Text only</td>
451      <td class="center">-</td>
452      <td class="center">X</td>
453    </tr>
454    <tr class="gradeX">
455      <td>Misc</td>
456      <td>Lynx</td>
457      <td>Text only</td>
458      <td class="center">-</td>
459      <td class="center">X</td>
460    </tr>
461    <tr class="gradeC">
462      <td>Misc</td>
463      <td>IE Mobile</td>
464      <td>Windows Mobile 6</td>
465      <td class="center">-</td>
466      <td class="center">C</td>
467    </tr>
468    <tr class="gradeC">
469      <td>Misc</td>
470      <td>PSP browser</td>
471      <td>PSP</td>
472      <td class="center">-</td>
473      <td class="center">C</td>
474    </tr>
475    <tr class="gradeU">
476      <td>Other browsers</td>
477      <td>All others</td>
478      <td>-</td>
479      <td class="center">-</td>
480      <td class="center">U</td>
481    </tr>
482  </tbody>
483</table>
484      </div>
485      <div class="spacer"></div>
486     
487     
488      <h1>Initialisation code</h1>
489      <pre>$(document).ready(function() {
490  oTable = $('#example').dataTable({
491    "fnDrawCallback": function ( oSettings ) {
492      if ( oSettings.aiDisplay.length == 0 )
493      {
494        return;
495      }
496     
497      var nTrs = $('#example tbody tr');
498      var iColspan = nTrs[0].getElementsByTagName('td').length;
499      var sLastGroup = "";
500      for ( var i=0 ; i&lt;nTrs.length ; i++ )
501      {
502        var iDisplayIndex = oSettings._iDisplayStart + i;
503        var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
504        if ( sGroup != sLastGroup )
505        {
506          var nGroup = document.createElement( 'tr' );
507          var nCell = document.createElement( 'td' );
508          nCell.colSpan = iColspan;
509          nCell.className = "group";
510          nCell.innerHTML = sGroup;
511          nGroup.appendChild( nCell );
512          nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
513          sLastGroup = sGroup;
514        }
515      }
516    },
517    "aoColumnDefs": [
518      { "bVisible": false, "aTargets": [ 0 ] }
519    ],
520    "aaSortingFixed": [[ 0, 'asc' ]],
521    "aaSorting": [[ 1, 'asc' ]],
522    "sDom": 'lfr&lt;"giveHeight"t&gt;ip'
523  });
524} );</pre>
525     
526     
527      <h1>Other examples</h1>
528      <h2>Basic initialisation</h2>
529      <ul>
530        <li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
531        <li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
532        <li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
533        <li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
534        <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
535        <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
536        <li><a href="../basic_init/dom.html">DOM positioning</a></li>
537        <li><a href="../basic_init/state_save.html">State saving</a></li>
538        <li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
539        <li>Scrolling:
540          <a href="../basic_init/scroll_x.html">Horizontal</a> /
541          <a href="../basic_init/scroll_y.html">Vertical</a> /
542          <a href="../basic_init/scroll_xy.html">Both</a> /
543          <a href="../basic_init/scroll_y_theme.html">Themed</a> /
544          <a href="../basic_init/scroll_y_infinite.html">Infinite</a>
545        </li>
546        <li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
547        <li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
548      </ul>
549     
550      <h2>Advanced initialisation</h2>
551      <ul>
552        <li><a href="../advanced_init/events_pre_init.html">Events (pre initialisation)</a></li>
553        <li><a href="../advanced_init/events_post_init.html">Events (post initialisation)</a></li>
554        <li><a href="../advanced_init/column_render.html">Column rendering</a></li>
555        <li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
556        <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
557        <li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
558        <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
559        <li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
560        <li><a href="../advanced_init/complex_header.html">Column grouping through col/row spans</a></li>
561        <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
562        <li><a href="../advanced_init/row_callback.html">Row callback</a></li>
563        <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
564        <li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
565      </ul>
566     
567      <h2>Data sources</h2>
568      <ul>
569        <li><a href="../data_sources/dom.html">DOM</a></li>
570        <li><a href="../data_sources/js_array.html">Javascript array</a></li>
571        <li><a href="../data_sources/ajax.html">Ajax source</a></li>
572        <li><a href="../data_sources/server_side.html">Server side processing</a></li>
573      </ul>
574     
575      <h2>Server-side processing</h2>
576      <ul>
577        <li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
578        <li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
579        <li><a href="../server_side/post.html">Use HTTP POST</a></li>
580        <li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
581        <li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
582        <li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
583        <li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
584      </ul>
585     
586      <h2>API</h2>
587      <ul>
588        <li><a href="../api/add_row.html">Dynamically add a new row</a></li>
589        <li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
590        <li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
591        <li><a href="../api/highlight.html">Highlight rows and columns</a></li>
592        <li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
593        <li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
594        <li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
595        <li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
596        <li><a href="../api/form.html">Submit form with elements in table</a></li>
597        <li><a href="../api/counter_column.html">Index column (static number column)</a></li>
598        <li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
599        <li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
600        <li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
601        <li><a href="../api/regex.html">Regular expression filtering</a></li>
602      </ul>
603     
604      <h2>Plug-ins</h2>
605      <ul>
606        <li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
607        <li><a href="../plug-ins/sorting_plugin.html">Sorting and type detection</a></li>
608        <li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
609        <li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
610        <li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
611        <li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
612      </ul>
613     
614     
615      <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>
616     
617     
618      <div id="footer" style="text-align:center;">
619        <span style="font-size:10px;">DataTables &copy; Allan Jardine 2008-2010</span>
620      </div>
621    </div>
622  </body>
623</html>
Note: See TracBrowser for help on using the repository browser.