Notes
 In v2.28.0
 Fix documentation and processing of
math_prefix
andmath_suffix
options. See issue #1305.  Remove
math_prefix
content prior to parsing table cell values.  Added "Methods" section & more mask examples.
 Fix documentation and processing of
 In v2.27.0
 Added check for
datamathtarget
attribute which allows you to target an element inside the table cell. See the Attribute Settings > Targeting cell content section below.  Added a
math_debug
option which whentrue
, enables debug logging of only the math widget.  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.
 Added check for
 In v2.25.0
math_rowFilter
can now be overridden by the row'sdatamathfilter
attribute.
Lots of optimizations!
 On initialization, only tbody cells with a
rowspan
orcolspan
are now processed and only get a "datacolumn" set if the internalcellIndex
doesn't match the calculated cell index.  Initial calculation is no longer performed three times in a row
 The cache is now only updated if cell content inside of a sortable tbody was modified.
 These changes should improve performance and reduce lag after initialization and updating the table (see issue #1048.
 On initialization, only tbody cells with a
Older Notes
 In v2.24.6, added
math_rowFilter
option.  In v2.24.0
 Added "below" type of datagathering (see Attribute Settings below for more info). See pull #873; thanks to LvLynx!.
 Added
math_none
option which allows customizing the text added to a cell when there are no matching math elements (.
 In v2.22.0,
 Fixed an issue with a sum column encountering a cell without a defined "datamath" attribute returning an empty string instead of zero. See issue #873.
 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.
 In v2.19.1, added
math_event
option & fixed an issue with event unbinding in jQuery version < 1.9.  In v2.17.1,
 Values added to the dataattribute set by the
textAttribute
option will now be used in the calculation instead of the actual cell content.  The Grand Total cells now shows a higher precision value to emphasize this point.
 Values added to the dataattribute set by the
 In v2.16.4, added:
 Two new options:
math_prefix
andmath_suffix
, which will be added before or after the prefix or suffix, respectively.  Added "Mask Examples" section with examples, and how to use the
$.tablesorter.formatMask
function.
 Two new options:
 Added math widget in v2.16.0beta
 This widget will only work in tablesorter version 2.16+ and jQuery version 1.7+.
 It adds basic math capabilities. A full list of default formulas is listed in the "Attribute Settings" section.
 Add your own custom formulas which manipulating an array of values gathered from the table by row, column or a column block (above).
 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.
 The widget will update the calculations based on filtered rows, and will update if any data within the table changes (using update events).
 This widget is not optimized for very large tables, for two reasons:
 On initialization, it cycles through every table row, calculates the column index
, and adds a(Fixed in v2.25.0).datacolumn
attribute  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.
 On initialization, it cycles through every table row, calculates the column index
 When setting tablesorter's
debug
option totrue
, this widget will output each{type}{formula}
value found, the array of numbers used and the result.
Options
Math widget default options (added inside of tablesorter widgetOptions
)
Option  Default  Description 

math_data  'math' 
Set this option to point to the named dataattribute. For example, when set to 'math' , the widget looks for settings within the datamath attribute.

math_debug  false 
Set this option to true to enable the debug log of the math widget without all the extra noise from the overall debug option (v2.27.0).

math_event  'recalculate' 
Set this option change the name of the event that the widget listens for to perform an update.
By default, recalculations are performed after:

math_ignore  [ ] 
Set this option the column index of columns of data to ignore.
To ignore the first and second columns in a table, set this option using zerobased column indexs as follows: // column index(es) to ignore math_ignore : [0,1] 
math_none  'N/A' 
This option contains the text added to a math cell when no matching elements are found (v2.24.0; v2.25.0).
In v2.25.0, this option can now be set to an empty string. 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. Use it as follows: 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; } 
math_mask  '#,##0.00' 
Set this option with an output formatting mask to use †
As of v2.16.2, you can set a mask for each math cell by adding a <th datamath="allsum" datamathmask="##0.00">allsum</th> Javascriptnumberformatter detailsFeatures
Limitation
Note

math_complete  null 
This function is called after each calculation is made to allow reformatting, adding prefixes, suffixes, etc to the result.
Use this option as follows: // complete executed after each function math_complete : function($cell, wo, result, value, arry) { return '$ ' + result + $cell.attr('datasuffix'); }
$cell as html. Or, return false and no change is made to the cell contents; use this method if you manipulate the $cell contents and don't want the widget to do it.If you need to format the data output after manipulating the value , you can use wo.math_mask , or a different mask, by using the $.tablesorter.formatMask( mask, value ); function. For example:
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 ) + ' %'; }More details can be found in the math_mask description.

math_completed  null 
This function is called after all math recalculations have completed.
Use this option as follows: // complete executed after each function math_completed : function(config) { var total = config.$table.find('[datamath="allsum"]:last').text(); console.log(total); } 
math_priority  [ 'row', 'above', 'below', 'col' ] 
This is the order of calculations (v2.24.0).

math_prefix  '' 
Add content before the value formatted by the math_mask option (v2.16.4).

math_suffix  '' 
Add content after the value formatted by the math_mask option (v2.16.4).

math_rowFilter  '' 
Set this option apply a filter to targeted rows (v2.24.6; v2.25.0).
This option applys the set filter (jQuery 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. // 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)'In v2.25.0, this setting may be overridden for each math type by adding a datamathfilter attribute (The "math" portion is set by the math_data option) to the cell.
<td datamathfilter=":visible" datamath="allsum">...</td>Note The datamathfilter attribute is ignored if set to an empty string; instead use datamathfilter="*" to target all rows as done in the first example on this page.

Methods
Recalculate
Recalculate the values of all math cells within the table using the following method:$('table').trigger('recalculate');The triggered
This method is automatically called:'recalculate'
method can be renamed by modifying themath_event
option.
 Tablesorter initialization.
 After any call to a tablesorter method which updates the internal cache (e.g. "update", "updateCell", etc). The math widget listens for the updateComplete event, which occurs after the internal cache has completed updating, before recalculating values.
 After a "filterReset".
 And after a "filterEnd" event, or a "pagerComplete" event (if the pager is being used), but not both!
Attribute Settings
<td datamath="{type}{formula}"></td>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.
{type}
(data gathering)
row
 gather the table cell values from the same row as thedatamath
attribute.above
 gather the table cell values from the same column as thedatamath
attribute, but stop when the first table cell is reached, or when another cell with a dataattribute with an "above" type is reached; see the first table demo below to see why this is useful.below
(v2.24.0)  gather the table cell values from the same column as thedatamath
attribute, but stop when the last table cell is reached, or when another cell with a dataattribute with a "below" type is reached.col
 gather the table cell values from the same column as thedatamath
attribute.all
 gather all table cell values with a datamath attribute that start with "all".
{formula}
(defaults)
count
 returns the count (length) of the data set.sum
 returns the sum of all values in the data set.max
 returns the maximum value in the data set.min
 returns the minimum values in the data set.mean
 returns the mean (average) of all values in the data set; it uses thesum
formula in part of the calculation.median
 returns the median (middle value) of the data set.mode
 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).range
 returns the range (highest minus lowest value) of the data set.varp
 returns the variance of the data set (population).vars
 returns the variance of the data set (sample).stdevp
 returns the standard deviation of the data set (population).stdevs
 returns the standard deviation of the data set (sample).custom
(not a default) Custom formulas can have any name
 Return your result after making whatever calculation from the array of data passed to the formula
 For example:
// adding a custom equation... named "product" // access from datamath="rowproduct" (or "aboveproduct", "belowproduct" or "colproduct") // 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; };
Ignoring cells
 Entire row: if the
<tr>
math dataattribute contains the keyword"ignore"
then that entire row of cells will be skipped when building the array of data to be used for calculations.<tr datamath="ignore"><td>1</td><td>2</td><td>3</td></tr>
 Cell: if the table cell math dataattribute contains the keyword
"ignore"
then that cell will be skipped when building the array of data to be used for calculations.<td datamath="ignore">1</td>
 Column: set the widget
math_ignore
option with an array of zerobased column indexes of columns to ignore or skip when building the array of data for calculations.math_ignore : [0,1]
Targeting cell content
 Version 2.27.0 added a new dataattribute. The
datamathtarget
attribute value must contain an element selector within the same cell.<tr> <td datamath="sumabove" datamathtarget=".sum">The total value is <span class="sum"></span></td> </tr>
 If you're using the grouping widget and want to sum up the value of the group, you'll need to also include a
datacolumn
attribute to target the table column to sum. Here is a JSFiddle demonstrating how to combine the two widgets.<tr> <td colspan="5" datamath="sumabove" datamathtarget=".sum" datacolumn="3">The total value is <span class="sum"></span></td> </tr>
Mask Examples
// $.tablesorter.formatMask(mask, value, prefix, suffix); $.tablesorter.formatMask('$#,##0.00 USD', 12345.678, 'prefix ', ' suffix'); // result: "prefix $12,345.68 USD suffix"
 The
$.tablesorter.formatMask
function has the following parameters:mask
 please refer to themath_mask
option for more details.value
 number to be formatted.prefix
 please refer to themath_prefix
option for more details (v2.16.4).suffix
 please refer to themath_suffix
option for more details (v2.16.4).
Note The difference between using #
and 0
in the mask, is that when a value of zero is passed to the function, the #
mask will return an empty string whereas the 0
mask will return a zero.
$.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"
Experiment with the mask:
Value to use:
Prefix: ( add
{content}
to include the mask prefix )Suffix: ( add
{content}
to include the mask suffix )Demo
Row & Column Sums
Region  Salesman  FastCar  RapidZoo  SuperGlue  Grand Total 

Column Totals  colsum  colsum  colsum  colsum  
Visible Total  
Grand Total  
Middle  Joseph  $ 423  $ 182  $ 255  rowsum 
Middle  Lawrence  $ 5,908  $ 4,642  $ 4,593  rowsum 
Middle  Maria  $ 6,502  $ 3,969  $ 5,408  rowsum 
Middle  Matt  $ 4,170  $ 6,093  $ 5,039  rowsum 
Middle Total  abovesum  abovesum  abovesum  abovesum  
North  Joseph  $ 3,643  $ 5,846  $ 6,574  rowsum 
North  Lawrence  $ 4,456  $ 6,658  $ 7,685  rowsum 
North  Maria  $ 6,235  $ 4,616.99  $ 3,612.33  rowsum 
North  Matt  $ 3,868  $ 3,926  $ 3,254  rowsum 
North Total  abovesum  abovesum  abovesum  abovesum  
West  Joseph  $ 5,507  $ 5,186  $ 4,882  rowsum 
West  Lawrence  $ 4,082  $ 5,272  $ 6,124  rowsum 
West  Maria  $ 5,520  $ 5,461  $ 4,872  rowsum 
West  Matt  $ 6,737  $ 4,598  $ 4,233  rowsum 
West Total  abovesum  abovesum  abovesum  abovesum 
Math Formulas
Formula  A  B  C  D  E  F  Result (expected result) 

Default Formulas  
Count (rowcount)  10  10  10  10  20  20  
Sum (rowsum)  10  20  10  10  30  20  
Max (rowmax)  20  60  30  15  30  5  
Min (rowmin)  20  60  30  15  30  5  
Mean (rowmean)  10  20  30  10  30  20  
Median (rowmedian)  10  5  3  4  4  3  
Mode (rowmode)  1  2  2  2  3  2  
Mode (rowmode)  1  2  2  1  3  4  
Range (rowrange)  1  2  2  4  6  0  
Variance [population] (rowvarp)  2  7  4  5  5  4  
Standard Deviation [population] (rowstdevp)  2  7  4  5  5  4  
Variance [sample] (rowvars)  2  7  4  5  5  4  
Standard Deviation [sample] (rowstdevs)  2  7  4  5  5  4  
Custom Formulas  
Custom ( (A+B+C)*D  (E/F)*100 )  5  2  3  20  1  2  
Product ( A*B*C*D*E*F )  1  2  3  4  5  10 
Page Header
<! load your chosen theme > <link rel="stylesheet" href="css/theme.blue.css"> <! jQuery > <script src="js/jquery.min.js"></script> <! Tablesorter: required > <script src="js/jquery.tablesorter.js"></script> <script src="js/widgetmath.js"></script> <! load filter widget if needed > <script src="js/widgetfilter.js"></script>