math_complete issue

by Herst

HTML

<script src="https://rawgit.com/Mottie/tablesorter/master/js/jquery.tablesorter.combined.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-math.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Mottie/tablesorter/master/dist/css/theme.default.min.css">
<table id="table1" class="tablesorter">
  <thead>
    <tr>
      <th>Foo1</th>
      <th>Bar2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th data-math="col-sum">col-sum</th>
      <th data-math="col-sum">col-sum</th>
    </tr>
  </tfoot>

  <tbody>

  </tbody>

</table>

<button type="button" id="btnLoad">(Re-)Load Data</button>

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;
	}

JavaScript

var $table = $('#table1');

$table.tablesorter({
  //delayInit: true,
  widgets: ['zebra', 'filter', 'math'],
  widgetOptions: {
    math_complete: function($cell, wo, result, value, arry) {
      console.log("math_complete");
      return "~[ " + value + " ]~";
    }
  }
});

$('#btnLoad').click(function() {
  var $tblBody = $("#table1 tbody");

  $tblBody.empty();

  for (var i = 0; i < 10; ++i) {
    $("<tr></tr>")
      .append("<td>" + i + "</td><td>" + (Math.floor(Math.random() * (1000000 - 100000)) + 100000) + "</td>")
      .appendTo($tblBody);
  }

  // uncomment the following line and everything works again!
  $table.trigger('update');

  setTimeout(function() {
    $table.trigger('recalculate');
  }, 60);

  $table.trigger("update");
});