From a8b253b5974750d69f1015c3849dd93744e452f7 Mon Sep 17 00:00:00 2001 From: Mottie Date: Sat, 19 Apr 2014 09:34:18 -0500 Subject: [PATCH] Add static row widget. Fixes #120 & #472 --- docs/example-widget-static-row.html | 266 ++++++++++++++++++++++++++++ docs/index.html | 1 + js/widgets/widget-staticRow.js | 123 +++++++++++++ 3 files changed, 390 insertions(+) create mode 100644 docs/example-widget-static-row.html create mode 100644 js/widgets/widget-staticRow.js diff --git a/docs/example-widget-static-row.html b/docs/example-widget-static-row.html new file mode 100644 index 00000000..d7a73834 --- /dev/null +++ b/docs/example-widget-static-row.html @@ -0,0 +1,266 @@ + + + + + jQuery plugin: Tablesorter 2.0 - Static Row Widget (beta) + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

+
+
+ +

Notes

+
+
    +
  • This widget will only work in tablesorter version 2.8+.
    • +
  • The widget was modified from Tablesorter-Static-Row-Plugin by ascii-soup (MIT license).
    • +
  • It has been updated to work in tables with multiple tbodies, but not within information-only tbodies.
    • +
  • This widget was not tested, nor was it meant to be used with the pager.
    • +
+
+ +

Options

+
+

Group widget default options (added inside of tablesorter widgetOptions)

+
+ TIP! Click on the link in the option column to reveal full details (or toggle|show|hide all) or double click to update the browser location. +
+ + + + + + + + + + + + + + + + + + + + + + + +
OptionDefaultDescription
staticRow_class".static" + Set a class name to use to lock a row in place, include a period. +
staticRow_data"static-index" + Set the jQuery data name to use with the row element. This data name saves the row index, and is only available as an option to avoid conflicts. +
"row-index" + Use this data-attribute to set the desired static row location +
+
+ Set the desired location using either of these two methods: +
    +
  • + Use a zero-based index of the row + 
    <tr data-row-index="5">...</tr>
    + Note setting this index to much more than the number of table rows ensures that it will stay at the bottom when adding new rows.
    +
    +
    • +
  • + Use a percentage if total rows within it's tbody + 
    <tr data-row-index="50%">...</tr>
    +
    • +
+ These values take priority over the actual row index, so as shown in the "Single tbody" demo below, the header row is set to 50%, but initially, it is located at the top of the table.
+
+ If these values are changed dynamically, the static row location can be updated +
+
+
+ +

Methods / Events

+
+

Method

+ If adding or removing rows from the table, using any of the update methods will automatically refresh the static row indexes. Use the "Add Row" button below to test this.
+
+ To modify or refresh the static row indexing without updating, trigger a staticRowsRefresh event on the table: + 
var $row = $("tr:contains('Iguana')");
+// move Iguana row down one (remember, this only works on static rows)
+$row.data('row-index', $row.data('row-index') + 1);
+$(table).trigger('staticRowsRefresh');
+ this allows moving a static row dynamically; try the Move "Ignuana" row buttons above the "Single tbody" demo. +

Event

+ A staticRowsComplete event is triggered after the static rows widget has completed moving the static rows back into place. Use it as follows: + 
$(table).bind('staticRowsComplete', function(table){
+	console.log('static rows applied to ' + table.id);
+});
+
+ +
+ +

Demo

+

Single tbody

+

Move "Iguana" row:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Column 1Column 2Column 3
Column 1Column 2Column 3
D4Dog
E5Emu
F6Frog
G7Goat
A1Anteater
B2Bear
C3Cat
H8Horse
I9Iguana
J10Jellyfish
V22Vole
W23Walrus
X24Xantis
K11Koala
L12Lemur
Q17Quail
R18Rhino
S19Seal
M13Mink
N14Nightingale
O15Octopus
P16Pig
T20Tiger
U21Urchin
Y25Yak
Z26Zebra
Total CountLots! 
+ +

Multiple tbody

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RankFirst NameLast NameAgeTotalDiscountDate
1Philip Aaron WongJohnson Sr Esq25$5.9522%Jun 26, 2004 7:22 AM
11AaronHibert12$2.995%Aug 21, 2009 12:21 PM
12Brandon ClarkHenry Jr51$42.2918%Oct 13, 2000 1:15 PM
111PeterParker28$9.9920%Jul 6, 2006 8:14 AM
21JohnHood33$19.9925%Dec 10, 2002 5:14 AM
013ClarkKent Sr.18$15.8944%Jan 12, 2003 11:14 AM
Second tbody
005BruceAlmighty Esq45$153.1944%Jan 18, 2021 9:12 AM
10AlexDumass13$5.294%Jan 8, 2012 5:11 PM
16JimFranco24$14.1914%Jan 14, 2004 11:23 AM
166Bruce LeeEvans22$13.1911%Jan 18, 2007 9:12 AM
100Brenda DexterMcMasters18$55.2015%Feb 12, 2010 7:23 PM
55DennisBronson65$123.0032%Jan 20, 2001 1:12 PM
9MarthadelFuego25$22.0917%Jun 11, 2011 10:55 AM
+ +
+ +

Javascript

+
+ 

+	

+	
CSS

+	

+		

+	

+	
HTML

+	

+		

+	

+
+
+
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 0fda0786..10525b73 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -496,6 +496,7 @@
 		
  • † Resizable Columns widget (v2.0.23.1; v2.15.12)
    • 
 		
  • † Save sort widget (v2.0.27)
    • 
 		
  • Scroller widget (v2.9).
    • 
+		
  • Beta StaticRow widget (v2.16).
    • 
 		
  • † Sticky header widget (v2.0.21.1; v2.14.4)
    • 
 		
  • Sticky header (css3) widget (v2.14.2; v2.15).
    • 
 		
  • † UITheme widget:
diff --git a/js/widgets/widget-staticRow.js b/js/widgets/widget-staticRow.js
new file mode 100644
index 00000000..cc01478c
--- /dev/null
+++ b/js/widgets/widget-staticRow.js
@@ -0,0 +1,123 @@
+/*
+ * StaticRow widget for jQuery TableSorter 2.0
+ * Version 1.1 - modified by Rob Garrison (4/19/2014 for tablesorter v2.16.0)
+ * Requires:
+ *  jQuery v1.4+
+ *  tablesorter plugin, v2.8+, available at http://mottie.github.com/tablesorter/docs/
+ *
+ * Copyright (c) 2011 Nils Luxton
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ */
+/*jshint browser:true, jquery:true, unused:false */
+/*global jQuery: false */
+;(function($){
+"use strict";
+var ts = $.tablesorter,
+
+// events triggered on the table that update this widget
+events = 'staticRowsRefresh updateComplete '.split(' ').join('.tsstaticrows '),
+
+// add/refresh row indexes
+addIndexes = function(table){
+	var $tr, wo, v, indx, rows,
+		c = table.config;
+	// "Index" the static rows, saving their current (starting) position in the
+	// table inside a data() param on the  element itself for later use.
+	if (c) {
+		wo = c.widgetOptions;
+		c.$tbodies.each(function(){
+			$tr = $(this).children();
+			rows = $tr.length;
+			$tr.filter(wo.staticRow_class).each(function() {
+				$tr = $(this);
+				indx = $tr.data(wo.staticRow_index);
+				if (typeof indx !== "undefined") {
+					v = parseFloat(indx);
+					// percentage of total rows
+					indx = (/%/.test(indx)) ? Math.round(v/100 * rows) : v;
+				} else {
+					indx = $tr.index();
+				}
+				// row indexing starts over within each tbody
+				$tr.data( wo.staticRow_data, indx );
+			});
+		});
+	}
+};
+
+ts.addWidget({
+	// Give the new Widget an ID to be used in the tablesorter() call, as follows:
+	// $('#myElement').tablesorter({ widgets: ['zebra', 'staticRow'] });
+	id: 'staticRow',
+
+	options: {
+		staticRow_class : '.static',
+		staticRow_data  : 'static-index',
+		staticRow_index : 'row-index'
+	},
+
+	init: function(table, thisWidget, c, wo){
+		addIndexes(table);
+		// refresh static rows after updates
+		c.$table
+			.unbind(events)
+			.bind(events, function(){
+				addIndexes(table);
+				c.$table.trigger('applyWidgets');
+			});
+	},
+
+	format: function(table, c, wo) {
+		// Loop thru static rows, moving them to their original "indexed" position,
+		// & repeat until no more re-shuffling is needed
+		var targetIndex, $thisRow, indx, numRows, $tbody, hasShuffled, $rows, max;
+		c.$tbodies.each(function(){
+			$tbody = $(this);
+			hasShuffled = true;
+			indx = 0;
+			$rows = $tbody.children(wo.staticRow_class);
+			max = $rows.length - 1;
+
+			// don't allow the while loop to cycle more times than the set number of static rows
+			while (hasShuffled && indx < max) {
+				hasShuffled = false;
+
+				/*jshint loopfunc:true */
+				$rows.each(function() {
+					targetIndex = $(this).data(wo.staticRow_data);
+					// allow setting target index >> num rows to always make a row last
+					targetIndex = targetIndex >= numRows ? numRows : targetIndex < 0 ? 0 : targetIndex;
+					if (targetIndex !== $(this).index()) {
+						hasShuffled = true;
+						$thisRow = $(this).detach();
+						numRows = $tbody.find('tr').length - 1;
+
+						if (targetIndex >= numRows) {
+							// Are we trying to be the last row?
+							$thisRow.appendTo( $tbody );
+						} else if (targetIndex === 0) {
+								// Are we trying to be the first row?
+								$thisRow.prependTo( $tbody );
+						} else {
+							// No, we want to be somewhere in the middle!
+							$thisRow.insertBefore( $tbody.find('tr:eq(' + targetIndex + ')') );
+						}
+					}
+				});
+				indx++;
+
+			}
+
+		});
+		c.$table.trigger('staticRowsComplete', table);
+	},
+
+	remove : function(table, c, wo){
+		c.$table.unbind(events);
+	}
+
+});
+
+})(jQuery);
\ No newline at end of file