diff --git a/AUTHORS b/AUTHORS index e0b12c8a..274151a4 100644 --- a/AUTHORS +++ b/AUTHORS @@ -82,5 +82,6 @@ ced-b Federico-G Lars Alex Weissman +Andrew Murphy # Generated by tools/authors.sh diff --git a/docs/example-widget-vertical-group.html b/docs/example-widget-vertical-group.html new file mode 100644 index 00000000..824cb22f --- /dev/null +++ b/docs/example-widget-vertical-group.html @@ -0,0 +1,120 @@ + + + + + jQuery tablesorter 2.0 - Vertical Group Widget + + + + + + + + + + + + + + + + + + + + + + + +
+ +

+ NOTE! +

+
    +
  • Widget added in v2.29.1. Thanks to aavmurphy for sharing the code! +
      +
    • This widget works by enabling it in the widgets option and adding a tablesorter-vertical-group class name to the header column.
      • +
    • Make sure to include the additional CSS shown on this page.
      • +
    • Click to sort a column. Any sorted columns with duplicate cell entries will be grouped together and the zebra striping will be adjusted.
      • +
    • Sorting multiple columns will again adjust the duplicates and zebra striping.
      • +
    +
    • +
+ +

Demo

+
+ + + + + + + + + + + + + + + + + + + + + + + +
DayFirst NameLast Name
TuesdayPeterJones
ThursdayPeterSmith
ThursdayFredSmith
FridayFredJones
TuesdayMikeSnow
MondayMikeJones
WednesdayMikeSmith
FridayFredSnow
TuesdayFredSmith
ThursdayPeterSnow
FridayMikeSmith
MondayFredJones
TuesdayPeterSnow
FridayMikeJones
WednesdayPeterSmith
+ +

Page Header

+
+ 
+<link rel="stylesheet" href="css/blue/style.css">
+<script src="js/jquery-latest.min.js"></script>
+<script src="js/jquery.tablesorter.min.js"></script>
+<script src="js/widgets/widget-vertical-group.min.js"></script>
+
+

CSS

+
+ 

+	

+	
Javascript

+	

+		

+	

+	
HTML

+	

+		

+	

+
+

+
+
+
diff --git a/docs/index.html b/docs/index.html
index 064c2f00..40e80fbf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -527,6 +527,7 @@
 				
  • Bootstrap v4.x (v2.29.0) NOTE does not require the uitheme widget!
    • 
 			
 		
+		
  • Beta Vertical Group Widget (v2.29.1).
    • 
 		
  • Beta View Widget (v2.24.0; v2.26.6).
    • 
 		
  • ‡ Zebra stripe widget.
    • 
 	
diff --git a/js/widgets/widget-vertical-group b/js/widgets/widget-vertical-group
deleted file mode 100644
index 6672930b..00000000
--- a/js/widgets/widget-vertical-group
+++ /dev/null
@@ -1,130 +0,0 @@
-/*! Widget: vertical-group (BETA) - updated 9/27/2017 (v2.29.0) */
-/* Requires tablesorter and jQuery 
- * Originally by @aavmurphy (Andrew Murphy)
- * Adapted for tablesorter by xxxxxx
- *
- * This widget is licensed under the same terms at mottie/tablesorter itself, i.e. free to use
- */
-
-/*
-
-$.tablesorter.addWidget( { 
-	id: 'vertical_group', 
-	priority:99, 
-	format: vertically_group 
-	} ) ;
-	
-vertical_group = function ( table, config, widget_options, init_flag )
-	{
-	// -------------------------------------------------------------------------------------------------
-	// loop thru the header row,
-	//		- look for .vertical-group
-	//
-	// loop thru the rows
-	//
-	//		set ALWAYS_SHOW = FALSE
-	//
-	//		loop thru the 1st 4 columns
-	//
-	//			if this cell does not exist, skip to next row
-	//
-	//			if ALWAYS_SHOW, then this cell is SHOW
-	//
-	//			else if this column does not have '.vertical-group', then this cell is SHOW
-	//
-	//			else if this cell is NOT the same as the cell-above, then this cell is SHOW
-	//
-	//			else this cell is HIDE
-	//
-	//			if this cell is SHOW, set ALWAYS_SHOW 
-	//			
-	//			if this cell is SHOW, 
-	//			then 
-	//				set the cell class to .vertical_group_show
-	//			else
-	//				set the cell class to vertical_group_show
-	//
-	//			TO DO add/remove classes so as not to clobber other existing classes
-	//
-	//
-	//			TO DO add classes
-	//
-	//				.vertical-group-show { background-color: white !important; }
-	//				.vertical-group-hide { visibility: hidden; border-top: white !important;background-color: white !important; }
-	//
-	//				this is all because of stripped tables
-	//					- background-colour show be the table's background colour (or the first row's)
-	//					- the border-color needs to be the same
-	//
-	// ------------------------------------------------------------------------------------------------
-
-	//console.groupCollapsed( 'EVENT widget tablesorter : group rows vertically' );
-
-	var	rows					= table.tBodies[0].rows,
-		header					= table.tHead.rows,
-		is_vertical_group_col	= [],
-		last_row				= [ 'xxx', 'xxx', 'xxx', 'xxx' ] ;
-
-	//console.info( 'vertical cols widget' );
-	//console.info( ' . rows: ' + rows.length );
-
-	if ( table.vertical_group_lock )
-		{
-		console.info( '. STOP lock found' );
-		return;
-		}
-
-	table.vertical_group_lock = true;
-
-	for (var k = 0 ; k < 4; k++ )
-		{
-		if ( header[0].cells[ k ] && header[0].cells[ k ].className && header[0].cells[ k ].className.match( /vertical-group/i )  )
-			{
-			is_vertical_group_col[ k ] = true;
-			}
-		else
-			{
-			is_vertical_group_col[ k ] = false ;
-			}
-		}
-
-	for (var i = 0; i < rows.length; i++)
-		{
-		var always_show_cell = false ;
-
-		for (var j = 0 ; j < 4; j++ )
-			{
-			if ( ! is_vertical_group_col[ j ]  ) continue;
-
-			if ( ! rows[ i ].cells[ j ] ) continue; 		// check 1st 4 cols .. unless it doesnt have 4 cols
-
-			//console.info( '. . row: ' + i + ' = ' + region + ' from ' + rows[ i ].cells[ 0 ].className );
-
-			var cell_data	= rows[ i ].cells[ j ].innerHTML,
-				cell_class	= rows[ i ].cells[ j ].className ;
-
-			if ( ! always_show_cell && cell_data == last_row[j] )
-				{
-				if ( cell_class != 'vertical-group-hide' ) 	rows[ i ].cells[ j ].className 	= 'vertical-group-hide';
-				}
-			else
-				{
-				always_show_cell = true ; // show
-
-				if ( cell_class != 'vertical-group-show' ) 	rows[ i ].cells[ j ].className	= 'vertical-group-show';
-				}
-
-			//console.info( '. .     = ' + rows[ i ].cells[ 0 ].className );
-
-			last_row[j] = cell_data ;
-			}
-		}
-
-	//console.info( '. done' );
-
-	table.vertical_group_lock = false;
-
-	//console.groupEnd();
-	};
-	
-*/
diff --git a/js/widgets/widget-vertical-group.js b/js/widgets/widget-vertical-group.js
new file mode 100644
index 00000000..2cbf9242
--- /dev/null
+++ b/js/widgets/widget-vertical-group.js
@@ -0,0 +1,137 @@
+/*! Widget: vertical-group (BETA) - updated 12/13/2017 (v2.29.1) */
+/* Requires tablesorter and jQuery 
+ * Originally by @aavmurphy (Andrew Murphy)
+ * Adapted for tablesorter by Rob Garrison - see #1469 & #1470
+ *
+ * This widget is licensed under the same terms at mottie/tablesorter itself, i.e. free to use
+ */
+/* jshint browser:true, jquery:true, unused:false */
+/* global jQuery:false */
+;(function($){
+	'use strict';
+
+	var ts = $.tablesorter,
+		tscss = ts.css;
+
+	$.extend( ts.css, {
+		verticalGroupHeader: 'tablesorter-vertical-group',
+		verticalGroupHide:   'tablesorter-vertical-group-hide',
+		verticalGroupShow:   'tablesorter-vertical-group-show'
+	});
+
+	ts.addWidget({ 
+		id: 'vertical-group', 
+		priority: 99,
+		init: verticalGroup,
+		format: verticalGroup 
+	});
+
+	function cleanUp( el ) {
+		el.removeClass(tscss.verticalGroupHide + ' ' + tscss.verticalGroupShow);
+	}
+
+	function setZebra( wo, $cell, indx ) {
+		var $row = $cell.parent();
+		$row
+			.removeClass( wo.zebra[ (indx + 1) % 2 ] )
+			.addClass( wo.zebra[ indx % 2] );
+	}
+
+	function verticalGroup( table, c, wo, init ) {
+		// -------------------------------------------------------------------------
+		// loop thru the header row,
+		//    - look for .vertical-group
+		//
+		// loop thru the rows
+		//
+		//    set ALWAYS_SHOW = FALSE
+		//    loop thru the 1st 4 columns
+		//      if this cell does not exist, skip to next row
+		//      if ALWAYS_SHOW, then this cell is SHOW
+		//      else if this column does not have '.vertical-group', then this cell is SHOW
+		//      else if this cell is NOT the same as the cell-above, then this cell is SHOW
+		//      else this cell is HIDE
+		//      if this cell is SHOW, set ALWAYS_SHOW 
+		//      if this cell is SHOW, 
+		//      then 
+		//        set the cell class to .vertical_group_show
+		//      else
+		//        set the cell class to vertical_group_show
+		//
+		//      TO DO add/remove classes so as not to clobber other existing classes
+		//      TO DO add classes
+		//
+		//        .vertical-group-show { background-color: white !important; }
+		//        .vertical-group-hide { visibility: hidden; border-top: white !important;background-color: white !important; }
+		//
+		//        this is all because of stripped tables
+		//          - background-colour show be the table's background colour (or the first row's)
+		//          - the border-color needs to be the same
+		//
+		// ------------------------------------------------------------------------------------------------
+		var tmp,
+			zebra_index = -1, // increments at start of loop
+			rows = table.tBodies[0].rows,
+			header = table.tHead.rows,
+			has_zebra = ts.hasWidget( table, 'zebra'),
+			is_vertical_group_col = [],
+			last_row = [];
+
+		if ( wo.vertical_group_lock ) {
+			return;
+		}
+		wo.vertical_group_lock = true;
+
+		is_vertical_group_col = $.map( c.$headerIndexed, function( el ) {
+			return el.hasClass( tscss.verticalGroupHeader ) ? 1 : '';
+		});
+
+		if ( is_vertical_group_col.join('') === '' ) {
+			cleanUp( $(rows).find( '.' + tscss.verticalGroupHide + ',.' + tscss.verticalGroupShow ) );
+			wo.vertical_group_lock = false;
+			return;
+		}
+
+		for (var i = 0; i < rows.length; i++) {
+			var always_show_cell = false;
+
+			for (var j = 0; j < c.columns; j++ ) {
+				if ( !is_vertical_group_col[ j ] || !rows[ i ].cells[ j ] ) {
+					zebra_index++;
+					continue;
+				}
+
+				var $cell = $( rows[ i ].cells[ j ] ),
+					// only group if column is sorted
+					isSorted = ts.isValueInArray( j, c.sortList ), // returns equivalent of an indexOf value
+					cell_data = $cell.html();
+
+				if ( isSorted < 0 ) {
+					cleanUp( $cell );
+				} else if ( !always_show_cell && cell_data === last_row[j] ) {
+					if ( !$cell.hasClass(tscss.verticalGroupHide) ) {
+						$cell.addClass( tscss.verticalGroupHide );
+					}
+					if ( has_zebra ) {
+						setZebra( wo, $cell, zebra_index );
+					}
+					$cell.removeClass( tscss.verticalGroupShow );
+				} else if (isSorted === 0) {
+					// only show cells from the first sorted column
+					always_show_cell = true; // show
+					if ( !$cell.hasClass( tscss.verticalGroupShow ) ) {
+						$cell.addClass( tscss.verticalGroupShow );
+					}
+					$cell.removeClass( tscss.verticalGroupHide );
+					if ( has_zebra ) {
+						// only adjust striping based on the first sorted column
+						setZebra( wo, $cell, isSorted ? zebra_index : ++zebra_index );
+					}
+				}
+				last_row[j] = cell_data;
+			}
+		}
+		wo.vertical_group_lock = false;
+	}
+
+})(jQuery);