From afc3ec15632e718e516b48e9b42921bb0e6b5f33 Mon Sep 17 00:00:00 2001 From: Mottie Date: Sun, 20 Apr 2014 18:34:27 -0500 Subject: [PATCH] Add select2 Filter formatter code & cleanup --- ...xample-external-filters-using-select2.html | 230 ------ beta-testing/example-widget-sum-columns.html | 247 ------- beta-testing/select2-spinner.gif | Bin 1849 -> 0 bytes beta-testing/select2.css | 652 ------------------ beta-testing/select2.png | Bin 613 -> 0 bytes beta-testing/widget-column-math.js | 139 ---- ...ample-widget-filter-formatter-select2.html | 152 ++++ docs/index.html | 5 +- ...sorter.widgets-filter-formatter-select2.js | 130 ++++ 9 files changed, 284 insertions(+), 1271 deletions(-) delete mode 100644 beta-testing/example-external-filters-using-select2.html delete mode 100644 beta-testing/example-widget-sum-columns.html delete mode 100644 beta-testing/select2-spinner.gif delete mode 100644 beta-testing/select2.css delete mode 100644 beta-testing/select2.png delete mode 100644 beta-testing/widget-column-math.js create mode 100644 docs/example-widget-filter-formatter-select2.html create mode 100644 js/jquery.tablesorter.widgets-filter-formatter-select2.js diff --git a/beta-testing/example-external-filters-using-select2.html b/beta-testing/example-external-filters-using-select2.html deleted file mode 100644 index b143bf4d..00000000 --- a/beta-testing/example-external-filters-using-select2.html +++ /dev/null @@ -1,230 +0,0 @@ - - - - - jQuery plugin: Tablesorter 2.0 - External Filters + select2 - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -

- NOTE! -

-

- -

Demo

-
- - - - - - - - - - - -
filters: - - - - - -
- - - - - - - - - - - - - - - - - - - - - - -
AlphaNumericAlphaNumeric TagNumericAnimalsSites
abc 123abc 12310Koalahttp://www.google.com
abc 1abc 134Oxhttp://www.yahoo.com
abc 9abc 910Girafeehttp://www.facebook.com
zyx 24zyx 2467Bisonhttp://www.whitehouse.gov/
abc 11abc 113Chimphttp://www.ucla.edu/
abc 2abc 256Elephanthttp://www.wikipedia.org/
abc 9abc 975Lionhttp://www.nytimes.com/
abc 10abc 1087Zebrahttp://www.google.com
zyx 1zyx 199Koalahttp://www.mit.edu/
zyx 12zyx 120Llamahttp://www.nasa.gov/
- -

HTML

-
- 
<table id="external_controls">
-	<tbody>
-		<tr>
-			<td class="select2">filters: </td>
-			<td class="select2tag"></td>
-			<td>
-				<input type="search" placeholder="num" />
-			</td>
-			<td>
-				<input type="search" placeholder="anim" />
-			</td>
-			<td>
-				<input type="search" placeholder="sites" />
-			</td>
-		</tr>
-	</tbody>
-</table>
-
- -

Javascript

-
- 

-	

-
-

-
-
-
diff --git a/beta-testing/example-widget-sum-columns.html b/beta-testing/example-widget-sum-columns.html
deleted file mode 100644
index 19cad7f9..00000000
--- a/beta-testing/example-widget-sum-columns.html
+++ /dev/null
@@ -1,247 +0,0 @@
-
-
-
- 
-	jQuery plugin: Tablesorter 2.0 - Column Math Widget
-
-	
-	
-
-	
-	
-	
-	
-	
-
-	
-	
-	
-
-	
-
-	
-
-	
-
-
-
-
-
-

-
-		

-			NOTE!
-			

-		

-
-	
Demo

-
-

-	
-		
-			
-			
-			
-			
-			
-			
-		
-	
-	
-		
-			
-			
-			
-			
-			
-		
-		
-			
-			
-		
-	
-
-	
-		
-			
-			
-			
-			
-			
-			
-		
-		
-			
-			
-			
-			
-			
-			
-		
-		
-			
-			
-			
-			
-			
-			
-		
-		
-			
-			
-			
-			
-			
-			
-		
-	
-
-	
-		
-			
-			
-			
-			
-			
-		
-	
-
-	
-		
-			
-			
-			
-			
-			
-			
-		
-		
-			
-			
-			
-			
-			
-			
-		
-		
-			
-			
-			
-			
-			
-			
-		
-		
-			
-			
-			
-			
-			
-			
-		
-	
-
-	
-		
-			
-			
-			
-			
-			
-		
-	
-
-	
-		
-			
-			
-			
-			
-			
-			
-		
-		
-			
-			
-			
-			
-			
-			
-		
-		
-			
-			
-			
-			
-			
-			
-		
-		
-			
-			
-			
-			
-			
-			
-		
-	
-
-	
-		
-			
-			
-			
-			
-			
-		
-	
-
-
RegionSalesmanFastCarRapidZooSuperGlueGrand Total
Column Totals
Grand Total
MiddleJoseph$ 3,623$ 4,782$ 7,055
MiddleLawrence$ 5,908$ 4,642$ 4,593
MiddleMaria$ 6,502$ 3,969$ 5,408
MiddleMatt$ 4,170$ 6,093$ 5,039
Middle Total
NorthJoseph$ 3,643$ 5,846$ 6,574
NorthLawrence$ 4,456$ 6,658$ 7,685
NorthMaria$ 6,235$ 4,616.99$ 3,612.33
NorthMatt$ 3,868$ 3,926$ 3,254
North Total
WestJoseph$ 5,507$ 5,186$ 4,882
WestLawrence$ 4,082$ 5,272$ 6,124
WestMaria$ 5,520$ 5,461$ 4,872
WestMatt$ 6,737$ 4,598$ 4,233
West Total

-
-	
Javascript

-
-	

-		

-	

-
-	
HTML

-	

-		

-	

-
-

-
-
-
-
diff --git a/beta-testing/select2-spinner.gif b/beta-testing/select2-spinner.gif
deleted file mode 100644
index 5b33f7e54f4e55b6b8774d86d96895db9af044b4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1849
zcma*odr(tX9tZI2z31lM+(&YVk%mZ}5P~KlG2s=WSbGzm0!x7^P##Mnh7t-jP!X0Q
zk_SQ}Po-L1tlDK;6l?(>v)e5ZBQx4|Y-Q?nr@Px3?9h(3ZWr3^tj=`TP57gKr87N$
zp2wWee1GRRCwo_xahnw)5cxNPJbCg2L6DV|6`#+yw6v6!mDS$f9-JvFD^n;GQ&UrZ
zzh5jCkByB101O60U0q#p_1BM>Cv-vP?&s4@g_((4_1L=L$(a91)0=J91Gas#R{McE
znYG^9*0A5YZ>#;~+Wkn(W5B0^yELIYLP!K}mB~<)AM@1&nqekynuaEGqPrzoH|KodRXJy)%+w_fu3nE5>@Bd_b
zqC$EQ;{c`T&?EsNO|igL9gC7Ygxv?aQUEXMq?~>wg{EyW;VcJ37CUF#HjrT=KQO_*
zS>M9yydXk18D(+QDJ1>r);Lav_uYKp$T?4vr{Q$lTo&pKv^?(>L-)G2*lwH!Ah7k?
z7oH<8h-(KTKt5V6$8gF)C7Io&P5=SjTh)=zV=E2EUhQZP##L8S{d%UK>>+y82>+FV+#^BzW7u3F)Bb>=lYQ%%j`F>ASe
zo*cw@V#u6T`A2He;70mR(V&iV&-7{qP~=SRf&jm9-T{*ZeZ}$rd0#6c&fLG^xJcf5
z+p<`wJYgW+_s*V{uI$nMB;%8`S_3>PfGOj3Rq}@Cx^+j?rk92fANSFDBYnOqQ>Vdj
z)(|$AhP4t&Lb=Gvo2#3Gl%9<=Gv`Mz?Po@P4iLF!x}GUWJICDlFk-hS^Whyh7x~VH
z@0vD1>HYD4&e+~yzS*-sFR{9`{QEEZO1zg7>R&7cHts-6j!xHVdA8eI+ZlVzd%`es
zJT@$#GX(gvCJ1oJN%yLBK}{V=V;seo;!w|Yte!W1%5qLNFWqvZW>h&IiH+oPT=b@E
zPhGzv5=(Un*X>v`>%8h_nj^NdYcE6NHS_ifkCV$*D)Tqrbu`s;<=t<4
zAHNqNV?6(g<1PY-w@#I-WYFViz?9TrkMr)u0g`O`u|>T;k|2sV*YF^punvT;$SuTy{j3Gv)yqD!R_CF>yR)MzmmYS5v+~R
zXAdD%ng9?df;wd8GxR#%3O+gz};Vo;)sK%Bj-q>Oq%R7JU-KD?vYu>#2UjaDo
z&8$>5xW~?KPD_#XFToU1hIb*VOMidUr6iYiO0N|i-7s`T8!cFT`rN!^1Pt78J93i6
z5HI1wIM$94m{3SLDvISDe6$ZG1;eq_D9RTaaC>=cO{@Bs>$IlPCPJJ$h$)-3vzNUQ6OsN#_zWxey!_9%hxwH2_dEJi=yY|1c7nDm2_Lm!Cof8-R_+9UkS
zcBE(o47yE)oMR(Q=dp1a2wTX5KvvGyLqlWTa7V&!A*|w|)ax~1_~aJ0=_Lilg*0iQk7#ZD
EAHN$8j{pDw

diff --git a/beta-testing/select2.css b/beta-testing/select2.css
deleted file mode 100644
index 0592d64a..00000000
--- a/beta-testing/select2.css
+++ /dev/null
@@ -1,652 +0,0 @@
-/*
-Version: @@ver@@ Timestamp: @@timestamp@@
-*/
-.select2-container {
-    margin: 0;
-    position: relative;
-    display: inline-block;
-    /* inline-block for ie7 */
-    zoom: 1;
-    *display: inline;
-    vertical-align: middle;
-}
-
-.select2-container,
-.select2-drop,
-.select2-search,
-.select2-search input{
-  /*
-    Force border-box so that % widths fit the parent
-    container without overlap because of margin/padding.
-
-    More Info : http://www.quirksmode.org/css/box.html
-  */
-  -webkit-box-sizing: border-box; /* webkit */
-   -khtml-box-sizing: border-box; /* konqueror */
-     -moz-box-sizing: border-box; /* firefox */
-      -ms-box-sizing: border-box; /* ie */
-          box-sizing: border-box; /* css3 */
-}
-
-.select2-container .select2-choice {
-    display: block;
-    height: 26px;
-    padding: 0 0 0 8px;
-    overflow: hidden;
-    position: relative;
-
-    border: 1px solid #aaa;
-    white-space: nowrap;
-    line-height: 26px;
-    color: #444;
-    text-decoration: none;
-
-    -webkit-border-radius: 4px;
-       -moz-border-radius: 4px;
-            border-radius: 4px;
-
-    -webkit-background-clip: padding-box;
-       -moz-background-clip: padding;
-            background-clip: padding-box;
-
-    -webkit-touch-callout: none;
-      -webkit-user-select: none;
-       -khtml-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
-              user-select: none;
-
-    background-color: #fff;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
-    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
-    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
-    background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
-    background-image: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
-    background-image: linear-gradient(top, #ffffff 0%, #eeeeee 50%);
-}
-
-.select2-container.select2-drop-above .select2-choice {
-    border-bottom-color: #aaa;
-
-    -webkit-border-radius:0 0 4px 4px;
-       -moz-border-radius:0 0 4px 4px;
-            border-radius:0 0 4px 4px;
-
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white));
-    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%);
-    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%);
-    background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%);
-    background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
-    background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%);
-}
-
-.select2-container.select2-allowclear .select2-choice span {
-    margin-right: 42px;
-}
-
-.select2-container .select2-choice span {
-    margin-right: 26px;
-    display: block;
-    overflow: hidden;
-
-    white-space: nowrap;
-
-    -ms-text-overflow: ellipsis;
-     -o-text-overflow: ellipsis;
-        text-overflow: ellipsis;
-}
-
-.select2-container .select2-choice abbr {
-    display: none;
-    width: 12px;
-    height: 12px;
-    position: absolute;
-    right: 24px;
-    top: 8px;
-
-    font-size: 1px;
-    text-decoration: none;
-
-    border: 0;
-    background: url('select2.png') right top no-repeat;
-    cursor: pointer;
-    outline: 0;
-}
-
-.select2-container.select2-allowclear .select2-choice abbr {
-    display: inline-block;
-}
-
-.select2-container .select2-choice abbr:hover {
-    background-position: right -11px;
-    cursor: pointer;
-}
-
-.select2-drop-mask {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 9998;
-}
-
-.select2-drop {
-    width: 100%;
-    margin-top:-1px;
-    position: absolute;
-    z-index: 9999;
-    top: 100%;
-
-    background: #fff;
-    color: #000;
-    border: 1px solid #aaa;
-    border-top: 0;
-
-    -webkit-border-radius: 0 0 4px 4px;
-       -moz-border-radius: 0 0 4px 4px;
-            border-radius: 0 0 4px 4px;
-
-    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-       -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-            box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-}
-
-.select2-drop-auto-width {
-    border-top: 1px solid #aaa;
-    width: auto;
-}
-
-.select2-drop-auto-width .select2-search {
-    padding-top: 4px;
-}
-
-.select2-drop.select2-drop-above {
-    margin-top: 1px;
-    border-top: 1px solid #aaa;
-    border-bottom: 0;
-
-    -webkit-border-radius: 4px 4px 0 0;
-       -moz-border-radius: 4px 4px 0 0;
-            border-radius: 4px 4px 0 0;
-
-    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
-       -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
-            box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
-}
-
-.select2-container .select2-choice div {
-    display: inline-block;
-    width: 18px;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-
-    border-left: 1px solid #aaa;
-    -webkit-border-radius: 0 4px 4px 0;
-       -moz-border-radius: 0 4px 4px 0;
-            border-radius: 0 4px 4px 0;
-
-    -webkit-background-clip: padding-box;
-       -moz-background-clip: padding;
-            background-clip: padding-box;
-
-    background: #ccc;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
-    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
-    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
-    background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
-    background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
-    background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
-}
-
-.select2-container .select2-choice div b {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: url('select2.png') no-repeat 0 1px;
-}
-
-.select2-search {
-    display: inline-block;
-    width: 100%;
-    min-height: 26px;
-    margin: 0;
-    padding-left: 4px;
-    padding-right: 4px;
-
-    position: relative;
-    z-index: 10000;
-
-    white-space: nowrap;
-}
-
-.select2-search input {
-    width: 100%;
-    height: auto !important;
-    min-height: 26px;
-    padding: 4px 20px 4px 5px;
-    margin: 0;
-
-    outline: 0;
-    font-family: sans-serif;
-    font-size: 1em;
-
-    border: 1px solid #aaa;
-    -webkit-border-radius: 0;
-       -moz-border-radius: 0;
-            border-radius: 0;
-
-    -webkit-box-shadow: none;
-       -moz-box-shadow: none;
-            box-shadow: none;
-
-    background: #fff url('select2.png') no-repeat 100% -22px;
-    background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
-    background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
-    background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
-    background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
-    background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
-    background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
-}
-
-.select2-drop.select2-drop-above .select2-search input {
-    margin-top: 4px;
-}
-
-.select2-search input.select2-active {
-    background: #fff url('select2-spinner.gif') no-repeat 100%;
-    background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
-    background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
-    background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
-    background: url('select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
-    background: url('select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
-    background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
-}
-
-.select2-container-active .select2-choice,
-.select2-container-active .select2-choices {
-    border: 1px solid #5897fb;
-    outline: none;
-
-    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
-       -moz-box-shadow: 0 0 5px rgba(0,0,0,.3);
-            box-shadow: 0 0 5px rgba(0,0,0,.3);
-}
-
-.select2-dropdown-open .select2-choice {
-    border-bottom-color: transparent;
-    -webkit-box-shadow: 0 1px 0 #fff inset;
-       -moz-box-shadow: 0 1px 0 #fff inset;
-            box-shadow: 0 1px 0 #fff inset;
-
-    -webkit-border-bottom-left-radius: 0;
-        -moz-border-radius-bottomleft: 0;
-            border-bottom-left-radius: 0;
-
-    -webkit-border-bottom-right-radius: 0;
-        -moz-border-radius-bottomright: 0;
-            border-bottom-right-radius: 0;
-
-    background-color: #eee;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
-    background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
-    background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
-    background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
-    background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
-    background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
-}
-
-.select2-dropdown-open.select2-drop-above .select2-choice,
-.select2-dropdown-open.select2-drop-above .select2-choices {
-    border: 1px solid #5897fb;
-    border-top-color: transparent;
-
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(0.5, #eeeeee));
-    background-image: -webkit-linear-gradient(center top, white 0%, #eeeeee 50%);
-    background-image: -moz-linear-gradient(center top, white 0%, #eeeeee 50%);
-    background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
-    background-image: -ms-linear-gradient(bottom, #ffffff 0%,#eeeeee 50%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
-    background-image: linear-gradient(bottom, #ffffff 0%,#eeeeee 50%);
-}
-
-.select2-dropdown-open .select2-choice div {
-    background: transparent;
-    border-left: none;
-    filter: none;
-}
-.select2-dropdown-open .select2-choice div b {
-    background-position: -18px 1px;
-}
-
-/* results */
-.select2-results {
-    max-height: 200px;
-    padding: 0 0 0 4px;
-    margin: 4px 4px 4px 0;
-    position: relative;
-    overflow-x: hidden;
-    overflow-y: auto;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-.select2-results ul.select2-result-sub {
-    margin: 0;
-    padding-left: 0;
-}
-
-.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
-.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
-
-.select2-results li {
-    list-style: none;
-    display: list-item;
-    background-image: none;
-}
-
-.select2-results li.select2-result-with-children > .select2-result-label {
-    font-weight: bold;
-}
-
-.select2-results .select2-result-label {
-    padding: 3px 7px 4px;
-    margin: 0;
-    cursor: pointer;
-
-    min-height: 1em;
-
-    -webkit-touch-callout: none;
-      -webkit-user-select: none;
-       -khtml-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
-              user-select: none;
-}
-
-.select2-results .select2-highlighted {
-    background: #3875d7;
-    color: #fff;
-}
-
-.select2-results li em {
-    background: #feffde;
-    font-style: normal;
-}
-
-.select2-results .select2-highlighted em {
-    background: transparent;
-}
-
-.select2-results .select2-highlighted ul {
-    background: white;
-    color: #000;
-}
-
-
-.select2-results .select2-no-results,
-.select2-results .select2-searching,
-.select2-results .select2-selection-limit {
-    background: #f4f4f4;
-    display: list-item;
-}
-
-/*
-disabled look for disabled choices in the results dropdown
-*/
-.select2-results .select2-disabled.select2-highlighted {
-    color: #666;
-    background: #f4f4f4;
-    display: list-item;
-    cursor: default;
-}
-.select2-results .select2-disabled {
-  background: #f4f4f4;
-  display: list-item;
-  cursor: default;
-}
-
-.select2-results .select2-selected {
-    display: none;
-}
-
-.select2-more-results.select2-active {
-    background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
-}
-
-.select2-more-results {
-    background: #f4f4f4;
-    display: list-item;
-}
-
-/* disabled styles */
-
-.select2-container.select2-container-disabled .select2-choice {
-    background-color: #f4f4f4;
-    background-image: none;
-    border: 1px solid #ddd;
-    cursor: default;
-}
-
-.select2-container.select2-container-disabled .select2-choice div {
-    background-color: #f4f4f4;
-    background-image: none;
-    border-left: 0;
-}
-
-.select2-container.select2-container-disabled .select2-choice abbr {
-    display: none;
-}
-
-
-/* multiselect */
-
-.select2-container-multi .select2-choices {
-    height: auto !important;
-    height: 1%;
-    margin: 0;
-    padding: 0;
-    position: relative;
-
-    border: 1px solid #aaa;
-    cursor: text;
-    overflow: hidden;
-
-    background-color: #fff;
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
-    background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
-    background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
-    background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
-    background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
-    background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
-}
-
-.select2-locked {
-  padding: 3px 5px 3px 5px !important;
-}
-
-.select2-container-multi .select2-choices {
-    min-height: 26px;
-}
-
-.select2-container-multi.select2-container-active .select2-choices {
-    border: 1px solid #5897fb;
-    outline: none;
-
-    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
-       -moz-box-shadow: 0 0 5px rgba(0,0,0,.3);
-            box-shadow: 0 0 5px rgba(0,0,0,.3);
-}
-.select2-container-multi .select2-choices li {
-    float: left;
-    list-style: none;
-}
-.select2-container-multi .select2-choices .select2-search-field {
-    margin: 0;
-    padding: 0;
-    white-space: nowrap;
-}
-
-.select2-container-multi .select2-choices .select2-search-field input {
-    padding: 5px;
-    margin: 1px 0;
-
-    font-family: sans-serif;
-    font-size: 100%;
-    color: #666;
-    outline: 0;
-    border: 0;
-    -webkit-box-shadow: none;
-       -moz-box-shadow: none;
-            box-shadow: none;
-    background: transparent !important;
-}
-
-.select2-container-multi .select2-choices .select2-search-field input.select2-active {
-    background: #fff url('select2-spinner.gif') no-repeat 100% !important;
-}
-
-.select2-default {
-    color: #999 !important;
-}
-
-.select2-container-multi .select2-choices .select2-search-choice {
-    padding: 3px 5px 3px 18px;
-    margin: 3px 0 3px 5px;
-    position: relative;
-
-    line-height: 13px;
-    color: #333;
-    cursor: default;
-    border: 1px solid #aaaaaa;
-
-    -webkit-border-radius: 3px;
-       -moz-border-radius: 3px;
-            border-radius: 3px;
-
-    -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
-       -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
-            box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
-
-    -webkit-background-clip: padding-box;
-       -moz-background-clip: padding;
-            background-clip: padding-box;
-
-    -webkit-touch-callout: none;
-      -webkit-user-select: none;
-       -khtml-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
-              user-select: none;
-
-    background-color: #e4e4e4;
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0 );
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
-    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-    background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-}
-.select2-container-multi .select2-choices .select2-search-choice span {
-    cursor: default;
-}
-.select2-container-multi .select2-choices .select2-search-choice-focus {
-    background: #d4d4d4;
-}
-
-.select2-search-choice-close {
-    display: block;
-    width: 12px;
-    height: 13px;
-    position: absolute;
-    right: 3px;
-    top: 4px;
-
-    font-size: 1px;
-    outline: none;
-    background: url('select2.png') right top no-repeat;
-}
-
-.select2-container-multi .select2-search-choice-close {
-    left: 3px;
-}
-
-.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
-  background-position: right -11px;
-}
-.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
-    background-position: right -11px;
-}
-
-/* disabled styles */
-.select2-container-multi.select2-container-disabled .select2-choices{
-    background-color: #f4f4f4;
-    background-image: none;
-    border: 1px solid #ddd;
-    cursor: default;
-}
-
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
-    padding: 3px 5px 3px 5px;
-    border: 1px solid #ddd;
-    background-image: none;
-    background-color: #f4f4f4;
-}
-
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {    display: none;
-    background:none;
-}
-/* end multiselect */
-
-
-.select2-result-selectable .select2-match,
-.select2-result-unselectable .select2-match {
-    text-decoration: underline;
-}
-
-.select2-offscreen, .select2-offscreen:focus {
-    clip: rect(0 0 0 0);
-    width: 1px;
-    height: 1px;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    position: absolute;
-    outline: 0;
-    left: 0px;
-}
-
-.select2-display-none {
-    display: none;
-}
-
-.select2-measure-scrollbar {
-    position: absolute;
-    top: -10000px;
-    left: -10000px;
-    width: 100px;
-    height: 100px;
-    overflow: scroll;
-}
-/* Retina-ize icons */
-
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)  {
-  .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b {
-      background-image: url('select2x2.png') !important;
-      background-repeat: no-repeat !important;
-      background-size: 60px 40px !important;
-  }
-  .select2-search input {
-      background-position: 100% -21px !important;
-  }
-}
diff --git a/beta-testing/select2.png b/beta-testing/select2.png
deleted file mode 100644
index 1d804ffb99699b9e030f1010314de0970b5a000d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 613
zcmV-r0-F7aP)#WY!I$JQV$)A5aAS1BM||2XVJl=+L1^1S1H%
zM-&lx?NZpUrHhn>fk<>POqf2sh40}xxGZfc+t+#Eb(qHy9_3*1(U%t9t)QDnI#YAL(|ACV(>)>6WD-t!8tutHkdb^#3`HzoJG3A2@T`%
zA|K@o*b!`R#(7)PWrMFn2))Ca3MR4(zaT`Zr61*kZK5NPnZwQszxh$fyv3?&4c>$q
z2m=+yc0dRXRAsPDxF6sD;@rK4JGdR_``1S~o6Xi@2&aR6hcSrEp9HVRzEqVDqBn<1%hR=D4e1f^ra^A|34Cjc=Gny{F(o#MrvPYgZuTJOz(n)-F<|
zj()qR;C={)N<0RRvDZ^@6ND+W*}gh-Lip(MDt!(zMSO)!j2j+*hxgzC-e3$@(O2p*
zu;+gddm(cZwXTCLx*Ky4THOa*^b^F`woveIeCK^0aR|TJ00000NkvXXu0mjfA#WC6

diff --git a/beta-testing/widget-column-math.js b/beta-testing/widget-column-math.js
deleted file mode 100644
index c6755b44..00000000
--- a/beta-testing/widget-column-math.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/*! tablesorter column reorder - beta testing
-* Requires tablesorter v2.8+ and jQuery 1.7+
-* by Rob Garrison
-*/
-/*jshint browser:true, jquery:true, unused:false */
-/*global jQuery: false */
-;(function($){
-	"use strict";
-
-var ts = $.tablesorter = $.tablesorter || {};
-
-	ts.columnMath = {
-
-		equations : {
-			// sum all the cells in the row
-			sumrow   : function(table, $el, c, wo, direct){
-				var total = 0, row = ts.columnMath.getRow(table, $el, direct);
-				$.each( row, function(i){
-					total += row[i];
-				});
-				return total;
-			},
-			// sum all the cells in the column
-			sumcol   : function(table, $el, c, wo, direct){},
-			// sum all of the cells
-			sumall   : function(table, $el, c, wo, direct){},
-			// sum all of the cells in the column above the current one, until the next sumabove is reached
-			sumabove : function(table, $el, c, wo, direct){},
-			// target cells in a specific column c1, c2, c3, etc
-			col      : function(table, $el, c, wo, direct){},
-			// target cells in a specific row r1, r2, r3, etc.
-			row      : function(table, $el, c, wo, direct){}
-			// target
-		},
-
-		// get all of the row numerical values in an array
-		// el is the table cell where the data is added; direct means get the
-		// numbers directly from the table, otherwise it gets it from the cache.
-		getRow : function(table, $el, direct){
-			var i, txt, arry = [],
-				c = table.config,
-				$tb = c.$table.find('tbody'),
-				cIndex = $el[0].cellIndex,
-				$row = $el.closest('tr'),
-				bIndex = $tb.index( $row.closest('tbody') ),
-				rIndex = $tb.eq(bIndex).find('tr').index( $row ),
-				row = c.cache[bIndex].normalized[rIndex] || [];
-			if (direct) {
-				arry = $row.children().map(function(){
-					txt = (c.supportsTextContent) ? this.textContent : $(this).text();
-					txt = ts.formatFloat(txt.replace(/[^\w,. \-()]/g, ""), table);
-					return isNaN(txt) ? 0 : txt;
-				}).get();
-			} else {
-				for (i = 0; i < row.length - 1; i++) {
-					arry.push( (i === cIndex || isNaN(row[i]) ) ? 0 : row[i] );
-				}
-			}
-			return arry;
-		},
-
-		output : function($el, wo, value) {
-			value = wo.columnMath_format.output_prefix + ts.columnMath.addCommas(value, wo) + wo.columnMath_format.output_suffix;
-			if ($.isFunction(wo.columnMath_format.format_complete)) {
-				value = wo.columnMath_format.format_complete(value, $el);
-			}
-			$el.html('
' + value + '
');
-		},
-
-		addCommas : function(num, wo) {
-			var parts = ( num.toFixed( wo.columnMath_format.decimal_places ) + '' ).split('.');
-			parts[0] = parts[0].replace( wo.columnMath_regex, "$1" + wo.columnMath_format.thousands_separator );
-			return parts.join( wo.columnMath_format.decimal_separator );
-		},
-
-		recalculate : function(table, c, wo){
-			if (c) {
-				wo.columnMath_regex = new RegExp('(\\d)(?=(\\d{' + (wo.columnMath_format.thousands_grouping || 3) + '})+(?!\\d))', 'g' );
-				var n, t, $t,
-					priority = [ 'sumrow', 'sumabove', 'sumcol', 'sumall' ],
-					eq = ts.columnMath.equations,
-					dat = 'data-' + (wo.columnMath_data || 'math'),
-					$mathCells = c.$tbodies.find('[' + dat + ']');
-					// cells with a target are calculated last
-					$mathCells.not('[' + dat + '-target]').each(function(){
-						$t = $(this);
-						n = $t.attr(dat);
-						// check for built in math
-						// eq = n.match(/(\w+)[\s+]?\(/g);
-						if (eq[n]) {
-							t = eq[n](table, $t, c, wo);
-							if (t) {
-								ts.columnMath.output( $t, wo, t );
-							}
-						}
-					});
-					// console.log($mathCells);
-			}
-		}
-
-	};
-
-	// add new widget called repeatHeaders
-	// ************************************
-	$.tablesorter.addWidget({
-		id: "column-math",
-		options: {
-			columnMath_data   : 'math',
-			// columnMath_ignore : 'zero, text, empty',
-			columnMath_format : {
-				output_prefix       : '$ ',
-				output_suffix       : '',
-				thousands_separator : ',',
-				thousands_grouping  : 3,
-				decimal_separator   : '.',
-				decimal_places      : 2,
-				format_complete     : null // function(number, $cell){ return number; }
-			}
-		},
-		init : function(table, thisWidget, c, wo){
-			var $t = $(table).bind('update.tsmath updateRow.tsmath', function(){
-				$.tablesorter.columnMath.recalculate(table, c, wo);
-			});
-			$.tablesorter.columnMath.recalculate(table, c, wo);
-		},
-		// format is called when the on init and when a sorting has finished
-		format: function(table) {
-			// do nothing
-		},
-		// this remove function is called when using the refreshWidgets method or when destroying the tablesorter plugin
-		// this function only applies to tablesorter v2.4+
-		remove: function(table, c, wo){
-			$(table)
-				.unbind('update.tsmath updateRows.tsmath')
-				.find('[data-' + wo.columnMath_data + ']').empty();
-		}
-	});
-
-})(jQuery);
\ No newline at end of file
diff --git a/docs/example-widget-filter-formatter-select2.html b/docs/example-widget-filter-formatter-select2.html
new file mode 100644
index 00000000..f1d2d797
--- /dev/null
+++ b/docs/example-widget-filter-formatter-select2.html
@@ -0,0 +1,152 @@
+
+
+
+	
+	jQuery plugin: Tablesorter 2.0 - Filter Formatter: select2 (beta)
+
+	
+	
+
+	
+	
+	
+	
+	
+
+	
+	
+	
+	
+
+	
+	
+	
+	
+
+
+
+
+
+
+

+
+	

+		NOTE!
+		
    
+			
  • This is a demo of the select2 filter formatter code.
    • 
+			
  • It requires jQuery 1.7.2+, tablesorter 2.16+, the filter widget 2.16+ and Select2 v3.4.6+ (not tested on older select2 versions)
    • 
+			
  • There are only two filter formatter options, the rest are all select2 options (defaults shown below):
+				
    // select2 filter formatter options
+cellText : '',    // Text (wrapped in a label element)
+match    : true,  // adds "filter-match" to header & modifys search
+
+// ANY select2 options can be include below (showing default settings for this formatter code)
+multiple : true,  // allow multiple selections
+width    : '100%' // reduce this width if you add cellText
    
+			
    • 
+			
  • This demo uses the new filter_selectSource option which is only available in tablesorter v2.16+
+		

+	

+
+	
Demo

+

+
+	
+		
+			
+			
+			
+			
+			
+			
+		
+	
+	
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+	
+
AlphaNumeric (match)AlphaNumeric (exact; only available)NumericAnimalsSites
abc 123abc 12310Koalahttp://www.google.com
abc 1abc 134Oxhttp://www.yahoo.com
abc 9abc 910Girafeehttp://www.facebook.com
zyx 24zyx 2467Bisonhttp://www.whitehouse.gov/
abc 11abc 113Chimphttp://www.ucla.edu/
def 2def 256Elephanthttp://www.wikipedia.org/
abc 9abc 975Lionhttp://www.nytimes.com/
def 10def 1087Zebrahttp://www.google.com
zyx 1zyx 199Koalahttp://www.mit.edu/
zyx 12zyx 120Llamahttp://www.nasa.gov/

+
+	
Header

+	

+		
<!-- jQuery -->
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
+
+<!-- Tablesorter: required -->
+<link href="../css/theme.blue.css" rel="stylesheet">
+<script src="../js/jquery.tablesorter.js"></script>
+<script src="../js/jquery.tablesorter.widgets.js"></script>
+
+<!-- Select2 code -->
+<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.css" rel="stylesheet">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.js"></script>
+<script src="../js/jquery.tablesorter.widgets-filter-formatter-select2.js"></script>

+	

+
+	
HTML

+	

+		

+	

+
+	
Javascript

+	

+		

+	

+
+

+
+
+
diff --git a/docs/index.html b/docs/index.html
index 45aba12f..b5364175 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -468,7 +468,8 @@
 				
  • external option (match any column) (v2.13.3; v2.15)
    • 
 				
  • external inputs (v2.14; v2.15)
    • 
 				
  • custom (v2.3.6; v2.10.1)
    • 
-				
  • formatter (jQuery UI widgets and HTML5 Elements) (v2.7.7; v2.15).
    • 
+				
  • formatter: jQuery UI widgets and HTML5 Elements (v2.7.7; v2.15).
    • 
+				
  • formatter: select2 (v2.16.0)
    • 
 			
 		
 		
  • Grouping rows widget:
@@ -516,9 +517,7 @@
 	
    Work-in-progress
    
 	
 
 	
diff --git a/js/jquery.tablesorter.widgets-filter-formatter-select2.js b/js/jquery.tablesorter.widgets-filter-formatter-select2.js
new file mode 100644
index 00000000..40d1b552
--- /dev/null
+++ b/js/jquery.tablesorter.widgets-filter-formatter-select2.js
@@ -0,0 +1,130 @@
+/*! Filter widget formatter functions - updated 4/20/2014 (v2.16)
+ * requires: jQuery 1.7.2+, tableSorter 2.16+, filter widget 2.16+ and select2 v3.4.6+ plugin
+ */
+/*jshint browser:true, jquery:true, unused:false */
+/*global jQuery: false */
+;(function($){
+"use strict";
+
+var ts = $.tablesorter || {};
+ts.filterFormatter = ts.filterFormatter || {};
+
+/************************\
+ Select2 Filter Formatter
+\************************/
+ts.filterFormatter.select2 = function($cell, indx, select2Def) {
+	var o = $.extend({
+		// select2 filter formatter options
+		cellText : '', // Text (wrapped in a label element)
+		match : true, // adds "filter-match" to header
+		// include ANY select2 options below
+		multiple : true,
+		width : '100%'
+
+	}, select2Def ),
+	arry, data,
+	c = $cell.closest('table')[0].config,
+	wo = c.widgetOptions,
+	// Add a hidden input to hold the range values
+	$input = $('')
+	.appendTo($cell)
+	// hidden filter update namespace trigger by filter widget
+	.bind('change' + c.namespace + 'filter', function(){
+		var val = this.value;
+		val = val.replace(/[/()$]/g, '').split('|');
+		updateSelect2(val);
+	}),
+	$header = c.$headers.filter('[data-column="' + indx + '"]:last'),
+	onlyAvail = $header.hasClass(wo.filter_onlyAvail),
+	$shcell = [],
+	match = o.match ? '' : '$',
+
+	// this function updates the hidden input and adds the current values to the header cell text
+	updateSelect2 = function(v, notrigger) {
+		v = typeof v === "undefined" || v === '' ? $cell.find('.select2').select2('val') || o.value || '' : v || '';
+		$input
+		// add equal to the beginning, so we filter exact numbers
+		.val( $.isArray(v) && v.length ? '/(' + (v || []).join(match + '|') + match + ')/' : '' )
+		.trigger( notrigger ? '' : 'search' ).end()
+		.find('.select2').select2('val', v);
+		// update sticky header cell
+		if ($shcell.length) {
+			$shcell
+			.find('.select2').select2('val', v);
+		}
+	},
+	updateOptions = function(){
+		data = [];
+		arry = ts.filter.getOptionSource(c.$table[0], indx, onlyAvail) || [];
+		// build select2 data option
+		$.each(arry, function(i,v){
+			data.push({id: v, text: v});
+		});
+		o.data = data;
+	};
+
+	// get filter-match class from option
+	$header.toggleClass('filter-match', o.match);
+	if (o.cellText) {
+		$cell.prepend('');
+	}
+
+	if (!(o.ajax && !$.isEmptyObject(o.ajax)) && !o.data) {
+		updateOptions();
+		if (onlyAvail) {
+			c.$table.bind('filterEnd', function(){
+				updateOptions();
+				$cell.add($shcell).find('.select2').select2(o);
+			});
+		}
+	}
+
+	// add a select2!
+	$('')
+	.val(o.value)
+	.appendTo($cell)
+	.select2(o)
+	.bind('change', function(){
+		updateSelect2();
+	});
+
+	// update spinner from hidden input, in case of saved filters
+	c.$table.bind('filterFomatterUpdate', function(){
+		// value = '/(x$|y$)/' => 'x,y'
+		var val = c.$table.data('lastSearch')[indx] || '';
+		val = val.replace(/[/()$]/g, '').split('|');
+		$cell.find('.select2').select2('val', val);
+		updateSelect2(val, true);
+	});
+
+	// has sticky headers?
+	c.$table.bind('stickyHeadersInit', function(){
+		$shcell = c.widgetOptions.$sticky.find('.tablesorter-filter-row').children().eq(indx).empty();
+		// add a select2!
+		$('')
+		.val(o.value)
+		.appendTo($shcell)
+		.select2(o)
+		.bind('change', function(){
+			$cell.find('.select2').select2('val', $shcell.find('.select2').select2('val') );
+			updateSelect2();
+		});
+		if (o.cellText) {
+			$shcell.prepend('');
+		}
+
+	});
+
+	// on reset
+	c.$table.bind('filterReset', function(){
+		$cell.find('.select2').select2('val', o.value || '');
+		setTimeout(function(){
+			updateSelect2();
+		}, 0);
+	});
+
+	updateSelect2();
+	return $input;
+};
+
+})(jQuery);