• Added v2.27.0 for use with the mark.js plugin.
  • Notable Issues:
    • - Some rows won't be highlighted because the filter finds fuzzy matches across rows, while the mark widget is targeting separate cell content.
    • - Using a regular expression search will not include diacritics; use an " OR " search instead .
      I may fix this in future updates.
    • or - When a regular expression matches everything, the regex is ignored by the mark widget otherwise, mark.js does bad things; but this regex is okay: .
    • or - Operators & ranges are not fully supported (these are not supported at all by the filter widget in an "all" columns match - see the documentation on any match limitations).
    • - There is nothing to highlight for not matches.
  • The mark function is used for the following filter queries:
    • Plain text
    • Logical AND ( and  or  && ) & logical OR ( or  or |) searches.
    • Invalid regex (e.g. /(|)/).
    • Operator, range, exact and not searches.
  • The markRegExp function is used when the filter contains:
    • A "valid" regular expression
    • Fuzzy search (~)
    • Wild card ? or * search
  • Try out the jSFiddle Playground.

Demo: With the Filter Widget


Search/Highlight all columns:
Rank
First Name
Last Name
Age
Total
Discount
Date
1Philip Aaron WongJohnson Sr Esq25$5.9522%Jun 26, 2004 7:22 AM
11AáronHibert12$2.995%Aug 21, 2009 12:21 PM
12Brandon ClarkHenry Jr51$42.2918%Oct 13, 2000 1:15 PM
111PeterPárker28$9.9920%Jul 6, 2006 8:14 AM
21JohnHood33$19.9925%Dec 10, 2002 5:14 AM
013ClarkKènt Sr.18$15.8944%Jan 12, 2003 11:14 AM
005BruceAlmighty Esq45$153.1944%Jan 18, 2021 9:12 AM
10AlexDumāss13$5.294%Jan 8, 2012 5:11 PM
16JimFranco24$14.1914%Jan 14, 2004 11:23 AM
166Brüce LeeEvans22$13.1911%Jan 18, 2007 9:12 AM
100Brenda DexterMcMasters18$55.2015%Feb 12, 2010 7:23 PM
55DennísBronson65$123.0032%Jan 20, 2001 1:12 PM
9MarthadelFuego25$22.0917%Jun 11, 2011 10:55 AM

Demo: Without the Filter Widget


Search/Highlight all columns:
Rank
First Name
Last Name
Age
Total
Discount
Date
1Philip Aaron WongJohnson Sr Esq25$5.9522%Jun 26, 2004 7:22 AM
11AáronHibert12$2.995%Aug 21, 2009 12:21 PM
12Brandon ClarkHenry Jr51$42.2918%Oct 13, 2000 1:15 PM
111PeterPárker28$9.9920%Jul 6, 2006 8:14 AM
21JohnHood33$19.9925%Dec 10, 2002 5:14 AM
013ClarkKènt Sr.18$15.8944%Jan 12, 2003 11:14 AM
005BruceAlmighty Esq45$153.1944%Jan 18, 2021 9:12 AM
10AlexDumāss13$5.294%Jan 8, 2012 5:11 PM
16JimFranco24$14.1914%Jan 14, 2004 11:23 AM
166Brüce LeeEvans22$13.1911%Jan 18, 2007 9:12 AM
100Brenda DexterMcMasters18$55.2015%Feb 12, 2010 7:23 PM
55DennísBronson65$123.0032%Jan 20, 2001 1:12 PM
9MarthadelFuego25$22.0917%Jun 11, 2011 10:55 AM

Page Header

<!-- blue theme stylesheet -->
<link rel="stylesheet" href="css/theme.blue.css">
<!-- tablesorter plugin -->
<script src="js/jquery-latest.min.js"></script>
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>

<!-- jquery.mark.js & tablesorter mark widget loaded after the plugin -->
<script src="js/jquery.mark.js"></script>
<script src="js/widget-mark.js"></script>

CSS

/* Example showing how to change the mark color by column */
tr td:nth-child(1) mark { background: #aa0000; color: #fff; }
tr td:nth-child(2) mark { background: #00aa00; color: #fff; }
tr td:nth-child(3) mark { background: #0000aa; color: #fff; }
tr td:nth-child(4) mark { background: #aaaa00; color: #fff; }
tr td:nth-child(5) mark { background: #00aaaa; color: #fff; }
tr td:nth-child(6) mark { background: #aa00aa; color: #fff; }

Javascript

$(function() {

// ==============================
// WITH filter widget
// ==============================
var $table = $('#table').tablesorter({
theme: 'blue',
widthFixed : true,
// sort & filter diacritics
sortLocaleCompare: true,
widgets: ['zebra', 'filter', 'mark'],
widgetOptions: {
filter_external: 'input[name="keyword"]',
filter_reset: 'button.reset',

// default settings
mark_accuracy: 'partially',
mark_className: '',
mark_debug: false,
mark_diacritics: true,
mark_element: 'mark',
mark_exclude: [],
mark_iframes: false,
mark_log: console,
mark_separateWordSearch: true,
mark_synonyms: {},
// callback functions
mark_done: function(totalMatches) {},
mark_each: function(element) {},
mark_filter: function(node, term, counter, totalCounter) { return true; },
mark_noMatch: function(keyword) {}
}
});

// preset searches for the first table
$('button[data-filter-column]').click(function(){
var filters = [],
$t = $(this),
col = $t.data('filter-column'), // zero-based index, or "all" column
txt = $t.data('filter-text') || $t.text(); // text to add to filter
filters[col === "all" ? $table[0].config.columns : col] = txt;
$.tablesorter.setFilters( $table, filters );
return false;
});

// ==============================
// NO filter widget
// ==============================
var $table2 = $('#table2').tablesorter({
theme: 'blue',
widthFixed : true,
// sort & filter diacritics
sortLocaleCompare: true,
widgets: ['zebra', 'mark'],
widgetOptions : {
// default settings
mark_accuracy: 'partially',
mark_className: '',
mark_debug: false,
mark_diacritics: true,
mark_element: 'mark',
mark_exclude: [],
mark_iframes: false,
mark_log: console,
mark_separateWordSearch: true,
mark_synonyms: {},
// callback functions
mark_done: function(totalMatches) {},
mark_each: function(element) {},
mark_filter: function(node, term, counter, totalCounter) { return true; },
mark_noMatch: function(keyword) {}
}
});

// preset searches on the second table
$('button.table2').click(function(){
// check for reset
var query = $(this).hasClass('reset2') ? '' : this.textContent;
$('#table2-search')
.val(query)
.trigger('input');
});

$('#table2-search').on('input', function() {
var config = $table2[0].config,
filters = [];
// still target the "any" match column
filters[config.columns] = this.value;
// trigger a mark update
$table2.trigger('markUpdate', [filters]);
// or call the function directly
// $.tablesorter.mark.update(config, filters);
});

});