2015-11-08 16:45:25 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2016-01-10 22:24:57 +00:00
< title > jQuery tablesorter 2.0 - Toggle Widget< / title >
2015-11-08 16:45:25 +00:00
<!-- jQuery -->
< script src = "js/jquery-latest.min.js" > < / script >
<!-- Demo stuff -->
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
< script src = "js/jquery-ui.min.js" > < / script >
< link rel = "stylesheet" href = "css/jq.css" >
< link href = "css/prettify.css" rel = "stylesheet" >
< link href = "css/tipsy.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
< script src = "js/jquery.tipsy.min.js" > < / script >
<!-- Tablesorter: required -->
< link rel = "stylesheet" href = "../css/theme.blue.css" >
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/widgets/widget-filter.js" > < / script >
< script src = "../js/widgets/widget-headerTitles.js" > < / script >
< script src = "../js/widgets/widget-toggle.js" > < / script >
< script id = "js" > $ ( f u n c t i o n ( ) {
var $table = $( '#table' ),
isEnabled = true, // tablesorter enabled
hideFilterRow = false, // hide filter row setting
// used by headerTitles widget
updateTooltips = function( $cell, txt ) {
if ( $cell.is( ':hover' ) ) {
$cell
.attr({ title : txt, 'original-title' : txt })
// hide, then show the tooltip to force updating & realignment
.tipsy( 'hide' )
.tipsy( 'show' );
}
return txt;
};
$table.tablesorter({
theme : 'blue',
widthFixed : true,
widgets : [ 'zebra', 'filter', 'headerTitles', 'toggle-ts' ],
widgetOptions : {
filter_reset : '.reset',
filter_external : '.search',
filter_columnFilters : true,
headerTitle_useAria : true,
headerTitle_tooltip : 'tooltip',
headerTitle_callback : updateTooltips,
// toggle-ts widget
toggleTS_hideFilterRow : hideFilterRow,
toggleTS_callback : function( c, isEnabled ) {
// update tooltips
c.$table.trigger( 'refreshHeaderTitle' );
}
}
});
// enable/disable tablesorter button
$( '.toggle' ).click( function() {
isEnabled = !isEnabled;
$( this ).text( isEnabled ? 'Disable' : 'Enable' );
$table.trigger( isEnabled ? 'enable' : 'disable' );
// If using the pager:
// $table.trigger( ( isEnabled ? 'enable' : 'disable' ) + 'Pager' );
// To reset sort or filter, include the following
// if ( !isEnabled ) {
// $table.trigger( 'sortReset' ).trigger( 'filterReset' );
// }
});
// demo: toggle filter row option
$( '.filterRow' ).click( function() {
hideFilterRow = !hideFilterRow;
$table[ 0 ].config.widgetOptions.toggleTS_hideFilterRow = hideFilterRow;
$( this ).text( '' + hideFilterRow );
});
// add tooltip
$( '.tooltip' ).tipsy({ gravity: 's' });
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Toggle Sort & Filter Widget< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p > < / p >
< br >
< div id = "root" class = "accordion" >
< h3 id = "notes" > < a href = "#" > Notes< / a > < / h3 >
< div >
< ul >
< li > This widget allows the enabling or disabling of tablesorter sorting & filtering.< / li >
< li > The widget does not reset an applied sort or filters. If you want to include this when disabling, use the following code:
< ul >
< li > < a href = "index.html#sortreset-method" > Sort reset< / a > : < code class = "prettyprint lang-js" > $('table').trigger('sortReset');< / code > < / li >
< li > < a href = "example-widget-filter.html#method-reset" > Filter reset< / a > : < code class = "prettyprint lang-js" > $('table').trigger('filterReset');< / code > < / li >
< / ul >
< br >
< / li >
< li > < span class = "label alert" > *ALERT*< / span > This widget requires tablesorter v2.22.4+ and jQuery 1.7+< / li >
< / ul >
< / div >
< h3 > < a href = "#" > Options< / a > < / h3 >
< div >
< div >
< span class = "label label-info" > TIP!< / span > Click on the link in the option column to reveal full details (or < a href = "#" class = "toggleAll" > toggle< / a > |< a href = "#" class = "showAll" > show< / a > |< a href = "#" class = "hideAll" > hide< / a > all) or double click to update the browser location.
< / div >
< table class = "options tablesorter-blue" data-sortlist = "[[0,0]]" >
< thead >
< tr > < th > Option< / th > < th class = "defaults" > Default< / th > < th class = "sorter-false" > Description< / th > < / tr >
< / thead >
< tbody >
< tr id = "togglets_hidefilterrow" >
< td > < span class = "permalink" > toggleTS_hideFilterRow< / span > < / td >
< td > false< / td >
< td > If < code > true< / code > , hide filter row; when < code > false< / code > , associated filters are disabled.< / td >
< / tr >
< tr id = "togglets_callback" >
< td > < a href = "#" class = "permalink" > toggleTS_callback< / a > < / td >
< td > null< / td >
< td > This function is called after tablesorter has been enabled or disabled.
< div class = "collapsible" >
< p > Use it as follows:< / p >
< pre class = "prettyprint lang-js" > $( function() {
$( 'table' ).tablesorter({
widget : [ 'toggle-ts' ],
widgetOptions : {
toggleTS_callback : function( c, isEnabled ) {
c.$table.toggleClass( 'isDisabled', !isEnabled );
}
}
});
});< / pre >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< p > < / p >
< h1 > Demo< / h1 >
< div id = "demo" > < p >
Tablesorter & Filter: < button type = "button" class = "toggle" > Disable< / button >
Hide Filter Row: < button type = "button" class = "filterRow" > false< / button >
< / p >
Filter any column: < input class = "search" type = "search" data-column = "any" >
< p > Filter < button type = "button" class = "reset" > Reset< / button > (this works even if tablesorter & filter are disabled)< / p >
< table id = "table" class = "tablesorter" >
< thead >
< tr >
< th > Rank< / th >
< th data-value = "e" > First Name< / th >
< th > Last Name< / th >
< th > Age< / th >
< th class = "filter-false" > Total (filter disabled)< / th >
< th class = "sorter-false" > Discount (sort disabled)< / th >
< th > Date< / th >
< / tr >
< / thead >
< tbody >
< tr > < td > 1< / td > < td > Philip Aaron Wong< / td > < td > Johnson Sr Esq< / td > < td > 25< / td > < td > $5.95< / td > < td > 22%< / td > < td > Jun 26, 2004 7:22 AM< / td > < / tr >
< tr > < td > 11< / td > < td > Aaron< / td > < td > Hibert< / td > < td > 12< / td > < td > $2.99< / td > < td > 5%< / td > < td > Aug 21, 2009 12:21 PM< / td > < / tr >
< tr > < td > 12< / td > < td > Brandon Clark< / td > < td > Henry Jr< / td > < td > 51< / td > < td > $42.29< / td > < td > 18%< / td > < td > Oct 13, 2000 1:15 PM< / td > < / tr >
< tr > < td > 111< / td > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > $9.99< / td > < td > 20%< / td > < td > Jul 6, 2006 8:14 AM< / td > < / tr >
< tr > < td > 21< / td > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > $19.99< / td > < td > 25%< / td > < td > Dec 10, 2002 5:14 AM< / td > < / tr >
< tr > < td > 013< / td > < td > Clark< / td > < td > Kent Sr.< / td > < td > 18< / td > < td > $15.89< / td > < td > 44%< / td > < td > Jan 12, 2003 11:14 AM< / td > < / tr >
< tr > < td > 005< / td > < td > Bruce< / td > < td > Almighty Esq< / td > < td > 45< / td > < td > $153.19< / td > < td > 44%< / td > < td > Jan 18, 2021 9:12 AM< / td > < / tr >
< tr > < td > 10< / td > < td > Alex< / td > < td > Dumass< / td > < td > 13< / td > < td > $5.29< / td > < td > 4%< / td > < td > Jan 8, 2012 5:11 PM< / td > < / tr >
< tr > < td > 16< / td > < td > Jim< / td > < td > Franco< / td > < td > 24< / td > < td > $14.19< / td > < td > 14%< / td > < td > Jan 14, 2004 11:23 AM< / td > < / tr >
< tr > < td > 166< / td > < td > Bruce Lee< / td > < td > Evans< / td > < td > 22< / td > < td > $13.19< / td > < td > 11%< / td > < td > Jan 18, 2007 9:12 AM< / td > < / tr >
< tr > < td > 100< / td > < td > Brenda Dexter< / td > < td > McMasters< / td > < td > 18< / td > < td > $55.20< / td > < td > 15%< / td > < td > Feb 12, 2010 7:23 PM< / td > < / tr >
< tr > < td > 55< / td > < td > Dennis< / td > < td > Bronson< / td > < td > 65< / td > < td > $123.00< / td > < td > 32%< / td > < td > Jan 20, 2001 1:12 PM< / td > < / tr >
< tr > < td > 9< / td > < td > Martha< / td > < td > delFuego< / td > < td > 25< / td > < td > $22.09< / td > < td > 17%< / td > < td > Jun 11, 2011 10:55 AM< / td > < / tr >
< / tbody >
< / table > < / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
< pre class = "prettyprint lang-html" > < / pre >
< / div >
< / div >
< / body >
< / html >
