File: example-widget-mark.html

package info (click to toggle)
jquery-tablesorter 1%3A2.31.3%2Bdfsg1-3
links: PTS, VCS
area: main
in suites: bookworm
size: 5,056 kB
sloc: javascript: 19,495; sh: 14; makefile: 8
file content (485 lines) | stat: -rw-r--r-- 21,180 bytes
parent folder | download | duplicates (4)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery tablesorter 2.0 - Mark Widget</title>

	<!-- jQuery -->
	<script src="js/jquery-latest.min.js"></script>

	<!-- Demo stuff -->
	<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
	<script src="js/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="css/jq.css">
	<link href="css/tipsy.css" rel="stylesheet">
	<link href="css/prettify.css" rel="stylesheet">
	<script src="js/prettify.js"></script>
	<script src="js/docs.js"></script>
	<script src="js/jquery.tipsy.min.js"></script>

	<!-- Tablesorter: required -->
	<link rel="stylesheet" href="../css/theme.blue.css">
	<style id="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; } Age column not highlighted */
tr td:nth-child(5) mark { background: #00aaaa; color: #fff; }
tr td:nth-child(6) mark { background: #aa00aa; color: #fff; }

/* column will not be highlighted */
th.tablesorter-header.mark-ignore,
th.tablesorter-header.ignore, .ignore { background-color: #e6bf99; }
</style>
	<script src="../js/jquery.tablesorter.js"></script>
	<script src="../js/widgets/widget-filter.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.1.1/jquery.mark.js"></script>
	<script src="../js/widgets/widget-mark.js"></script>

	<script id="js">$(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',

			// *** mark widget only settings
			mark_tsUpdate : 'markUpdate',
			mark_tsIgnore : {
				// don't highlight the age column
				3: true
			},
			// *** default settings for non-regular expression searches only
			mark_accuracy: 'partially',
			mark_caseSensitive: false,
			mark_diacritics: true,
			mark_separateWordSearch: true,
			mark_synonyms: {},
			// *** settings that apply to regex & non-regular expression searches
			mark_acrossElements: false,
			mark_className: '',
			mark_debug: false,
			mark_element: 'mark',
			mark_exclude: [],
			mark_iframes: false,
			mark_log: console,
			// callback functions
			mark_done: function(totalMatches) {},
			mark_each: function(element) {},
			mark_filter: function(node, term, totalMatches, matches) {
				// "matches" parameter is not defined for regular expression searches
				return true;
			},
			mark_noMatch: function(termNotFound) {}
		}
	});

	// preset searches for the first table
	$('button[data-filter-column]').click(function() {
		var filters = [],
			config = $table[0].config,
			$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" ? config.columns : col] = txt;
		config.widgetOptions.mark_caseSensitive = $t.data('mark-case') || false;
		$.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 : {
			// using mark.js default settings
			mark_tsIgnore : {
				// don't highlight the age column
				// 3: true // done by adding "mark-ignore" class to header
			}
		}
	});

	// preset searches on the second table
	$('button.table2').click(function() {
		// check for reset
		var query = $(this).hasClass('reset2') ? '' : this.textContent;
			config = $table2[0].config;
		config.widgetOptions.mark_caseSensitive = $(this).data('mark-case') || false;
		$('#table2-search')
			.val(query)
			.trigger('input');
	});

	$('#table2-search').on('input', function(event) {
		var config = $table2[0].config,
			filters = [];
		// still target the "any" match column
		filters[config.columns] = this.value;
		// if input was not triggered by a button click, reset caseSensitive
		if (!event.isTrigger) {
			config.widgetOptions.mark_caseSensitive = false;
		}
		// trigger a mark update
		$table2.trigger('markUpdate', [filters]);
		// or call the function directly
		// $.tablesorter.mark.update(config, filters);
	});

	// add tooltip
	$('.tooltip').tipsy({ gravity: 's' });

});</script>

</head>
<body>
<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>Mark Widget</h2>
	<h3>Flexible client-side table sorting</h3>
	<a href="index.html">Back to documentation</a>
</div>
<div id="main">

	<p></p>
	<br>
	<div id="root" class="accordion">

		<h3 id="notes"><a href="#">Notes</a></h3>
		<div>
			<ul>
				<li>Updated <span class="verison">v2.27.7</span>, removed internal case matching as mark.js v8.1.1 now has a <code>caseSensitive</code> option (set using <code>mark_caseSensitive</code> widget option).</li>
				<li>Updated <span class="verison">v2.27.6</span>
					<ul>
						<li>The mark widget properly applies after a pager change has occured.</li>
						<li>Added <code>mark_tsIgnore</code> option as well as support of adding a "mark-ignore" class to the header. These columns will not be highlighted - see <span class="ignore">Age</span> column below.</li>
						<li>Included mark.js v8.0.0's new option as <code>mark_acrossElements</code>. This widget does not however apply the search across table cells.</li>
					</ul>
				</li>
				<li>Added <span class="verison">v2.27.0</span> for use with the <a href="https://markjs.io/">mark.js</a> plugin.</li>
				<li>Notable Issues:
					<ul>
						<li><button class="bad" type="button" data-filter-column="all">~ae</button> - Some rows won't be highlighted because the filter finds fuzzy matches across rows, while the mark widget is targeting separate cell content.</li>
						<li><button type="button" data-filter-column="all">/(aaron|bruce)/i</button> - Using a regular expression search will not include diacritics; use an " OR " search instead <button type="button" data-filter-column="all">aaron|bruce</button>.<br>
						I may fix this in future updates.
						</li>
						<li><button class="bad" type="button" data-filter-column="all">/.*/</button> or <button class="bad" type="button" data-filter-column="all">/(|)/</button> - When a regular expression matches everything, the regex is ignored by the mark widget otherwise, <a href="https://github.com/julmot/mark.js/issues/55">mark.js does bad things</a>; but this regex is okay: <button type="button" data-filter-column="all">/.+/</button>.</li>
						<li><button class="bad" type="button" data-filter-column="3">&lt;=22</button> or <button class="bad" type="button" data-filter-column="5">10 - 20</button> - Operators &amp; ranges are not fully supported (these are not supported at all by the filter widget in an "all" columns match - see the documentation on <a href="example-widget-filter-any-match.html#limitations">any match limitations</a>).</li>
						<li><button class="bad" type="button" data-filter-column="all">!aaron</button> - There is nothing to highlight for not matches.</li>
					</ul>
				</li>
				<li>The <a href="https://markjs.io/#mark"><code>mark</code> function</a> is used for the following filter queries:
					<ul>
						<li>Plain text</li>
						<li>Logical AND (<code>&nbsp;and&nbsp;</code> or <code>&nbsp;&amp;&amp;&nbsp;</code>) &amp; logical OR (<code>&nbsp;or&nbsp;</code> or <code>|</code>) searches.</li>
						<li>Invalid regex (e.g. <code>/(|)/</code>).</li>
						<li>Operator, range, exact and not searches.</li>
					</ul>
				</li>
				<li>The <a href="https://markjs.io/#markregexp"><code>markRegExp</code> function</a> is used when the filter contains:
					<ul>
						<li>A "valid" regular expression</li>
						<li>Fuzzy search (<code>~</code>)</li>
						<li>Wild card <code>?</code> or <code>*</code> search</li>
					</ul>
				</li>

				<li>Try out the <a href="http://jsfiddle.net/Mottie/odyfw8Lj/">jSFiddle Playground</a>.</li>
			</ul>
		</div>

		<h3><a href="#">Options</a></h3>
		<div>
			<h4>Mark widget defaults (added inside of tablesorter <code>widgetOptions</code>)</h4>
			<h5>The widgetOptions are essentially Mark.js settings with a <code>mark_</code> prefix. All options are dynamically updated.</h5>
			<div>
				<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
			</div>
			<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
				<thead>
					<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
				</thead>
				<tbody>

					<tr id="mark-tsupdateclass">
						<td><a href="#" class="permalink">mark_tsUpdate</a></td>
						<td>"markUpdate"</td>
						<td>This option sets the event that can be triggered on the table to update the marks.
							<div class="collapsible">
							<br>
								Use it as follows:
								<pre class="prettyprint lang-js">$('table').tablesorter({
  widgets: ['mark'],
  widgetOptions: {
    mark_tsUpdate: 'markFu'
  }
});

$('button.update').click(function() {
  // update the marks in the table
  $('table').trigger('markFu');
});</pre>
						</div>
						</td>
					</tr>

					<tr id="mark-tsignore">
						<td><a href="#" class="permalink">mark_tsIgnore</a></td>
						<td>{}</td>
						<td>This option sets which columns in the table to ignore when searching.
							<div class="collapsible">
							<br>
								Use it as follows:
								<pre class="prettyprint lang-js">$('table').tablesorter({
  widgets: ['mark'],
  widgetOptions: {
    mark_tsIgnore: {
      // ignore second column (zero-based index)
      1: true
    }
  }
});</pre>
							You can also add a <code>"mark-ignore"</code> class name to the table header to accomplish the same thing.
						</div>
						</td>
					</tr>

				</tbody>
				<tbody class="tablesorter-infoOnly">
					<tr>
						<th colspan="3">Mark.js settings - see <a href="https://markjs.io/#api">official documentation</a></th>
					</tr>
				</tbody>

				<tbody>
					<tr id="mark-acrossElements">
						<td><span class="permalink">mark_acrossElements</span></td>
						<td>false</td>
						<td>
							Set to <code>true</code> to search for matches across elements (added in mark.js v8.0.0).<br>
							This option does not apply to content across table cells as this widget targets individual cells while
							performing an "any" match.
						</td>
					</tr>
					<tr id="mark-element">
						<td><span class="permalink">mark_element</span></td>
						<td>"mark"</td>
						<td>HTML element to wrap matches.</td>
					</tr>
					<tr id="mark-classname">
						<td><span class="permalink">mark_className</span></td>
						<td>""</td>
						<td>A class name added to the element.</td>
					</tr>
					<tr id="mark-exclude">
						<td><span class="permalink">mark_exclude</span></td>
						<td>[]</td>
						<td>An array with exclusion selectors. Matches inside these elements will be ignored.</td>
					</tr>
					<tr id="mark-separatewordsearch">
						<td><span class="permalink">mark_separateWordSearch</span></td>
						<td>true</td>
						<td>Whether to search for each word separated by a blank.</td>
					</tr>
					<tr id="mark-accuracy">
						<td><span class="permalink">mark_accuracy</span></td>
						<td>"partially"</td>
						<td>Use "partially", "complementary", "exactly" or object - see markjs docs for details.</td>
					</tr>
					<tr id="mark-casesensitive">
						<td><span class="permalink">mark_caseSensitive</span></td>
						<td>false</td>
						<td>If <code>true</code>, only case sensitive marks are applied.</td>
					</tr>
					<tr id="mark-diacritics">
						<td><span class="permalink">mark_diacritics</span></td>
						<td>true</td>
						<td>If <code>true</code>, diacritic characters should be matched.</td>
					</tr>
					<tr id="mark-synonyms">
						<td><span class="permalink">mark_synonyms</span></td>
						<td>{}</td>
						<td>An object with synonyms..</td>
					</tr>
					<tr id="mark-iframes">
						<td><span class="permalink">mark_iframes</span></td>
						<td>false</td>
						<td>Whether to search also inside iframes.</td>
					</tr>
					<tr id="mark-each">
						<td><span class="permalink">mark_each</span></td>
						<td>function(element) {}</td>
						<td>A callback for each marked element.</td>
					</tr>
					<tr id="mark-filter">
						<td><a href="#" class="permalink">mark_filter</a></td>
						<td>function(parameters) { return true; }</td>
						<td>A callback to filter or limit matches.
							<div class="collapsible">
								<br>
								When the <code>mark</code> function is called, the function parameters are:
								<pre class="prettyprint lang-js">function(node, keyword, matches, totalMatches) { return true; }</pre>
								When the <code>markRegExp</code> function is called, the function parameters are:
								<pre class="prettyprint lang-js">function(node, match, totalMatches) { return true; }</pre>
								<p>In both cases, a <code>return true</code> is needed to highlight the match.</p>
								<span class="label label-info">Note</span> See the notes section above to know when which function is called.
							</div>
						</td>
					</tr>
					<tr id="mark-nomatch">
						<td><a href="#" class="permalink">mark_noMatch</a></td>
						<td>function(keyword) {}</td>
						<td>A callback function that will be called when there are no matches.
							<div class="collapsible">
								<br>
								When the <code>mark</code> function is called, the keyword parameter is a string.
								<p>When the <code>markRegExp</code> function is called, the keyword parameter is the regular expression.</p>
								<span class="label label-info">Note</span> See the notes section above to know when which function is called.
							</div>
						</td>
					</tr>
					<tr id="mark-done">
						<td><span class="permalink">mark_done</span></td>
						<td>function(totalMatches) {}</td>
						<td>A callback function after all marks are done.</td>
					</tr>
					<tr id="mark-debug">
						<td><span class="permalink">mark_debug</span></td>
						<td>false</td>
						<td>If <code>true</code>, messages will be logged.</td>
					</tr>
					<tr id="mark-log">
						<td><span class="permalink">mark_log</span></td>
						<td>console</td>
						<td>Log message to this object.</td>
					</tr>
				</tbody>
			</table>
		</div>

	</div>
	<p></p>

	<h1>Demo: With the Filter Widget</h1>
	<br>
	Search/Highlight all columns: <input type="text" name="keyword" data-column="all">
	<button type="button" class="reset">Reset</button>
	<button type="button" data-filter-column="all">13</button>
	<button class="bad" type="button" data-filter-column="all" title="See &quot;Notes&quot; on why the second row isn't highlighted">~ee</button>
	<button type="button" data-filter-column="all">br?n</button>
	<button type="button" data-filter-column="all">br*n</button>
	<button type="button" data-filter-column="all">aaron &amp;&amp; 2</button>
	<button type="button" data-filter-column="all">aaron|bruce</button>
	<button type="button" class="sens tooltip" title="Case Sensitive Mark" data-filter-column="all" data-mark-case="true">aaron|Bruce</button>
	<table id="table" class="tablesorter">
		<thead>
			<tr>
				<th>Rank</th>
				<th class="filter-match">First Name</th>
				<th>Last Name</th>
				<th class="ignore" title="no highlighting">Age</th>
				<th>Total</th>
				<th>Discount</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>Aáron</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>Párker</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>Kènt 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>Dumāss</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 14, 2004 11:23 AM</td></tr>
			<tr><td>166</td><td>Brüce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
			<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
			<tr><td>55</td><td>Dennís</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
			<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
		</tbody>
	</table>

	<h1>Demo: Without the Filter Widget</h1>
	<br>
	Search/Highlight all columns: <input id="table2-search" type="search">
	<button class="table2 reset2" type="button">Reset</button>
	<button class="table2" type="button">13</button>
	<button class="table2 bad" type="button" title="See &quot;Notes&quot; on why the &quot;005 Bruce Almighty&quot; row isn't highlighted">~ee</button>
	<button class="table2" type="button">br?n</button>
	<button class="table2" type="button">br*n</button>
	<button class="table2" type="button">aaron &amp;&amp; 2</button>
	<button class="table2" type="button">aaron|bruce</button>
	<button class="table2 sens tooltip" type="button" title="Case Sensitive Mark" data-filter-column="all" data-mark-case="true">aaron|Bruce</button>

	<table id="table2" class="tablesorter">
		<thead>
			<tr>
				<th>Rank</th>
				<th class="filter-match">First Name</th>
				<th>Last Name</th>
				<th class="mark-ignore" title="no highlighting">Age</th>
				<th>Total</th>
				<th>Discount</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>Aáron</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>Párker</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>Kènt 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>Dumāss</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 14, 2004 11:23 AM</td></tr>
			<tr><td>166</td><td>Brüce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
			<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
			<tr><td>55</td><td>Dennís</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
			<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
		</tbody>
	</table>

	<h1>Page Header</h1>
	<div>
		<pre class="prettyprint lang-html">&lt;!-- blue theme stylesheet --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/theme.blue.css&quot;&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;script src=&quot;js/jquery-latest.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;

&lt;!-- jquery.mark.js & tablesorter mark widget loaded after the plugin --&gt;
&lt;script src=&quot;js/jquery.mark.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/widget-mark.js&quot;&gt;&lt;/script&gt;</pre>
	</div>

	<h1>CSS</h1>
	<div id="css">
		<pre class="prettyprint lang-css"></pre>
	</div>

	<h1>Javascript</h1>
	<div id="javascript">
		<pre class="prettyprint lang-javascript"></pre>
	</div>

</div>

</body>
</html>