Notes

  • Updated v2.27.6
    • The mark widget properly applies after a pager change has occured.
    • Added mark_tsIgnore option as well as support of adding a "mark-ignore" class to the header. These columns will not be highlighted - see Age column below.
    • Included mark.js v8.0.0's new option as mark_acrossElements. This widget does not however apply the search across table cells.
  • 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.

Options

Mark widget defaults (added inside of tablesorter widgetOptions)

The widgetOptions are essentially Mark.js settings with a mark_ prefix. All options are dynamically updated.
TIP! Click on the link in the function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
OptionDefaultDescription
"markUpdate" This option sets the event that can be triggered on the table to update the marks.

Use it as follows: 
$('table').tablesorter({
  widgets: ['mark'],
  widgetOptions: {
    mark_tsUpdate: 'markFu'
  }
});

$('button.update').click(function(){
  // update the marks in the table
  $('table').trigger('markFu');
});
{} This option sets which columns in the table to ignore when searching.

Use it as follows: 
$('table').tablesorter({
  widgets: ['mark'],
  widgetOptions: {
    mark_tsIgnore: {
      // ignore second column (zero-based index)
      1: true
    }
  }
});
You can also add a "mark-ignore" class name to the table header to accomplish the same thing.
Mark.js settings - see official documentation
mark_acrossElements false Set to true to search for matches across elements (added in mark.js v8.0.0).
This option does not apply to content across table cells as this widget targets individual cells while performing an "any" match.
mark_element "mark" HTML element to wrap matches.
mark_className "" A class name added to the element.
mark_exclude [] An array with exclusion selectors. Matches inside these elements will be ignored.
mark_separateWordSearch true Whether to search for each word separated by a blank.
mark_accuracy "partially" Use "partially", "complementary", "exactly" or object - see markjs docs for details.
mark_diacritics true If true, diacritic characters should be matched.
mark_synonyms {} An object with synonyms..
mark_iframes false Whether to search also inside iframes.
mark_each function(element){} A callback for each marked element.
function(parameters){ return true; } A callback to filter or limit matches.

When the mark function is called, the function parameters are: 
function(node, keyword, matches, totalMatches) { return true; }
When the markRegExp function is called, the function parameters are: 
function(node, match, totalMatches) { return true; }

In both cases, a return true is needed to highlight the match.

Note See the notes section above to know when which function is called.
function(keyword){} A callback function that will be called when there are no matches.

When the mark function is called, the keyword parameter is a string.

When the markRegExp function is called, the keyword parameter is the regular expression.

Note See the notes section above to know when which function is called.
mark_done function(totalMatches){} A callback function after all marks are done.
mark_debug false If true, messages will be logged.
mark_log console Log message to this object.

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


	


	
Javascript