• Notice! In version v2.17.8, some drastic changes were made to the way variables are passed to the filters. Please check out the "How to add Custom Filter types" section below.
  • This demo was added in v2.17.5, but modification using these instructions works for v2.13.3+; when the filter widget was restructured to allow the adding of custom filter search types.
  • In this demo, two additional search types have been added as an example
    • Start a search from beginning of the content using the ^ designator.
    • Search for a specific ending in the content using the $ designator.
  • Please review the following sections for more details.

Demo

(beginning of word)
(end of word)

First Name
Last Name
City
Age
Total
Discount
Date
AaronJohnson SrAtlanta35$5.9522%Jun 26, 2004 7:22 AM
AaronJohnsonYuma12$2.995%Aug 21, 2009 12:21 PM
ClarkHenry JrTampa51$42.2918%Oct 13, 2000 1:15 PM
DenniHenryNew York28$9.9920%Jul 6, 2006 8:14 AM
JohnHoodBoston33$19.9925%Dec 10, 2002 5:14 AM
ClarkKent SrLos Angeles18$15.8944%Jan 12, 2003 11:14 AM
PeterKent EsqSeattle45$153.1944%Jan 18, 2021 9:12 AM
PeterJohnsMilwaukee13$5.294%Jan 8, 2012 5:11 PM
AaronEvanChicago24$14.1914%Jan 14, 2004 11:23 AM
BruceEvansUpland22$13.1911%Jan 18, 2007 9:12 AM
ClarkMcMastersPheonix18$55.2015%Feb 12, 2010 7:23 PM
DennisMastersIndianapolis65$123.0032%Jan 20, 2001 1:12 PM
JohnHoodFort Worth25$22.0917%Jun 11, 2011 10:55 AM

Javascript

// *** Filter search type function arguments ***
// data.filter = filter input value for a column;
// data.iFilter = same as filter, except lowercase (if wo.filter_ignoreCase is true)
// data.exact = table cell text (or parsed data, if column parser enabled)
// data.iExact = same as exact, except lowercase (if wo.filter_ignoreCase is true)

// search for a match from the beginning of a string
// "^l" matches "lion" but not "koala"
$.tablesorter.filter.types.start = function( config, data ) {
if ( /^\^/.test( data.iFilter ) ) {
return data.iExact.indexOf( data.iFilter.substring(1) ) === 0;
}
return null;
};

// search for a match at the end of a string
// "a$" matches "Llama" but not "aardvark"
$.tablesorter.filter.types.end = function( config, data ) {
if ( /\$$/.test( data.iFilter ) ) {
var filter = data.iFilter,
filterLength = filter.length - 1,
removedSymbol = filter.substring(0, filterLength),
exactLength = data.iExact.length;
return data.iExact.lastIndexOf(removedSymbol) + filterLength === exactLength;
}
return null;
};

$(function() {

$('#filters').tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter'],
widgetOptions: {
filter_reset: '.reset'
}
});

// External search
// buttons set up like this:
// <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
$('button').click(function(){
var $t = $(this),
col = $t.data('filter-column'), // zero-based index
filter = [];

filter[col] = $t.text(); // text to add to filter
$('#filters').trigger('search', [ filter ]);
return false;
});

});

HTML

<button type="button" data-filter-column="1">^h</button> (beginning of word)<br>
<button type="button" data-filter-column="1">s$</button> (end of word)<br>
<button type="button" class="reset">Reset</button><br>

<table id="filters" class="tablesorter">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>City</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>Aaron</td><td>Johnson Sr</td><td>Atlanta</td><td>35</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
<tr><td>Aaron</td><td>Johnson</td><td>Yuma</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
<tr><td>Clark</td><td>Henry Jr</td><td>Tampa</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
<tr><td>Denni</td><td>Henry</td><td>New York</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
<tr><td>John</td><td>Hood</td><td>Boston</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td>Clark</td><td>Kent Sr</td><td>Los Angeles</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td>Peter</td><td>Kent Esq</td><td>Seattle</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
<tr><td>Peter</td><td>Johns</td><td>Milwaukee</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
<tr><td>Aaron</td><td>Evan</td><td>Chicago</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
<tr><td>Bruce</td><td>Evans</td><td>Upland</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
<tr><td>Clark</td><td>McMasters</td><td>Pheonix</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
<tr><td>Dennis</td><td>Masters</td><td>Indianapolis</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
<tr><td>John</td><td>Hood</td><td>Fort Worth</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
</tbody>
</table>

Next up: Custom Filter Widget Search Types (example 2) ››