var txt = result + ' (<spanclass="results">' + expectedResults[resultIndex++ % resultLen] + '</span>)';
// mode will return an array if there is a tie
return $.isArray(result) ? 'Tie: ' + txt : txt;
}
}
});
});</script>
</head>
<body>
<divid="banner">
<h1>table<em>sorter</em></h1>
<h2>Math Widget (beta)</h2>
<h3>Flexible client-side table sorting</h3>
<ahref="index.html">Back to documentation</a>
</div>
<divid="main">
<p></p>
<br>
<divid="root"class="accordion">
<h3><ahref="#">Notes</a></h3>
<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, and adds a <code>data-column</code> attribute.</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><ahref="#">Options</a></h3>
<div>
<h3>Math widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
<divclass="tip">
<spanclass="label label-info">TIP!</span> Click on the link in the option column to reveal full details (or <ahref="#"class="toggleAll">toggle</a>|<ahref="#"class="showAll">show</a>|<ahref="#"class="hideAll">hide</a> all) or double click to update the browser location.
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.
As of <spanclass="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 obtained from the <code>math_data</code> setting).
<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>Simple interface, just supply mask & value like this: <code>$.tablesorter.formatMask( "0.0000", 3.141592 )</code></li>
</ul>
<h3>Limitation</h3>
<ul>
<li>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></li>
<li>No scientific/engineering formatting.</li>
<li>Not for date or phone formation.</li>
<li>No color control.</li>
</ul>
<h3>Note</h3>
<ul>
<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>
<spanclass="remark">*</span> The number formatter code was copied from <ahref="https://code.google.com/p/javascript-number-formatter/">javascript-number-formatter</a> (<ahref="http://opensource.org/licenses/mit-license.php">MIT</a>).
<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:
When set, the data is gathered based on the math type ("row", "column", "above" 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>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:
<preclass="prettyprint lang-js">// adding a custom equation... named "product"
// access from data-math="row-product" (or "above-product", or "col-product")
// 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><tr></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.
<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.
<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.
