Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-math.js"></script>
<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>
...

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  $("table").tablesorter({
    theme: 'blue',
    widgets: ['math', 'zebra', 'filter'],
    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());
      },
      // 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: ''
    }
  });
});