/[projects]/misc/horsensspejder-web/jquery/DataTables-1.9.4/extras/FixedColumns/row_grouping.html
ViewVC logotype

Annotation of /misc/horsensspejder-web/jquery/DataTables-1.9.4/extras/FixedColumns/row_grouping.html

Parent Directory Parent Directory | Revision Log Revision Log

Revision 2125 - (hide annotations) (download) (as text)
Wed Mar 12 19:30:05 2014 UTC (10 years, 4 months ago) by torben
File MIME type: text/html
File size: 16054 byte(s) 
initial import
1 torben 2125 <!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>FixedColumns example</title>
8     <style type="text/css" title="currentStyle">
9     @import "../../media/css/demo_page.css";
10     @import "../../media/css/demo_table.css";
11     .FixedColumns_Cloned th { background-color: white; }
12     td.index { background-color: white; border-right: 1px solid black; }
13     table.display th.sorting_disabled { border-bottom: 1px solid white; }
14     </style>
15     <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
16     <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
17     <script type="text/javascript" charset="utf-8" src="media/js/FixedColumns.js"></script>
18     <script type="text/javascript" charset="utf-8">
19     $(document).ready( function () {
20     var oTable = $('#example').dataTable( {
21     "sScrollY": "300px",
22     "sScrollX": "100%",
23     "sScrollXInner": "150%",
24     "bScrollCollapse": true,
25     "bPaginate": false,
26     "aaSortingFixed": [ [1, 'asc'] ],
27     "aoColumnDefs": [
28     { "bVisible": false, "aTargets": [1] }
29     ]
30     } );
31    
32     new FixedColumns( oTable, {
33     "fnDrawCallback": function ( left, right ) {
34     var oSettings = oTable.fnSettings();
35     if ( oSettings.aiDisplay.length == 0 )
36     {
37     return;
38     }
39    
40     var nGroup, nCell, iIndex, sGroup;
41     var sLastGroup = "", iCorrector=0;
42     var nTrs = $('#example tbody tr');
43     var iColspan = nTrs[0].getElementsByTagName('td').length;
44    
45     for ( var i=0 ; i<nTrs.length ; i++ )
46     {
47     iIndex = oSettings._iDisplayStart + i;
48     sGroup = oSettings.aoData[ oSettings.aiDisplay[iIndex] ]._aData[1] ;
49    
50     if ( sGroup != sLastGroup )
51     {
52     /* Cell to insert into main table */
53     nGroup = document.createElement( 'tr' );
54     nCell = document.createElement( 'td' );
55     nCell.colSpan = iColspan;
56     nCell.className = "group";
57     nCell.innerHTML = "&nbsp;";
58     nGroup.appendChild( nCell );
59     nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
60    
61     /* Cell to insert into the frozen columns */
62     nGroup = document.createElement( 'tr' );
63     nCell = document.createElement( 'td' );
64     nCell.className = "group";
65     nCell.innerHTML = sGroup;
66     nGroup.appendChild( nCell );
67     $(nGroup).insertBefore( $('tbody tr:eq('+(i+iCorrector)+')', left.body)[0] );
68    
69     iCorrector++;
70     sLastGroup = sGroup;
71     }
72     }
73     }
74     } );
75     } );
76     </script>
77     </head>
78     <body id="dt_example">
79     <div id="container">
80     <div class="full_width big">
81     FixedColumns example - row grouping
82     </div>
83    
84     <h1>Preamble</h1>
85     <p>This example is designed to re-implement the visual effect of the DataTables <a href="http://datatables.net/examples/advanced_init/row_grouping.html">row grouping example</a> with a fixed column. It is alternative row grouping style to that presented in the <a href="grouping.html">row grouping by height</a> example.</p>
86    
87     <h1>Live example</h1>
88     <div id="demo">
89     <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
90     <thead>
91     <tr>
92     <th>Browser</th>
93     <th>Rendering engine</th>
94     <th>Platform(s)</th>
95     <th>Engine version</th>
96     <th>CSS grade</th>
97     </tr>
98     </thead>
99     <tbody>
100     <tr class="gradeX">
101     <td>Internet
102     Explorer 4.0</td>
103     <td>Trident</td>
104     <td>Win 95+</td>
105     <td class="center">4</td>
106     <td class="center">X</td>
107     </tr>
108     <tr class="gradeC">
109     <td>Internet
110     Explorer 5.0</td>
111     <td>Trident</td>
112     <td>Win 95+</td>
113     <td class="center">5</td>
114     <td class="center">C</td>
115     </tr>
116     <tr class="gradeA">
117     <td>Internet
118     Explorer 5.5</td>
119     <td>Trident</td>
120     <td>Win 95+</td>
121     <td class="center">5.5</td>
122     <td class="center">A</td>
123     </tr>
124     <tr class="gradeA">
125     <td>Internet
126     Explorer 6</td>
127     <td>Trident</td>
128     <td>Win 98+</td>
129     <td class="center">6</td>
130     <td class="center">A</td>
131     </tr>
132     <tr class="gradeA">
133     <td>Internet Explorer 7</td>
134     <td>Trident</td>
135     <td>Win XP SP2+</td>
136     <td class="center">7</td>
137     <td class="center">A</td>
138     </tr>
139     <tr class="gradeA">
140     <td>AOL browser (AOL desktop)</td>
141     <td>Trident</td>
142     <td>Win XP</td>
143     <td class="center">6</td>
144     <td class="center">A</td>
145     </tr>
146     <tr class="gradeA">
147     <td>Firefox 1.0</td>
148     <td>Gecko</td>
149     <td>Win 98+ / OSX.2+</td>
150     <td class="center">1.7</td>
151     <td class="center">A</td>
152     </tr>
153     <tr class="gradeA">
154     <td>Firefox 1.5</td>
155     <td>Gecko</td>
156     <td>Win 98+ / OSX.2+</td>
157     <td class="center">1.8</td>
158     <td class="center">A</td>
159     </tr>
160     <tr class="gradeA">
161     <td>Firefox 2.0</td>
162     <td>Gecko</td>
163     <td>Win 98+ / OSX.2+</td>
164     <td class="center">1.8</td>
165     <td class="center">A</td>
166     </tr>
167     <tr class="gradeA">
168     <td>Firefox 3.0</td>
169     <td>Gecko</td>
170     <td>Win 2k+ / OSX.3+</td>
171     <td class="center">1.9</td>
172     <td class="center">A</td>
173     </tr>
174     <tr class="gradeA">
175     <td>Camino 1.0</td>
176     <td>Gecko</td>
177     <td>OSX.2+</td>
178     <td class="center">1.8</td>
179     <td class="center">A</td>
180     </tr>
181     <tr class="gradeA">
182     <td>Camino 1.5</td>
183     <td>Gecko</td>
184     <td>OSX.3+</td>
185     <td class="center">1.8</td>
186     <td class="center">A</td>
187     </tr>
188     <tr class="gradeA">
189     <td>Netscape 7.2</td>
190     <td>Gecko</td>
191     <td>Win 95+ / Mac OS 8.6-9.2</td>
192     <td class="center">1.7</td>
193     <td class="center">A</td>
194     </tr>
195     <tr class="gradeA">
196     <td>Netscape Browser 8</td>
197     <td>Gecko</td>
198     <td>Win 98SE+</td>
199     <td class="center">1.7</td>
200     <td class="center">A</td>
201     </tr>
202     <tr class="gradeA">
203     <td>Netscape Navigator 9</td>
204     <td>Gecko</td>
205     <td>Win 98+ / OSX.2+</td>
206     <td class="center">1.8</td>
207     <td class="center">A</td>
208     </tr>
209     <tr class="gradeA">
210     <td>Mozilla 1.0</td>
211     <td>Gecko</td>
212     <td>Win 95+ / OSX.1+</td>
213     <td class="center">1</td>
214     <td class="center">A</td>
215     </tr>
216     <tr class="gradeA">
217     <td>Mozilla 1.1</td>
218     <td>Gecko</td>
219     <td>Win 95+ / OSX.1+</td>
220     <td class="center">1.1</td>
221     <td class="center">A</td>
222     </tr>
223     <tr class="gradeA">
224     <td>Mozilla 1.2</td>
225     <td>Gecko</td>
226     <td>Win 95+ / OSX.1+</td>
227     <td class="center">1.2</td>
228     <td class="center">A</td>
229     </tr>
230     <tr class="gradeA">
231     <td>Mozilla 1.3</td>
232     <td>Gecko</td>
233     <td>Win 95+ / OSX.1+</td>
234     <td class="center">1.3</td>
235     <td class="center">A</td>
236     </tr>
237     <tr class="gradeA">
238     <td>Mozilla 1.4</td>
239     <td>Gecko</td>
240     <td>Win 95+ / OSX.1+</td>
241     <td class="center">1.4</td>
242     <td class="center">A</td>
243     </tr>
244     <tr class="gradeA">
245     <td>Mozilla 1.5</td>
246     <td>Gecko</td>
247     <td>Win 95+ / OSX.1+</td>
248     <td class="center">1.5</td>
249     <td class="center">A</td>
250     </tr>
251     <tr class="gradeA">
252     <td>Mozilla 1.6</td>
253     <td>Gecko</td>
254     <td>Win 95+ / OSX.1+</td>
255     <td class="center">1.6</td>
256     <td class="center">A</td>
257     </tr>
258     <tr class="gradeA">
259     <td>Mozilla 1.7</td>
260     <td>Gecko</td>
261     <td>Win 98+ / OSX.1+</td>
262     <td class="center">1.7</td>
263     <td class="center">A</td>
264     </tr>
265     <tr class="gradeA">
266     <td>Mozilla 1.8</td>
267     <td>Gecko</td>
268     <td>Win 98+ / OSX.1+</td>
269     <td class="center">1.8</td>
270     <td class="center">A</td>
271     </tr>
272     <tr class="gradeA">
273     <td>Seamonkey 1.1</td>
274     <td>Gecko</td>
275     <td>Win 98+ / OSX.2+</td>
276     <td class="center">1.8</td>
277     <td class="center">A</td>
278     </tr>
279     <tr class="gradeA">
280     <td>Epiphany 2.20</td>
281     <td>Gecko</td>
282     <td>Gnome</td>
283     <td class="center">1.8</td>
284     <td class="center">A</td>
285     </tr>
286     <tr class="gradeA">
287     <td>Safari 1.2</td>
288     <td>Webkit</td>
289     <td>OSX.3</td>
290     <td class="center">125.5</td>
291     <td class="center">A</td>
292     </tr>
293     <tr class="gradeA">
294     <td>Safari 1.3</td>
295     <td>Webkit</td>
296     <td>OSX.3</td>
297     <td class="center">312.8</td>
298     <td class="center">A</td>
299     </tr>
300     <tr class="gradeA">
301     <td>Safari 2.0</td>
302     <td>Webkit</td>
303     <td>OSX.4+</td>
304     <td class="center">419.3</td>
305     <td class="center">A</td>
306     </tr>
307     <tr class="gradeA">
308     <td>Safari 3.0</td>
309     <td>Webkit</td>
310     <td>OSX.4+</td>
311     <td class="center">522.1</td>
312     <td class="center">A</td>
313     </tr>
314     <tr class="gradeA">
315     <td>OmniWeb 5.5</td>
316     <td>Webkit</td>
317     <td>OSX.4+</td>
318     <td class="center">420</td>
319     <td class="center">A</td>
320     </tr>
321     <tr class="gradeA">
322     <td>iPod Touch / iPhone</td>
323     <td>Webkit</td>
324     <td>iPod</td>
325     <td class="center">420.1</td>
326     <td class="center">A</td>
327     </tr>
328     <tr class="gradeA">
329     <td>S60</td>
330     <td>Webkit</td>
331     <td>S60</td>
332     <td class="center">413</td>
333     <td class="center">A</td>
334     </tr>
335     <tr class="gradeA">
336     <td>Opera 7.0</td>
337     <td>Presto</td>
338     <td>Win 95+ / OSX.1+</td>
339     <td class="center">-</td>
340     <td class="center">A</td>
341     </tr>
342     <tr class="gradeA">
343     <td>Opera 7.5</td>
344     <td>Presto</td>
345     <td>Win 95+ / OSX.2+</td>
346     <td class="center">-</td>
347     <td class="center">A</td>
348     </tr>
349     <tr class="gradeA">
350     <td>Opera 8.0</td>
351     <td>Presto</td>
352     <td>Win 95+ / OSX.2+</td>
353     <td class="center">-</td>
354     <td class="center">A</td>
355     </tr>
356     <tr class="gradeA">
357     <td>Opera 8.5</td>
358     <td>Presto</td>
359     <td>Win 95+ / OSX.2+</td>
360     <td class="center">-</td>
361     <td class="center">A</td>
362     </tr>
363     <tr class="gradeA">
364     <td>Opera 9.0</td>
365     <td>Presto</td>
366     <td>Win 95+ / OSX.3+</td>
367     <td class="center">-</td>
368     <td class="center">A</td>
369     </tr>
370     <tr class="gradeA">
371     <td>Opera 9.2</td>
372     <td>Presto</td>
373     <td>Win 88+ / OSX.3+</td>
374     <td class="center">-</td>
375     <td class="center">A</td>
376     </tr>
377     <tr class="gradeA">
378     <td>Opera 9.5</td>
379     <td>Presto</td>
380     <td>Win 88+ / OSX.3+</td>
381     <td class="center">-</td>
382     <td class="center">A</td>
383     </tr>
384     <tr class="gradeA">
385     <td>Opera for Wii</td>
386     <td>Presto</td>
387     <td>Wii</td>
388     <td class="center">-</td>
389     <td class="center">A</td>
390     </tr>
391     <tr class="gradeA">
392     <td>Nokia N800</td>
393     <td>Presto</td>
394     <td>N800</td>
395     <td class="center">-</td>
396     <td class="center">A</td>
397     </tr>
398     <tr class="gradeA">
399     <td>Nintendo DS browser</td>
400     <td>Presto</td>
401     <td>Nintendo DS</td>
402     <td class="center">8.5</td>
403     <td class="center">C/A</td>
404     </tr>
405     <tr class="gradeC">
406     <td>Konqureror 3.1</td>
407     <td>KHTML</td>
408     <td>KDE 3.1</td>
409     <td class="center">3.1</td>
410     <td class="center">C</td>
411     </tr>
412     <tr class="gradeA">
413     <td>Konqureror 3.3</td>
414     <td>KHTML</td>
415     <td>KDE 3.3</td>
416     <td class="center">3.3</td>
417     <td class="center">A</td>
418     </tr>
419     <tr class="gradeA">
420     <td>Konqureror 3.5</td>
421     <td>KHTML</td>
422     <td>KDE 3.5</td>
423     <td class="center">3.5</td>
424     <td class="center">A</td>
425     </tr>
426     <tr class="gradeX">
427     <td>Internet Explorer 4.5</td>
428     <td>Tasman</td>
429     <td>Mac OS 8-9</td>
430     <td class="center">-</td>
431     <td class="center">X</td>
432     </tr>
433     <tr class="gradeC">
434     <td>Internet Explorer 5.1</td>
435     <td>Tasman</td>
436     <td>Mac OS 7.6-9</td>
437     <td class="center">1</td>
438     <td class="center">C</td>
439     </tr>
440     <tr class="gradeC">
441     <td>Internet Explorer 5.2</td>
442     <td>Tasman</td>
443     <td>Mac OS 8-X</td>
444     <td class="center">1</td>
445     <td class="center">C</td>
446     </tr>
447     <tr class="gradeA">
448     <td>NetFront 3.1</td>
449     <td>Misc</td>
450     <td>Embedded devices</td>
451     <td class="center">-</td>
452     <td class="center">C</td>
453     </tr>
454     <tr class="gradeA">
455     <td>NetFront 3.4</td>
456     <td>Misc</td>
457     <td>Embedded devices</td>
458     <td class="center">-</td>
459     <td class="center">A</td>
460     </tr>
461     <tr class="gradeX">
462     <td>Dillo 0.8</td>
463     <td>Misc</td>
464     <td>Embedded devices</td>
465     <td class="center">-</td>
466     <td class="center">X</td>
467     </tr>
468     <tr class="gradeX">
469     <td>Links</td>
470     <td>Misc</td>
471     <td>Text only</td>
472     <td class="center">-</td>
473     <td class="center">X</td>
474     </tr>
475     <tr class="gradeX">
476     <td>Lynx</td>
477     <td>Misc</td>
478     <td>Text only</td>
479     <td class="center">-</td>
480     <td class="center">X</td>
481     </tr>
482     <tr class="gradeC">
483     <td>IE Mobile</td>
484     <td>Misc</td>
485     <td>Windows Mobile 6</td>
486     <td class="center">-</td>
487     <td class="center">C</td>
488     </tr>
489     <tr class="gradeC">
490     <td>PSP browser</td>
491     <td>Misc</td>
492     <td>PSP</td>
493     <td class="center">-</td>
494     <td class="center">C</td>
495     </tr>
496     <tr class="gradeU">
497     <td>All others</td>
498     <td>Other browsers</td>
499     <td>-</td>
500     <td class="center">-</td>
501     <td class="center">U</td>
502     </tr>
503     </tbody>
504     </table>
505     </div>
506     <div class="spacer"></div>
507    
508    
509     <h1>Initialisation code</h1>
510     <pre>$(document).ready( function () {
511     var oTable = $('#example').dataTable( {
512     "sScrollY": "300px",
513     "sScrollX": "100%",
514     "sScrollXInner": "150%",
515     "bScrollCollapse": true,
516     "bPaginate": false,
517     "aaSortingFixed": [ [1, 'asc'] ],
518     "aoColumnDefs": [
519     { "bVisible": false, "aTargets": [1] }
520     ]
521     } );
522    
523     new FixedColumns( oTable, {
524     "fnDrawCallback": function ( left, right ) {
525     var oSettings = oTable.fnSettings();
526     if ( oSettings.aiDisplay.length == 0 )
527     {
528     return;
529     }
530    
531     var nGroup, nCell, iIndex, sGroup;
532     var sLastGroup = "", iCorrector=0;
533     var nTrs = $('#example tbody tr');
534     var iColspan = nTrs[0].getElementsByTagName('td').length;
535    
536     for ( var i=0 ; i&lt;nTrs.length ; i++ )
537     {
538     iIndex = oSettings._iDisplayStart + i;
539     sGroup = oSettings.aoData[ oSettings.aiDisplay[iIndex] ]._aData[1] ;
540    
541     if ( sGroup != sLastGroup )
542     {
543     /* Cell to insert into main table */
544     nGroup = document.createElement( 'tr' );
545     nCell = document.createElement( 'td' );
546     nCell.colSpan = iColspan;
547     nCell.className = "group";
548     nCell.innerHTML = "&amp;nbsp;";
549     nGroup.appendChild( nCell );
550     nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
551    
552     /* Cell to insert into the frozen columns */
553     nGroup = document.createElement( 'tr' );
554     nCell = document.createElement( 'td' );
555     nCell.className = "group";
556     nCell.innerHTML = sGroup;
557     nGroup.appendChild( nCell );
558     $(nGroup).insertBefore( $('tbody tr:eq('+(i+iCorrector)+')', left.body)[0] );
559    
560     iCorrector++;
561     sLastGroup = sGroup;
562     }
563     }
564     }
565     } );
566     } );</pre>
567    
568    
569     <h1>Documentation</h1>
570     <ul>
571     <li><a href="http://datatables.net/extras/fixedcolumns">Usage</a></li>
572     <li><a href="http://datatables.net/docs/FixedColumns">API / parameters</a></li>
573     </ul>
574    
575     <h1>Basic examples</h1>
576     <ul>
577     <li><a href="index.html">Basic demo of FixedColumns with zero initialisation</a></li>
578     <li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
579     <li><a href="index_column.html">Index column attached to side of the table</a></li>
580     <li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
581     <li><a href="two_columns.html">Two columns fixed in place</a></li>
582     <li><a href="right_column.html">Fix the right column in place</a></li>
583     <li><a href="css_size.html">Speeding up row height matching with CSS</a></li>
584     <li><a href="themed.html">jQuery UI themed table with FixedColumns</a></li>
585     </ul>
586    
587     <h1>Advanced examples</h1>
588     <ul>
589     <li><a href="rowspan.html">Using ROWSPAN with FixedColumns</a></li>
590     <li><a href="server-side-processing.html">Server-side processing with FixedColumns</a></li>
591     <li><a href="col_filter.html">Individual column filtering</a></li>
592     <li><a href="scale_fixed.html">Setting the fixed column width and resizing the table</a></li>
593     <li><a href="scale_relative.html">Setting the fixed column width with relative sizing</a></li>
594     <li><a href="row_grouping_height.html">Row grouping by grouping like rows in the fixed column</a></li>
595     <li><a href="row_grouping.html">Row grouping by inserting a grouping row</a></li>
596     <ul>
597    
598    
599     <div id="footer" style="text-align:center;">
600     <span style="font-size:10px;">
601     FixedColumns and DataTables &copy; Allan Jardine 2011.<br>
602     </span>
603     </div>
604     </div>
605     </body>
606     </html>
  ViewVC Help
Powered by ViewVC 1.1.20