File: example-widget-math.html

package info (click to toggle)
jquery-tablesorter 1%3A2.31.3%2Bdfsg1-1
links: PTS, VCS
area: main
in suites: bullseye
size: 5,024 kB
sloc: javascript: 19,496; sh: 14; makefile: 8
file content (864 lines) | stat: -rw-r--r-- 44,712 bytes
parent folder | download | duplicates (3)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery tablesorter 2.0 - Math 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/prettify.css" rel="stylesheet">
	<script src="js/prettify.js"></script>
	<script src="js/docs.js"></script>

	<!-- Tablesorter: required -->
	<link rel="stylesheet" href="../css/theme.blue.css">
	<script src="../js/jquery.tablesorter.js"></script>
	<script src="../js/widgets/widget-filter.js"></script>

	<script src="../js/widgets/widget-math.js"></script>

	<style>
	#table2 th:nth-child(1) { width: 300px; }
	.source { width: 550px; height: 250px; position: relative; float: left; margin-bottom: 5px; }
	.resultz { width: 550px; height: 250px; position: relative; top: 0; float: left; margin: 0 0 0 10px; overflow-y: auto; padding: 5px 10px; font-size: 13px; }
	.red { color: red; }
	.blue { color: #0080ff; }
	.prefix, .suffix { width: 300px; }
	</style>
	<style id="css">/* make all calculated values bold */
.tablesorter tbody td[data-math] {
	font-weight: bold;
}
/* darken first & last column */
.tablesorter tbody th,
.tablesorter tbody tr td.totals {
	font-family: 'trebuchet ms', verdana, arial;
	font-size: 13px;
	font-weight: normal;
	background-color: #ddd;
	text-shadow: none;
}
/* even darker tbody info row & tfoot */
.tablesorter tbody.tablesorter-infoOnly th,
.tablesorter tfoot th,
.tablesorter tfoot th.tablesorter-headerAsc,
.tablesorter tfoot th.tablesorter-headerDesc {
	background-color: #aaa;
	font-family: 'trebuchet ms', verdana, arial;
	font-size: 13px;
	font-weight: bold;
	background-color: #aaa;
	text-shadow: none;
}
/* align decimals in Grand Total column */
.align-decimal {
	width: 100px;
	display: inline-block;
	text-align: right;
}
</style>

	<script>
	var process = function () {
		var results = [],
			table = $('#table1')[0],
			num = $('.value').val(),
			prefix = $('.prefix').val(),
			suffix = $('.suffix').val(),
			vals = $('.source').val().split(/\n/g);
		$.each(vals, function (i, v) {
			results.push( v ? $.tablesorter.formatMask(v, num, prefix, suffix) : '' );
		});
		$('.resultz').html(results.join('<br>'));
	};

	$(function() {
		$('button').click(function () {
			process();
		});
		process();
	});
	</script>

	<script id="js">$(function() {

	// * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	// Demo #1 - Basic Functionality
	// * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
	$('#table1').tablesorter({
		theme: 'blue',
		delayInit: true,
		widgets: ['zebra', 'filter', 'math'],
		widgetOptions: {
			math_data     : 'math', // data-math attribute
			math_ignore   : [0, 1],
			math_none     : 'N/A', // no matching math elements found (text added to cell)
			math_complete : function($cell, wo, result, value, arry) {
				var txt = '<span class="align-decimal">' +
					( value === wo.math_none ? '' : '$ ' ) +
					result + '</span>';
				if ($cell.attr('data-math') === 'all-sum') {
					// when the "all-sum" is processed, add a count to the end
					return txt + ' (Sum of ' + arry.length + ' cells)';
				}
				return txt;
			},
			math_completed : function(c) {
				// c = table.config
				// called after all math calculations have completed
				console.log( 'math calculations complete', c.$table.find('[data-math="all-sum"]:first').text() );
			},
			// cell data-attribute containing the math value to use (added v2.31.1)
			math_textAttr : '',
			// see "Mask Examples" section
			math_mask     : '#,##0.00',
			math_prefix   : '', // custom string added before the math_mask value (usually HTML)
			math_suffix   : '', // custom string added after the math_mask value
			// event triggered on the table which makes the math widget update all data-math cells (default shown)
			math_event    : 'recalculate',
			// math calculation priorities (default shown)... rows are first, then column above/below,
			// then entire column, and lastly "all" which is not included because it should always be last
			math_priority : [ 'row', 'above', 'below', 'col' ],
			// set row filter to limit which table rows are included in the calculation (v2.25.0)
			// e.g. math_rowFilter : ':visible:not(.filtered)' (default behavior when math_rowFilter isn't set)
			// or math_rowFilter : ':visible'; default is an empty string
			math_rowFilter : ''
		}
	});

	// * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	// Demo #2 - Default & Custom equations
	// * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	// adding a custom equation... named "custom"
	// access from data-math="row-custom" (or "above-custom", "below-custom", or "col-custom")
	$.tablesorter.equations['custom'] = function(arry) {
		// (a+b+c)*d - (e/f)*100
		return (arry[0] + arry[1] + arry[2]) * arry[3] - (arry[4]/arry[5]) * 100;
	};

	// adding a custom equation... named "product"
	// access from data-math="row-product" (or "above-product", "below-product", or "col-product")
	$.tablesorter.equations['product'] = function(arry) {
		// multiple all array values together
		var product = 1;
		$.each(arry, function(i,v) {
			// oops, we shouldn't have any zero values in the array
			if (v !== 0) {
				product *= v;
			}
		});
		return product;
	};

	// Add expected results to the cell
	var resultIndex = 0,
		expectedResults = [ 6, 100, 60, 5, 20, 4, 2, "1 & 2", 8, 2.25, 1.5, 2.7, 1.64, 150, 1200 ],
		resultLen = expectedResults.length;

	$('#table2').tablesorter({
		theme: 'blue',
		delayInit: true,
		widgets: ['zebra', 'math'],
		widgetOptions: {
			math_data     : 'math', // data-math attribute
			math_ignore   : [0],
			math_mask     : '#,##0.##',
			math_complete : function($cell, wo, result) {
				var txt = result + ' (<span class="results">' + expectedResults[resultIndex++ % resultLen] + '</span>)';
				// mode will return an array if there is a tie
				return $.isArray(result) ? 'Tie: ' + txt : txt;
			}
		}
	});

});</script>
</head>
<body>

<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>Math 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><a href="#">Notes</a></h3>
		<div>
		<ul>
			<li>In <span class="version">v2.31.2</span>, added the missing ability to <a href="#attribute_settings" class="intlink">ignore cells</a>; which was already documented, but actually missing. See <a href="https://github.com/Mottie/tablesorter/issues/1526">issue #1526</a>.</li>
			<li>In <span class="version">v2.31.1</span>, added <a href="#math_textattr" class="intlink"><code>math_textAttr</code></a>.</li>
			<li>In <span class="version">v2.28.0</span>
				<ul>
					<li>Fix documentation and processing of <code>math_prefix</code> and <code>math_suffix</code> options. See <a href="https://github.com/Mottie/tablesorter/issues/1305">issue #1305</a>.</li>
					<li>Remove <code>math_prefix</code> content prior to parsing table cell values.</li>
					<li>Added "Methods" section & more mask examples.</li>
				</ul>
			</li>
			<li>In <span class="version">v2.27.0</span>
				<ul>
					<li>Added check for <code>data-math-target</code> attribute which allows you to target an element inside the table cell. See the <a href="#attribute_settings">Attribute Settings</a> &gt; <strong>Targeting cell content</strong> section below.</li>
					<li>Added a <code>math_debug</code> option which when <code>true</code>, enables debug logging of only the math widget.</li>
					<li>The math widget no longer uses "update" after recalculating cell values. Instead it uses "updateCache" to remove the need to resort and update the other widgets.</li>
				</ul>
			</li>
			<li>In <span class="version">v2.25.0</span>
				<ul>
					<li><code>math_rowFilter</code> can now be overridden by the row's <code>data-math-filter</code> attribute.</li>
					<li>
						Lots of optimizations!
						<ul>
							<li>On initialization, only tbody cells with a <code>rowspan</code> or <code>colspan</code> are now processed and only get a "data-column" set if the internal <code>cellIndex</code> doesn't match the calculated cell index.</li>
							<li>Initial calculation is no longer performed three times in a row</li>
							<li>The cache is now only updated if cell content inside of a sortable tbody was modified.</li>
							<li>These changes should improve performance and reduce lag after initialization and updating the table (see <a href="https://github.com/Mottie/tablesorter/issues/1048">issue #1048</a>.</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>

		<div class="accordion start-closed">
			<h3 id="old-notes"><a href="#">Older Notes</a></h3>
			<div>
				<ul>
					<li>In <span class="version">v2.24.6</span>, added <code>math_rowFilter</code> option.</li>
					<li>In <span class="version">v2.24.0</span>
						<ul>
							<li>Added "below" type of data-gathering (see <a href="#attribute_settings">Attribute Settings</a> below for more info). See <a href="https://github.com/Mottie/tablesorter/pull/1027">pull #873</a>; thanks to <a href="https://github.com/LvLynx">LvLynx</a>!.</li>
							<li>Added <code>math_none</code> option which allows customizing the text added to a cell when there are no matching math elements (.</li>
						</ul>
					</li>
					<li>In <span class="version updated">v2.22.0</span>,
						<ul>
							<li>Fixed an issue with a sum column encountering a cell without a defined "data-math" attribute returning an empty string instead of zero. See <a href="https://github.com/Mottie/tablesorter/issues/873">issue #873</a>.</li>
							<li>Fixed a javascript error occurring on empty tables & now all updates will reapply column indexing to tbody cells - I know this isn't ideal as it would be slow on larger tables.</li>
						</ul>
					</li>
					<li>In <span class="version">v2.19.1</span>, added <code>math_event</code> option &amp; fixed an issue with event unbinding in jQuery version &lt; 1.9.</li>
					<li>In <span class="version">v2.17.1</span>,
						<ul>
							<li>Values added to the data-attribute set by the <a href="../#textattribute"><code>textAttribute</code> option</a> will now be used in the calculation instead of the actual cell content.</li>
							<li>The Grand Total cells now shows a higher precision value to emphasize this point.</li>
						</ul>
					</li>
					<li>In <span class="version">v2.16.4</span>, added:
						<ul>
							<li>Two new options: <code>math_prefix</code> and <code>math_suffix</code>, which will be added before or after the prefix or suffix, respectively.</li>
							<li>Added "Mask Examples" section with examples, and how to use the <code>$.tablesorter.formatMask</code> function.</li>
						</ul>
					</li>
					<li>Added math widget in v2.16.0-beta</li>
				</ul>
			</div>
		</div>

		<ul>
			<li>This widget will <strong>only work</strong> in tablesorter version 2.16+ and jQuery version 1.7+.</li>
			<li>It adds basic math capabilities. A full list of default formulas is listed in the "Attribute Settings" section.</li>
			<li>Add your own custom formulas which manipulating an array of values gathered from the table by row, column or a column block (above).</li>
			<li>This is by no means a comprehensive widget that performs like a spreadsheet, but you can customize the data gathering "type" and available "formula", as desired.</li>
			<li>The widget will update the calculations based on filtered rows, and will update if any data within the table changes (using update events).</li>
			<li>This widget is not optimized for very large tables, for two reasons:
				<ul>
					<li>On initialization, it cycles through every table row, calculates the column index <del>, and adds a <code>data-column</code> attribute</del> (Fixed in <span class="version updated">v2.25.0</span>).</li>
					<li>It uses the update method whenever it recalculates values to make the results sortable. This occurs when any of the update methods are used and after the table is filtered.</li>
				</ul>
			</li>
			<li>When setting tablesorter's <code>debug</code> option to <code>true</code>, this widget will output each <code>{type}-{formula}</code> value found, the array of numbers used and the result.</li>
		</ul>
		</div>

		<h3><a href="#">Options</a></h3>
		<div>
			<h3>Math widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
			<div class="tip">
				<span class="label label-info">TIP!</span> Click on the link in the option 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="tablesorter-blue options">
				<thead>
					<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
				</thead>
				<tbody>

					<tr id="math_data">
						<td><span class="permalink">math_data</span></td>
						<td><code>'math'</code></td>
						<td>
							Set this option to point to the named data-attribute. For example, when set to <code>'math'</code>, the widget looks for settings within the <code>data-math</code> attribute.
						</td>
					</tr>

					<tr id="math_debug">
						<td><span class="permalink">math_debug</span></td>
						<td><code>false</code></td>
						<td>
							Set this option to <code>true</code> to enable the debug log of the math widget without all the extra noise from the overall <a href="index.html#debug"><code>debug</code></a> option (<span class="version">v2.27.0</span>).
						</td>
					</tr>


					<tr id="math_textattr">
						<td><a href="#" class="permalink">math_textAttr</a></td>
						<td><code>''</code></td>
						<td>
							Cell attribute (data-attribute) containing the math value to use. This defaults to the <a href="index.html#textattribute"><code>textAttribute</code></a> value when the <a href="index.html#textextraction"><code>textExtraction</code></a> option is set to "basic" (<span class="version">v2.31.1</span>).
							<div class="collapsible">
							<br>
							Use this option as follows:
							<pre class="prettyprint lang-js">// Include the "data-" prefix in the option
math_textAttr : 'data-math-value'</pre>
							<pre class="prettyprint lang-html">&lt;td data-math-value="1000"&gt;1.0k&lt;/td&gt;</pre>
							</div>
						</td>
					</tr>

					<tr id="math_event">
						<td><a href="#" class="permalink">math_event</a></td>
						<td><code>'recalculate'</code></td>
						<td>
							Set this option change the name of the event that the widget listens for to perform an update.
							<div class="collapsible">
								<p>By default, recalculations are performed after:</p>
									<ul>
										<li>Tablesorter initialization.</li>
										<li>After any call to a tablesorter method which updates the internal cache (e.g. "update", "updateCell", etc). The math widget listens for the <a href="index.html#updatecomplete">updateComplete</a> event, which occurs after the internal cache has completed updating, before recalculating values.</li>
										<li>After a "filterReset".</li>
										<li>And after a "filterEnd" event, <em>or</em> a "pagerComplete" event (if the pager is being used), but not both!</li>
									</ul>
							</div>
						</td>
					</tr>

					<tr id="math_ignore">
						<td><a href="#" class="permalink">math_ignore</a></td>
						<td><code>[ ]</code></td>
						<td>
							Set this option the column index of columns of data to ignore.
							<div class="collapsible">
							<br>
							To ignore the first and second columns in a table, set this option using zero-based column indexs as follows:
							<pre class="prettyprint lang-js">// column index(es) to ignore
math_ignore : [0,1]</pre>
							</div>
						</td>
					</tr>

					<tr id="math_none">
						<td><a href="#" class="permalink">math_none</a></td>
						<td><code>'N/A'</code></td>
						<td>
							This option contains the text added to a math cell when no matching elements are found (<span class="version">v2.24.0</span>; <span class="version updated">v2.25.0</span>).
							<div class="collapsible">
							<p>In <span class="version updated">v2.25.0</span>, this option can now be set to an empty string.</p>
							<p>To understand when this text is used, select a Region in the "Row & Column Sums" table below. The totals for hidden rows will display this text.</p>
							<p>Use it as follows:</p>
							<pre class="prettyprint lang-js">math_none : 'N/A',
math_complete : function($cell, wo, result, value, arry) {
  // don't include currency symbol when no result is available
  return value === wo.math_none ? value : '$ ' + value;
}</pre>
							</div>
						</td>
					</tr>

					<tr id="math_mask">
						<td><a href="#" class="permalink">math_mask</a></td>
						<td><code>'#,##0.00'</code></td>
						<td>
							Set this option with an output formatting mask to use <span class="xsmall results">&dagger;</span>
							<div class="collapsible">
							<p>As of <span class="version">v2.16.2</span>, you can set a mask for each math cell by adding a <code>data-math-mask</code> data-attribute (the <code>math</code> part of the data-attribute is named from the <code>math_data</code> setting).</p>
							<pre class="prettyprint lang-html">&lt;th data-math=&quot;all-sum&quot; data-math-mask=&quot;##0.00&quot;&gt;all-sum&lt;/th&gt;</pre>
							<hr>
							<h3>Javascript-number-formatter details</h3>
							<h3>Features</h3>
							<ul>
								<li>Short, fast, flexible yet standalone. Only 75 lines including MIT license info, blank lines & comments.</li>
								<li>Accept standard number formatting like <code>#,##0.00</code> or with negation <code>-000.####</code>.</li>
								<li>Accept any country format like <code># ##0,00</code>, <code>#,###.##</code>, <code>#'###.##</code> or any type of non-numbering symbol.</li>
								<li>Accept any numbers of digit grouping. <code>#,##,#0.000</code> or <code>#,###0.##</code> are all valid.</li>
								<li>Accept any redundant/fool-proof formatting. <code>##,###,##.#</code> or <code>0#,#00#.###0#</code> are all OK.</li>
								<li>Auto number rounding.</li>
								<li>Include a prefix & suffix with the mask</li>
								<li>Simple interface, just supply mask & value like this: <code>$.tablesorter.formatMask( "0.0000", 3.141592, "prefix ", " suffix" );</code>
									<pre class="prettyprint lang-js">$.tablesorter.formatMask( "$ 0.0000 USD", 1234.567, "prefix ", " suffix" );
// prefix $ 1234.5670 USD suffix</pre>
								</li>
							</ul>
							<h3>Limitation</h3>
							<ul>
								<li>No scientific/engineering formatting.</li>
								<li>Not for date or phone formation.</li>
								<li>No color control.</li>
								<li><del>No prefix or suffix is allowed except leading negation symbol. So <code>$#,##0.00</code> or <code>#,###.##USD</code> will not yield expected outcome. Use <code>'$'+ $.tablesorter.formatMask('#,##0.00', 123.45)</code> or <code>$.tablesorter.formatMask('#,##0.00', 456.789) + 'USD'</code></del></li>
								<li>The prefix or suffix can not include any numbers (<code>0-9</code>), hashes (<code>#</code>), dashes (<code>-</code>), or plus signs (<code>+</code>)</li>
							</ul>
							<h3>Note</h3>
							<ul>
								<li>The difference between using <code>#</code> and <code>0</code> in the mask, is that when a value of zero is passed to the function, the <code>#</code> mask will return an empty string whereas the <code>0</code> mask will return a zero.</li>
								<li>When there's only one symbol is supplied, system will always treat the single symbol as Decimal. For instance, <code>$.tablesorter.formatMask( '#,###', 1234567.890)</code> will output <code>1234567,890</code>.</li>
								<li>To force a single symbol as Separator, add a trailing dot to the end like this: <code>$.tablesorter.formatMask( '#,###.', 1234567.890)</code> which will then output <code>1,234,567</code>.</li>
								<li><a href="http://www.integraxor.com/developer/codes/js-formatter/format-sample.htm">Original plugin demo</a></li>
							</ul>
							<span class="remark">&dagger;</span> The number formatter code was copied from <a href="https://code.google.com/p/javascript-number-formatter/">javascript-number-formatter</a> (<a href="http://opensource.org/licenses/mit-license.php">MIT</a>) - now forked on <a href="https://github.com/Mottie/javascript-number-formatter">GitHub</a> (<a href="https://mottie.github.io/javascript-number-formatter/">updated demo</a>).
							</div>
						</td>
					</tr>

					<tr id="math_complete">
						<td><a href="#" class="permalink">math_complete</a></td>
						<td><code>null</code></td>
						<td>
							This function is called after each calculation is made to allow re-formatting, adding prefixes, suffixes, etc to the result.
							<div class="collapsible">
							<br>
							Use this option as follows:
							<pre class="prettyprint lang-js">// complete executed after each function
math_complete : function($cell, wo, result, value, arry) {
    return '$ ' + result + $cell.attr('data-suffix');
}</pre>
							<ul>
								<li><code>$cell</code> - the target cell (jQuery object)</li>
								<li><code>wo</code> - tablesorter's widget options (from <code>table.config.widgetOptions</code>).</li>
								<li><code>result</code> - the formatted result of the calculation.</li>
								<li><code>value</code> - an unformatted result of the calculation.</li>
								<li><code>arry</code> - the array of values gathered by the widget.</li>
							</ul>
							In this function, if a anything is returned, it will be automatically added to the <code>$cell</code> as html. Or, return <code>false</code> and no change is made to the cell contents; use this method if you manipulate the <code>$cell</code> contents and don't want the widget to do it.<br>
							<br>
							If you need to format the data output after manipulating the <code>value</code>, you can use <code>wo.math_mask</code>, or a different mask, by using the <code>$.tablesorter.formatMask( mask, value );</code> function. For example:
							<pre class="prettyprint lang-js">math_complete : function($cell, wo, result, value, arry) {
    var percent = Math.round( value * 1e4 ) / 100; // percent with two decimal places
    return $.tablesorter.formatMask( wo.math_mask, percent ) + ' %';
}</pre>
							More details can be found in the <code>math_mask</code> description.
							</div>
						</td>
					</tr>

					<tr id="math_completed">
						<td><a href="#" class="permalink">math_completed</a></td>
						<td><code>null</code></td>
						<td>
							This function is called after all math recalculations have completed.
							<div class="collapsible">
							<br>
							Use this option as follows:
							<pre class="prettyprint lang-js">// complete executed after each function
math_completed : function(config) {
    var total = config.$table.find('[data-math="all-sum"]:last').text();
    console.log(total);
}</pre>
							</div>
						</td>
					</tr>

					<tr id="math_priority">
						<td><a href="#" class="permalink">math_priority</a></td>
						<td><code>[ 'row', 'above', 'below', 'col' ]</code></td>
						<td>
							This is the order of calculations (<span class="version updated">v2.24.0</span>).
							<div class="collapsible">
							<ul>
								<li>By default, the widget cycles through the calculated cells as follows:
									<ul>
										<li>Search all non-informational tbodies for <code>data-math</code> table cells (data-attribute set by <code>math_data</code> option).</li>
										<li>Cycle through these cells by priority: row, above, col (set by this option).</li>
										<li>Search all informational tbodies, and <code>tfoot</code> for <code>data-math</code> table cells.</li>
										<li>Cycle through these cells by priority: row, above, col (set by this option).</li>
										<li>Search the entire table for <code>data-math</code> cells of the "all" type.</li>
									</ul>
								</li>
								<li>So, all row calculations are made first, followed by "above" calculations then "col" (column) calculations.</li>
								<li>The "all" type calculations are always performed last, and therefore the type is not included in this list.</li>
								<li>Change this order if the order of calculations needs to be made column first, followed by rows.</li>
								<li>For more details about the differences between "col" and "above" types, see the "Attribute Settings" section.</li>
							</ul>
							</div>
						</td>
					</tr>

					<tr id="math_prefix">
						<td><a href="#" class="permalink">math_prefix</a></td>
						<td><code>''</code></td>
						<td>
							Add content before the value formatted by the <code>math_mask</code> option (<span class="version">v2.16.4</span>).
							<div class="collapsible">
							<ul>
								<li>This option adds content before the mask.</li>
								<li>If the mask includes any content for the prefix, then this value is added before it.</li>
								<li>If this option contains a <code>{content}</code> tag, the prefix within the mask will replace this tag.
									<pre class="prettyprint lang-js">math_mask   : '$ #,##0.00',
math_prefix : '<span class="blue">{content}</span>'

// result of the value 12345.67
// &lt;span class="blue"&gt;$ &lt;/span&gt;12,345.67</pre>
									You can experiment with this option in the "Mask Examples" section.
								</li>
							</ul>
							</div>
						</td>
					</tr>

					<tr id="math_suffix">
						<td><a href="#" class="permalink">math_suffix</a></td>
						<td><code>''</code></td>
						<td>
							Add content after the value formatted by the <code>math_mask</code> option (<span class="version">v2.16.4</span>).
							<div class="collapsible">
							<ul>
								<li>This option adds content after the mask.</li>
								<li>If the mask includes any content for the suffix, then this value is added after it.</li>
								<li>If this option contains a <code>{content}</code> tag, the suffix within the mask will replace this tag.
									<pre class="prettyprint lang-js">math_mask   : '#,##0.00 USD',
math_suffix : '{content}<span class="red">!</span>'

// result of the value 12345.67
// 12,345.67 USD&lt;span class=&quot;red&quot;&gt;!&lt;/span&gt;</pre>
									You can experiment with this option in the "Mask Examples" section.
								</li>
							</ul>
							</div>
						</td>
					</tr>

					<tr id="math_rowfilter">
						<td><a href="#" class="permalink">math_rowFilter</a></td>
						<td><code>''</code></td>
						<td>
							Set this option apply a filter to targeted rows (<span class="version">v2.24.6</span>; <span class="version updated">v2.25.0</span>).
							<div class="collapsible">
							<p>This option applys the set filter (<a href="http://api.jquery.com/filter/">jQuery <code>.filter()</code></a> to the targeted rows.</p>
							<p>If this option is set, rows filtered out by the filter widget are included, so you will need to include them in this selector if you wish to filter them out (e.g. <code>':visible:not(.filtered)'</code> (only include visible &amp; rows not filtered out by the filter widget)</p>
							<pre class="prettyprint lang-js">// this option will accept any of the jQuery filter types (i.e. selector, function or elements)
// for example, here is the functional equivalent
// math_rowFilter : function(index, element) { return $(element).is(':visible:not(.filtered)'); }
math_rowFilter : ':visible:not(.filtered)'</pre>
								In <span class="version">v2.25.0</span>, this setting may be overridden for each math type by adding a <code>data-math-filter</code> attribute (The "math" portion is set by the <code>math_data</code> option) to the cell.
								<pre class="prettyprint lang-html">&lt;td data-math-filter=":visible" data-math="all-sum"&gt;...&lt;/td&gt;</pre>
								<span class="label label-info">Note</span> The <code>data-math-filter</code> attribute is ignored if set to an empty string; instead use <code>data-math-filter="*"</code> to target all rows as done in the first example on this page.
							</div>
						</td>
					</tr>

				</tbody>
			</table>
		</div>

		<h3><a href="#">Methods</a></h3>
		<div>
			<h3>Recalculate</h3>
			<blockquote>
				Recalculate the values of all math cells within the table using the following method:
				<pre class="prettyprint lang-js">$('table').trigger('recalculate');</pre>
				<p>The triggered <code>'recalculate'</code> method can be renamed by modifying the <a class="intlink" href="#math_event"><code>math_event</code> option.</a></p>
				This method is automatically called:
					<ul>
						<li>Tablesorter initialization.</li>
						<li>After any call to a tablesorter method which updates the internal cache (e.g. "update", "updateCell", etc). The math widget listens for the <a href="index.html#updatecomplete">updateComplete</a> event, which occurs after the internal cache has completed updating, before recalculating values.</li>
						<li>After a "filterReset".</li>
						<li>And after a "filterEnd" event, <em>or</em> a "pagerComplete" event (if the pager is being used), but not both!</li>
					</ul>
			</blockquote>
		</div>

		<h3><a href="#">Attribute Settings</a></h3>
		<div>
			The math widget data-attibute setting requires two parts: type &amp; formula
			<pre class="prettyprint lang-html">&lt;td data-math="{type}-{formula}"&gt;&lt;/td&gt;</pre>
			When set, the data is gathered based on the math type ("row", "column", "above", "below" or "all") and passed to the formula as an array.
			<h3><code>{type}</code> (data gathering)</h3>
			<ul>
				<li><code>row</code> - gather the table cell values from the same row as the <code>data-math</code> attribute.</li>
				<li><code>above</code> - gather the table cell values from the same column as the <code>data-math</code> attribute, but stop when the first table cell is reached, or when another cell with a data-attribute with an "above" type is reached; see the first table demo below to see why this is useful.</li>
				<li><code>below</code> (<span class="version">v2.24.0</span>) - gather the table cell values from the same column as the <code>data-math</code> attribute, but stop when the last table cell is reached, or when another cell with a data-attribute with a "below" type is reached.</li>
				<li><code>col</code> - gather the table cell values from the same column as the <code>data-math</code> attribute.</li>
				<li><code>all</code> - gather all table cell values with a data-math attribute that start with "all".</li>
			</ul>
			<h3><code>{formula}</code> (defaults)</h3>
			<ul>
				<li><code>count</code> - returns the count (length) of the data set.</li>
				<li><code>sum</code> - returns the sum of all values in the data set.</li>
				<li><code>max</code> - returns the maximum value in the data set.</li>
				<li><code>min</code> - returns the minimum values in the data set.</li>
				<li><code>mean</code> - returns the mean (average) of all values in the data set; it uses the <code>sum</code> formula in part of the calculation.</li>
				<li><code>median</code> - returns the median (middle value) of the data set.</li>
				<li><code>mode</code> - returns an array of the mode(s) (most frequent value or values) in the data set; an array is always returned, even if only one mode exists (see the second demo below).</li>
				<li><code>range</code> - returns the range (highest minus lowest value) of the data set.</li>
				<li><code>varp</code> - returns the variance of the data set (population).</li>
				<li><code>vars</code> - returns the variance of the data set (sample).</li>
				<li><code>stdevp</code> - returns the standard deviation of the data set (population).</li>
				<li><code>stdevs</code> - returns the standard deviation of the data set (sample).</li>
				<li><code>custom</code> (not a default)
					<ul>
						<li>Custom formulas can have any name</li>
						<li>Return your result after making whatever calculation from the array of data passed to the formula</li>
						<li>For example:
							<pre class="prettyprint lang-js">// adding a custom equation... named "product"
// access from data-math="row-product" (or "above-product", "below-product" or "col-product")
// config parameter added v2.24.0 to allow access to table settings
$.tablesorter.equations['product'] = function(arry, config) {
    // multiple all array values together
    var product = 1;
    $.each(arry, function(i,v) {
        // oops, we shouldn't have any zero values in the array
        if (v !== 0) {
            product *= v;
        }
    });
    return product;
};</pre>
						</li>
					</ul>
				</li>
			</ul>
			<h4>Ignoring cells</h4>
			<ul>
				<li>Entire row: if the <code>&lt;tr&gt;</code> math data-attribute contains the keyword <code>"ignore"</code> then that entire row of cells will be skipped when building the array of data to be used for calculations.
				<pre class="prettyprint lang-html">&lt;tr data-math=&quot;ignore&quot;&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;</pre>
				</li>
				<li>Cell: if the table cell math data-attribute contains the keyword <code>"ignore"</code> then that cell will be skipped when building the array of data to be used for calculations.
				<pre class="prettyprint lang-html">&lt;td data-math=&quot;ignore&quot;&gt;1&lt;/td&gt;</pre>
				</li>
				<li>Column: set the widget <code>math_ignore</code> option with an array of zero-based column indexes of columns to ignore or skip when building the array of data for calculations.
				<pre class="prettyprint lang-js">math_ignore : [0,1]</pre>
				</li>
			</ul>
			<h4>Targeting cell content</h4>
			<ul>
				<li>Version <span class="version">2.27.0</span> added a new data-attribute. The <code>data-math-target</code> attribute value must contain an element selector within the same cell.
				<pre class="prettyprint lang-html">&lt;tr&gt;
  &lt;td data-math=&quot;sum-above&quot; data-math-target=&quot;.sum&quot;&gt;The total value is &lt;span class=&quot;sum&quot;&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;</pre>
				</li>
				<li>If you're using the grouping widget and want to sum up the value of the group, you'll need to also include a <code>data-column</code> attribute to target the table column to sum. Here is a <a href="https://jsfiddle.net/Mottie/st2p6uvs/">JSFiddle</a> demonstrating how to combine the two widgets.
				<pre class="prettyprint lang-html">&lt;tr&gt;
  &lt;td colspan=&quot;5&quot; data-math=&quot;sum-above&quot; data-math-target=&quot;.sum&quot; data-column=&quot;3&quot;&gt;The total value is &lt;span class=&quot;sum&quot;&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;</pre>
				</li>
			</ul>
		</div>

		<h3><a href="#">Mask Examples</a></h3>
		<div>
			The formatting function can be used separately from the math widget:
			<pre class="prettyprint lang-js">// $.tablesorter.formatMask(mask, value, prefix, suffix);
$.tablesorter.formatMask('$#,##0.00 USD', 12345.678, 'prefix ', ' suffix');
// result: "prefix $12,345.68 USD suffix"</pre>
			<ul>
				<li>The <code>$.tablesorter.formatMask</code> function has the following parameters:
					<ul>
						<li><code>mask</code> - please refer to the <code>math_mask</code> option for more details.</li>
						<li><code>value</code> - number to be formatted.</li>
						<li><code>prefix</code> - please refer to the <code>math_prefix</code> option for more details (<span class="version updated">v2.16.4</span>).</li>
						<li><code>suffix</code> - please refer to the <code>math_suffix</code> option for more details (<span class="version updated">v2.16.4</span>).</li>
					</ul>
				</li>
			</ul>

			<p>
				<span class="label label-info">Note</span> The difference between using <code>#</code> and <code>0</code> in the mask, is that when a value of zero is passed to the function, the <code>#</code> mask will return an empty string whereas the <code>0</code> mask will return a zero.
				<pre class="prettyprint lang-js">$.tablesorter.formatMask('$#,##0.00 USD', 0); // result: "$0.00 USD"
$.tablesorter.formatMask('$#,###.00 USD', 0); // result: "$.00 USD"
$.tablesorter.formatMask('$#,###.#0 USD', 0); // result: "$.00 USD"
$.tablesorter.formatMask('$#,###.## USD', 0); // result: "$ USD"</pre>
			</p>

			<h4>Experiment with the mask:</h4>
			<textarea class="source">$#,##0.00 USD
##.000,00 ¥
£-##¿000$00 xx
test:### ###. ing
prefix with a comma, ok? #.00 yep!
prefix with a periods? ok?... #.00 yep!
    prefix with spaces   ##^000*00 suffix, with comma
prefix (#,###.00) suffix

BAD =&gt; mask starts with a decimal .00 &lt;= BAD
BAD =&gt; mask starts with a comma ,##.00 &lt;= BAD
BAD =&gt; No hash (#) outside of mask $#,###.00 No # in suffix &lt;= BAD
BAD =&gt; No plus (+) here! #,###.00 ¢ or [+] here &lt;= BAD
BAD =&gt; No minus (-) here! $#,###.00 or [-] here either &lt;= BAD</textarea>
		<pre class="resultz"></pre>
		<br class="clear">
		Value to use: <input class="value" type="text" value="1234567.8955" /><br>
		Prefix: <input class="prefix" type="text" value='<span class="red">{content}</span>' /> ( add <code>{content}</code> to include the mask prefix )<br>
		Suffix: <input class="suffix" type="text" value='<span class="blue">{content}</span>' /> ( add <code>{content}</code> to include the mask suffix )<br>
		<button type="button">Process</button>
		</div>

	</div>

	<p></p>

	<h1>Demo</h1>

<div id="demo"><h3>Row &amp; Column Sums</h3>
<table id="table1" class="tablesorter">
	<thead>
		<tr>
			<th class="sorter-false filter-select" data-placeholder="Select region">Region</th>
			<th>Salesman</th>
			<th>FastCar</th>
			<th>RapidZoo</th>
			<th>SuperGlue</th>
			<th class="filter-false">Grand Total</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th colspan="2">Column Totals</th>
			<th data-math="col-sum">col-sum</th>
			<th data-math="col-sum">col-sum</th>
			<th data-math="col-sum">col-sum</th>
			<th data-math="col-sum">col-sum</th>
		</tr>
		<tr>
			<th colspan="5">Visible Total</th>
			<th data-math="all-sum"></th>
		</tr>
		<tr>
			<th colspan="5">Grand Total</th>
			<!--
			The "data-math-filter" attribute can not be set to an empty string AND override the widgetOptions.math_rowFilter,
			so set to to an asterisk ("*") to target all rows.
			-->
			<th data-math="all-sum" data-math-filter="*" data-math-mask="##0.0000"></th>
		</tr>
	</tfoot>

	<tbody>
		<tr><th>Middle</th><td>Joseph</td><td>$ 423</td><td>$ 182</td><td>$ 255</td><td class="totals" data-math="row-sum">row-sum</td></tr>
		<tr><th>Middle</th><td>Lawrence</td><td>$ 5,908</td><td>$ 4,642</td><td>$ 4,593</td><td class="totals" data-math="row-sum">row-sum</td></tr>
		<tr><th>Middle</th><td>Maria</td><td>$ 6,502</td><td>$ 3,969</td><td>$ 5,408</td><td class="totals" data-math="row-sum">row-sum</td></tr>
		<tr><th>Middle</th><td>Matt</td><td>$ 4,170</td><td>$ 6,093</td><td>$ 5,039</td><td class="totals" data-math="row-sum">row-sum</td></tr>
	</tbody>

	<tbody class="tablesorter-infoOnly">
		<tr>
			<th colspan="2">Middle Total</th>
			<th data-math="above-sum">above-sum</th>
			<th data-math="above-sum">above-sum</th>
			<th data-math="above-sum">above-sum</th>
			<th data-math="above-sum">above-sum</th>
		</tr>
	</tbody>

	<tbody>
		<tr><th>North</th><td>Joseph</td><td>$ 3,643</td><td>$ 5,846</td><td>$ 6,574</td><td class="totals" data-math="row-sum">row-sum</td></tr>
		<tr><th>North</th><td>Lawrence</td><td>$ 4,456</td><td>$ 6,658</td><td data-text="$ 7,685.0049">$ 7,685</td><td class="totals" data-math="row-sum">row-sum</td></tr>
		<tr><th>North</th><td>Maria</td><td>$ 6,235</td><td>$ 4,616.99</td><td data-text="3612.3267">$ 3,612.33</td><td class="totals" data-math="row-sum">row-sum</td></tr>
		<tr><th>North</th><td>Matt</td><td>$ 3,868</td><td>$ 3,926</td><td>$ 3,254</td><td class="totals" data-math="row-sum">row-sum</td></tr>
	</tbody>

	<tbody class="tablesorter-infoOnly">
		<tr>
			<th colspan="2">North Total</th>
			<th data-math="above-sum">above-sum</th>
			<th data-math="above-sum">above-sum</th>
			<th data-math="above-sum">above-sum</th>
			<th data-math="above-sum">above-sum</th>
		</tr>
	</tbody>

	<tbody>
		<tr><th>West</th><td>Joseph</td><td>$ 5,507</td><td>$ 5,186</td><td>$ 4,882</td><td class="totals" data-math="row-sum">row-sum</td></tr>
		<tr><th>West</th><td>Lawrence</td><td>$ 4,082</td><td>$ 5,272</td><td>$ 6,124</td><td class="totals" data-math="row-sum">row-sum</td></tr>
		<tr><th>West</th><td>Maria</td><td>$ 5,520</td><td>$ 5,461</td><td>$ 4,872</td><td class="totals" data-math="row-sum">row-sum</td></tr>
		<tr><th>West</th><td>Matt</td><td>$ 6,737</td><td>$ 4,598</td><td>$ 4,233</td><td class="totals" data-math="row-sum">row-sum</td></tr>
	</tbody>

	<tbody class="tablesorter-infoOnly">
		<tr>
			<th colspan="2">West Total</th>
			<th data-math="above-sum">above-sum</th>
			<th data-math="above-sum">above-sum</th>
			<th data-math="above-sum">above-sum</th>
			<th data-math="above-sum">above-sum</th>
		</tr>
	</tbody>

</table>

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<h3>Math Formulas</h3>
<table id="table2" class="tablesorter">
	<thead>
		<tr><th>Formula</th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>Result (expected result)</th></tr>
	</thead>
	<tbody class="tablesorter-infoOnly">
		<tr><th colspan="8">Default Formulas</th></tr>
	</tbody>
	<tbody>
		<tr><td>Count (row-count)</td><td>10</td><td>10</td><td>10</td><td>10</td><td>20</td><td>20</td><td data-math="row-count"></td></tr>
		<tr><td>Sum (row-sum)</td><td>10</td><td>20</td><td>10</td><td>10</td><td>30</td><td>20</td><td data-math="row-sum"></td></tr>
		<tr><td>Max (row-max)</td><td>20</td><td>60</td><td>30</td><td>15</td><td>30</td><td>5</td><td data-math="row-max"></td></tr>
		<tr><td>Min (row-min)</td><td>20</td><td>60</td><td>30</td><td>15</td><td>30</td><td>5</td><td data-math="row-min"></td></tr>
		<tr><td>Mean (row-mean)</td><td>10</td><td>20</td><td>30</td><td>10</td><td>30</td><td>20</td><td data-math="row-mean"></td></tr>
		<tr><td>Median (row-median)</td><td>10</td><td>5</td><td>3</td><td>4</td><td>4</td><td>3</td><td data-math="row-median"></td></tr>
		<tr><td>Mode (row-mode)</td><td>1</td><td>2</td><td>2</td><td>2</td><td>3</td><td>2</td><td data-math="row-mode"></td></tr>
		<tr><td>Mode (row-mode)</td><td>1</td><td>2</td><td>2</td><td>1</td><td>3</td><td>4</td><td data-math="row-mode"></td></tr>
		<tr><td>Range (row-range)</td><td>1</td><td>-2</td><td>2</td><td>4</td><td>6</td><td>0</td><td data-math="row-range"></td></tr>
		<tr><td>Variance [population] (row-varp)</td><td>2</td><td>7</td><td>4</td><td>5</td><td>5</td><td>4</td><td data-math="row-varp"></td></tr>
		<tr><td>Standard Deviation [population] (row-stdevp)</td><td>2</td><td>7</td><td>4</td><td>5</td><td>5</td><td>4</td><td data-math="row-stdevp"></td></tr>
		<tr><td>Variance [sample] (row-vars)</td><td>2</td><td>7</td><td>4</td><td>5</td><td>5</td><td>4</td><td data-math="row-vars"></td></tr>
		<tr><td>Standard Deviation [sample] (row-stdevs)</td><td>2</td><td>7</td><td>4</td><td>5</td><td>5</td><td>4</td><td data-math="row-stdevs"></td></tr>
	</tbody>
	<tbody class="tablesorter-infoOnly">
		<tr><th colspan="8">Custom Formulas</th></tr>
	</tbody>
	<tbody>
		<tr><td>Custom ( (A+B+C)*D - (E/F)*100 )</td><td>5</td><td>2</td><td>3</td><td>20</td><td>1</td><td>2</td><td data-math="row-custom"></td></tr>
		<tr><td>Product ( A*B*C*D*E*F )</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>10</td><td data-math="row-product"></td></tr>
	</tbody>
</table></div>

	<h1>Page Header</h1>
	<div>
		<pre class="prettyprint lang-html">&lt;!-- load your chosen theme --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/theme.blue.css&quot;&gt;

&lt;!-- jQuery --&gt;
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- Tablesorter: required --&gt;
&lt;script src=&quot;js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/widget-math.js&quot;&gt;&lt;/script&gt;

&lt;!-- load filter widget if needed --&gt;
&lt;script src=&quot;js/widget-filter.js&quot;&gt;&lt;/script&gt;</pre>
	</div>


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

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

	<h1>HTML</h1>
	<div id="html">
		<pre class="prettyprint lang-html"></pre>
	</div>

</div>

</body>
</html>