Tablesorter toggle sort & filter demo
All options included, as well as the uitheme widget
by Mottie
HTML
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<p>Tablesorter & Filter: <button type="button" class="toggle">Disable</button>
Hide Filter Row: <button type="button" class="filterRow">false</button></p>
Filter <button type="button" class="reset">Reset</button> (this works even if tablesorter & filter are disabled)
<p>Filter any column: <input class="search" type="search" data-column="any"></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...
JavaScript
/* Documentation for this tablesorter FORK can be found at
* http://mottie.github.io/tablesorter/docs/
*/
$(function() {
var c,
$table = $('table'),
mode = true, // tablesorter enabled
filterRow = false;
$('.toggle').click(function(){
mode = !mode;
$(this).text( mode ? 'Disable' : 'Enable' );
$table.trigger( mode ? 'enable' : 'disable' );
// if using the pager:
// $table.trigger( ( mode ? 'enable' : 'disable' ) + 'Pager' );
});
$('.filterRow').click(function(){
filterRow = !filterRow;
$table[0].config.widgetOptions.toggleTS_hideFilterRow = filterRow;
$(this).text( '' + filterRow );
});
$table.tablesorter({
theme: 'blue',
widthFixed : true,
widgets: ['zebra', 'filter', 'toggle-ts'],
widgetOptions : {
filter_reset: '.reset',
filter_external: '.search',
filter_columnFilters : true,
toggleTS_hideFilterRow : filterRow
}
});
});
/*! tablesorter enable/disable sort & filter (BETA) - 11/7/2015 (v2.24.4)
* Requires jQuery 1.7+
* by Rob Garrison
*/
;( function( $ ) {
'use strict';
var ts = $.tablesorter,
tst = ts.toggleTS = {
init : function( c, wo ) {
wo.toggleTS_enabled = true; // enabled
wo.toggleTS_areDisabled = {
headers : [],
filters : []
};
c.$table.on('enable.toggleTS disable.toggleTS', function( event ) {
tst.toggle( this.config, this.config.widgetOptions, event.type === 'enable' );
});
},
toggle : function( c, wo, enable ) {
if ( wo.toggleTS_enabled !== enable ) {
wo.toggleTS_enabled = enable;
var indx, $el,
len = c.$headers.length;
// table headers
for ( indx = 0; indx < len; indx++ ) {
$el = c.$headers.eq( indx );
if ( enable && !wo.toggleTS_areDisabled.headers[ indx ] ) {
$el
.removeClass( 'sorter-false' )
.prop( 'sortDisabled', false )
.attr( 'aria-disabled', false );
if ( c.tabIndex ) {
$el.attr( 'tabindex', 0 );
}
} else if ( !enable ) {
if ( $el.hasClass( 'sorter-false'...