X-Git-Url: http://source.jalview.org/gitweb/?a=blobdiff_plain;f=webapp%2Fresources%2Fdatatables-1.9.4%2Fextras%2FFixedColumns%2Frow_grouping_height.html;fp=webapp%2Fresources%2Fdatatables-1.9.4%2Fextras%2FFixedColumns%2Frow_grouping_height.html;h=f26534890bc89ab9768e4b207a993dd0331733db;hb=9bb6ee99ca7f738fac1087190b5481b8fe6e8d9f;hp=0000000000000000000000000000000000000000;hpb=2e3f6b76be585306f1003d849831840c0adb3360;p=proteocache.git diff --git a/webapp/resources/datatables-1.9.4/extras/FixedColumns/row_grouping_height.html b/webapp/resources/datatables-1.9.4/extras/FixedColumns/row_grouping_height.html new file mode 100644 index 0000000..f265348 --- /dev/null +++ b/webapp/resources/datatables-1.9.4/extras/FixedColumns/row_grouping_height.html @@ -0,0 +1,571 @@ + + + + + + + FixedColumns example + + + + + + + +
+
+ FixedColumns example - row grouping using the fixed column +
+ +

Preamble

+

This example shows how it is possible to manipulate the DOM of the fixed column to create the effect of row grouping in the table (or more generally any manipulation you wish to make). When ordered by the first column it is possible to see the grouping in full effect - if you then change the ordering to one of the other columns the grouping is dynamically changed to combine like cells. It would be readily possible to extend this example to use two fixed columns and only 'group' rows in one of the columns, potentially achieving quite a powerful effect.

+ +

Live example

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rendering engineBrowserPlatform(s)Engine versionCSS grade
TridentInternet + Explorer 4.0Win 95+4X
TridentInternet + Explorer 5.0Win 95+5C
TridentInternet + Explorer 5.5Win 95+5.5A
TridentInternet + Explorer 6Win 98+6A
TridentInternet Explorer 7Win XP SP2+7A
TridentAOL browser (AOL desktop)Win XP6A
GeckoFirefox 1.0Win 98+ / OSX.2+1.7A
GeckoFirefox
1.5		Win 98+ / OSX.2+1.8A
GeckoFirefox 2.0Win 98+ / OSX.2+1.8A
GeckoFirefox 3.0Win 2k+ / OSX.3+1.9A
GeckoCamino 1.0OSX.2+1.8A
GeckoCamino 1.5OSX.3+1.8A
GeckoNetscape 7.2Win 95+ / Mac OS 8.6-9.21.7A
GeckoNetscape Browser 8Win 98SE+1.7A
GeckoNetscape Navigator 9Win 98+ / OSX.2+1.8A
GeckoMozilla 1.0Win 95+ / OSX.1+1A
GeckoMozilla 1.1Win 95+ / OSX.1+1.1A
GeckoMozilla 1.2Win 95+ / OSX.1+1.2A
GeckoMozilla 1.3Win 95+ / OSX.1+1.3A
GeckoMozilla 1.4Win 95+ / OSX.1+1.4A
GeckoMozilla 1.5Win 95+ / OSX.1+1.5A
GeckoMozilla 1.6Win 95+ / OSX.1+1.6A
GeckoMozilla 1.7Win 98+ / OSX.1+1.7A
GeckoMozilla 1.8Win 98+ / OSX.1+1.8A
GeckoSeamonkey 1.1Win 98+ / OSX.2+1.8A
GeckoEpiphany 2.20Gnome1.8A
WebkitSafari 1.2OSX.3125.5A
WebkitSafari 1.3OSX.3312.8A
WebkitSafari 2.0OSX.4+419.3A
WebkitSafari 3.0OSX.4+522.1A
WebkitOmniWeb 5.5OSX.4+420A
WebkitiPod Touch / iPhoneiPod420.1A
WebkitS60S60413A
PrestoOpera 7.0Win 95+ / OSX.1+-A
PrestoOpera 7.5Win 95+ / OSX.2+-A
PrestoOpera 8.0Win 95+ / OSX.2+-A
PrestoOpera 8.5Win 95+ / OSX.2+-A
PrestoOpera 9.0Win 95+ / OSX.3+-A
PrestoOpera 9.2Win 88+ / OSX.3+-A
PrestoOpera 9.5Win 88+ / OSX.3+-A
PrestoOpera for WiiWii-A
PrestoNokia N800N800-A
PrestoNintendo DS browserNintendo DS8.5C/A
KHTMLKonqureror 3.1KDE 3.13.1C
KHTMLKonqureror 3.3KDE 3.33.3A
KHTMLKonqureror 3.5KDE 3.53.5A
TasmanInternet Explorer 4.5Mac OS 8-9-X
TasmanInternet Explorer 5.1Mac OS 7.6-91C
TasmanInternet Explorer 5.2Mac OS 8-X1C
MiscNetFront 3.1Embedded devices-C
MiscNetFront 3.4Embedded devices-A
MiscDillo 0.8Embedded devices-X
MiscLinksText only-X
MiscLynxText only-X
MiscIE MobileWindows Mobile 6-C
MiscPSP browserPSP-C
Other browsersAll others--U
+
+
+ + +

Initialisation code

+ 
$(document).ready( function () {
+	var oTable = $('#example').dataTable( {
+		"sScrollY": "300px",
+		"sScrollX": "100%",
+		"sScrollXInner": "150%",
+		"bScrollCollapse": true,
+		"bPaginate": false
+	} );
+
+	new FixedColumns( oTable, {
+		"iLeftWidth": 150,
+		"fnDrawCallback": function ( left, right ) {
+			var that = this, groupVal = null, matches = 0, heights = [], index = -1;
+			
+			/* Get the heights of the cells and remove redundant ones */
+			$('tbody tr td', left.body).each( function ( i ) {
+				var currVal = this.innerHTML;
+				
+				/* Reset values on new cell data. */
+				if (currVal != groupVal) {
+					groupVal = currVal;
+					index++;
+					heights[index] = 0;
+					matches = 0;
+				} else  {
+					matches++;
+				}
+				
+				heights[ index ] += $(this.parentNode).height();
+				if ( currVal == groupVal && matches > 0 ) {
+					this.parentNode.parentNode.removeChild(this.parentNode);
+				}
+			} );
+
+			/* Now set the height of the cells which remain, from the summed heights */
+			$('tbody tr td', left.body).each( function ( i ) {
+				that.fnSetRowHeight( this.parentNode, heights[ i ] );
+			} );
+		}
+	} );
+} );
+ + +

Documentation

+ + +

Basic examples

+ + +

Advanced examples

+
+ + \ No newline at end of file