# tablesorter

## Mark Widget

### Flexible client-side table sorting

Back to documentation

### Notes

- Updated v2.27.7, removed internal case matching as mark.js v8.1.1 now has a `caseSensitive` option (set using `mark_caseSensitive` widget option).
- 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.

Option | Default | Description
--- | --- | ---
mark_tsUpdate | "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');
    });
mark_tsIgnore | {} | 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_caseSensitive | false | If `true`, only case sensitive marks are applied.
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.
mark_filter | 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.
mark_noMatch | 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
--- | --- | --- | --- | --- | --- | ---
1 | Philip Aaron Wong | Johnson Sr Esq | 25 | $5.95 | 22% | Jun 26, 2004 7:22 AM
11 | Aáron | Hibert | 12 | $2.99 | 5% | Aug 21, 2009 12:21 PM
12 | Brandon Clark | Henry Jr | 51 | $42.29 | 18% | Oct 13, 2000 1:15 PM
111 | Peter | Párker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM
21 | John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM
013 | Clark | Kènt Sr. | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM
005 | Bruce | Almighty Esq | 45 | $153.19 | 44% | Jan 18, 2021 9:12 AM
10 | Alex | Dumāss | 13 | $5.29 | 4% | Jan 8, 2012 5:11 PM
16 | Jim | Franco | 24 | $14.19 | 14% | Jan 14, 2004 11:23 AM
166 | Brüce Lee | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM
100 | Brenda Dexter | McMasters | 18 | $55.20 | 15% | Feb 12, 2010 7:23 PM
55 | Dennís | Bronson | 65 | $123.00 | 32% | Jan 20, 2001 1:12 PM
9 | Martha | delFuego | 25 | $22.09 | 17% | Jun 11, 2011 10:55 AM

# Demo: Without the Filter Widget

Search/Highlight all columns:

Rank | First Name | Last Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | --- | ---
1 | Philip Aaron Wong | Johnson Sr Esq | 25 | $5.95 | 22% | Jun 26, 2004 7:22 AM
11 | Aáron | Hibert | 12 | $2.99 | 5% | Aug 21, 2009 12:21 PM
12 | Brandon Clark | Henry Jr | 51 | $42.29 | 18% | Oct 13, 2000 1:15 PM
111 | Peter | Párker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM
21 | John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM
013 | Clark | Kènt Sr. | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM
005 | Bruce | Almighty Esq | 45 | $153.19 | 44% | Jan 18, 2021 9:12 AM
10 | Alex | Dumāss | 13 | $5.29 | 4% | Jan 8, 2012 5:11 PM
16 | Jim | Franco | 24 | $14.19 | 14% | Jan 14, 2004 11:23 AM
166 | Brüce Lee | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM
100 | Brenda Dexter | McMasters | 18 | $55.20 | 15% | Feb 12, 2010 7:23 PM
55 | Dennís | Bronson | 65 | $123.00 | 32% | Jan 20, 2001 1:12 PM
9 | Martha | delFuego | 25 | $22.09 | 17% | 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