+ +
+
+
+
+
+
+ Notes
+
+
+
+ -
+
- 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
data-columnattribute.
+ - 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, and adds a
- When setting tablesorter's
debugoption 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
+
+
+
+
+
+ Math widget default options (added inside of tablesorter widgetOptions)
+
+ TIP! Click on the link in the option column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
+
+ | Option | Default | Description |
|---|---|---|
| math_data | +'math' |
+
+ Set this option to point to the named data-attribute. For example, when set to 'math', the widget looks for settings within the data-math attribute.
+ |
+
| 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 zero-based column indexs as follows: + // column index(es) to ignore +math_ignore : [0,1]+ |
+
| math_mask | +'#,##0.00' |
+
+ Set this option with an output formatting mask to use *
+
+
+ Features+
Limitation+
Note+
|
+
| math_complete | +null |
+
+ This function is called after each calculation is made to allow re-formatting, 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('data-suffix');
+}
+
$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_priority | +[ 'row', 'above', 'col' ]' |
+
+ This is the order of calculations.
+
+
+
|
+
Attribute Settings
+
+ The math widget data-attibute setting requires two parts: type & formula
+
+
+
+ <td data-math="{type}-{formula}"></td>
+ When set, the data is gathered based on the math type ("row", "column", "above" or "all") and passed to the formula as an array.
+ {type} (data gathering)
+ -
+
row- gather the table cell values from the same row as thedata-mathattribute.
+ above- gather the table cell values from the same column as thedata-mathattribute, 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.
+ col- gather the table cell values from the same column as thedata-mathattribute.
+ all- gather all table cell values with a data-math 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 thesumformula 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 data-math="row-product" (or "above-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; +};+
+
+
Ignoring cells
+-
+
- Entire row: if the
<tr>math data-attribute 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 data-math="ignore"><td>1</td><td>2</td><td>3</td></tr>
+
+ - Cell: if the table cell math data-attribute contains the keyword
"ignore"then that cell will be skipped when building the array of data to be used for calculations. +<td data-math="ignore">1</td>
+
+ - Column: set the widget
math_ignoreoption with an array of zero-based column indexes of columns to ignore or skip when building the array of data for calculations. +math_ignore : [0,1]
+
+
Demo
+ +Row & Column Sums
+| Region | +Salesman | +FastCar | +RapidZoo | +SuperGlue | +Grand Total | +
|---|---|---|---|---|---|
| Column Totals | +col-sum | +col-sum | +col-sum | +col-sum | +|
| Grand Total | +all-sum | +||||
| Middle | Joseph | $ 423 | $ 182 | $ 255 | row-sum |
| Middle | Lawrence | $ 5,908 | $ 4,642 | $ 4,593 | row-sum |
| Middle | Maria | $ 6,502 | $ 3,969 | $ 5,408 | row-sum |
| Middle | Matt | $ 4,170 | $ 6,093 | $ 5,039 | row-sum |
| Middle Total | +above-sum | +above-sum | +above-sum | +above-sum | +|
| North | Joseph | $ 3,643 | $ 5,846 | $ 6,574 | row-sum |
| North | Lawrence | $ 4,456 | $ 6,658 | $ 7,685 | row-sum |
| North | Maria | $ 6,235 | $ 4,616.99 | $ 3,612.33 | row-sum |
| North | Matt | $ 3,868 | $ 3,926 | $ 3,254 | row-sum |
| North Total | +above-sum | +above-sum | +above-sum | +above-sum | +|
| West | Joseph | $ 5,507 | $ 5,186 | $ 4,882 | row-sum |
| West | Lawrence | $ 4,082 | $ 5,272 | $ 6,124 | row-sum |
| West | Maria | $ 5,520 | $ 5,461 | $ 4,872 | row-sum |
| West | Matt | $ 6,737 | $ 4,598 | $ 4,233 | row-sum |
| West Total | +above-sum | +above-sum | +above-sum | +above-sum | +|
Math Formulas
+| Formula | A | B | C | D | E | F | Result (expected result) |
|---|---|---|---|---|---|---|---|
| Default Formulas | |||||||
| Count (row-count) | 10 | 10 | 10 | 10 | 20 | 20 | |
| Sum (row-sum) | 10 | 20 | 10 | 10 | 30 | 20 | |
| Max (row-max) | 20 | 60 | 30 | 15 | 30 | 5 | |
| Min (row-min) | 20 | 60 | 30 | 15 | 30 | 5 | |
| Mean (row-mean) | 10 | 20 | 30 | 10 | 30 | 20 | |
| Median (row-median) | 10 | 5 | 3 | 4 | 4 | 3 | |
| Mode (row-mode) | 1 | 2 | 2 | 2 | 3 | 2 | |
| Mode (row-mode) | 1 | 2 | 2 | 1 | 3 | 4 | |
| Range (row-range) | 1 | -2 | 2 | 4 | 6 | 0 | |
| Variance [population] (row-varp) | 2 | 7 | 4 | 5 | 5 | 4 | |
| Standard Deviation [population] (row-stdevp) | 2 | 7 | 4 | 5 | 5 | 4 | |
| Variance [sample] (row-vars) | 2 | 7 | 4 | 5 | 5 | 4 | |
| Standard Deviation [sample] (row-stdevs) | 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 | |
Javascript
+ +
+
+
+
+ HTML
+
+
+
+
+