tablesorter/beta-testing/example-widget-sum-columns.html
2013-05-31 19:32:50 -05:00

248 lines
5.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Column Math Widget</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="../docs/css/jq.css">
<link href="../docs/css/prettify.css" rel="stylesheet">
<script src="../docs/js/prettify.js"></script>
<script src="../docs/js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="widget-column-math.js"></script>
<style>
.align-decimal { width: 85px; text-align: right; }
</style>
<script id="js">$(function() {
// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
$("table").tablesorter({
theme: 'blue',
widgets: ['zebra', 'column-math'],
widgetOptions: {
columnMath_data : 'math', // data-math attribute
columnMath_format : {
// would prefer to just use a formatting mask instead of all these options, something like: "$ #,###.00"
output_prefix : '$ ',
output_suffix : '',
thousands_separator : ',',
thousands_grouping : 3,
decimal_separator : '.',
decimal_places : 2,
format_complete : null // function(number, $cell){ return number; }
}
}
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Column Math Widget</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
<em>NOTE!</em>
<ul>
<li>This is an attempt to generalize <a href="http://jsfiddle.net/Mottie/vCTHw/729/">this demo</a>.</li>
<li>It still needs a LOT of work (incomplete functionality).</li>
</ul>
</p>
<h1>Demo</h1>
<div id="demo"><table class="sortable">
<thead>
<tr>
<th class="sorter-false">Region</th>
<th>Salesman</th>
<th>FastCar</th>
<th>RapidZoo</th>
<th>SuperGlue</th>
<th>Grand Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Column Totals</td>
<td data-math="sumcol"></td>
<td data-math="sumcol"></td>
<td data-math="sumcol"></td>
<td data-math="sumcol" data-math-target="[data-math]"></td>
</tr>
<tr>
<td colspan="5">Grand Total</td>
<td data-math="sumall"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="block">Middle</td>
<td>Joseph</td>
<td>$ 3,623</td>
<td>$ 4,782</td>
<td>$ 7,055</td>
<td data-math="sumrow"></td>
</tr>
<tr>
<td class="block">Middle</td>
<td>Lawrence</td>
<td>$ 5,908</td>
<td>$ 4,642</td>
<td>$ 4,593</td>
<td data-math="sumrow"></td>
</tr>
<tr>
<td class="block">Middle</td>
<td>Maria</td>
<td>$ 6,502</td>
<td>$ 3,969</td>
<td>$ 5,408</td>
<td data-math="sumrow"></td>
</tr>
<tr>
<td class="block">Middle</td>
<td>Matt</td>
<td>$ 4,170</td>
<td>$ 6,093</td>
<td>$ 5,039</td>
<td data-math="sumrow"></td>
</tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr>
<td colspan="2">Middle Total</td>
<td data-math="sumabove"></td>
<td data-math="sumabove"></td>
<td data-math="sumabove"></td>
<td data-math="sumabove" data-math-target="[data-math]"></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="block">North</td>
<td>Joseph</td>
<td>$ 3,643</td>
<td>$ 5,846</td>
<td>$ 6,574</td>
<td data-math="sumrow"></td>
</tr>
<tr>
<td class="block">North</td>
<td>Lawrence</td>
<td>$ 4,456</td>
<td>$ 6,658</td>
<td>$ 7,685</td>
<td data-math="sumrow"></td>
</tr>
<tr>
<td class="block">North</td>
<td>Maria</td>
<td>$ 6,235</td>
<td>$ 4,616.99</td>
<td>$ 3,612.33</td>
<td data-math="sumrow"></td>
</tr>
<tr>
<td class="block">North</td>
<td>Matt</td>
<td>$ 3,868</td>
<td>$ 3,926</td>
<td>$ 3,254</td>
<td data-math="sumrow"></td>
</tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr>
<td colspan="2">North Total</td>
<td data-math="sumabove"></td>
<td data-math="sumabove"></td>
<td data-math="sumabove"></td>
<td data-math="sumabove" data-math-target="[data-math]"></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="block">West</td>
<td>Joseph</td>
<td>$ 5,507</td>
<td>$ 5,186</td>
<td>$ 4,882</td>
<td data-math="sumrow"></td>
</tr>
<tr>
<td class="block">West</td>
<td>Lawrence</td>
<td>$ 4,082</td>
<td>$ 5,272</td>
<td>$ 6,124</td>
<td data-math="sumrow"></td>
</tr>
<tr>
<td class="block">West</td>
<td>Maria</td>
<td>$ 5,520</td>
<td>$ 5,461</td>
<td>$ 4,872</td>
<td data-math="sumrow"></td>
</tr>
<tr>
<td class="block">West</td>
<td>Matt</td>
<td>$ 6,737</td>
<td>$ 4,598</td>
<td>$ 4,233</td>
<td data-math="sumrow"></td>
</tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr>
<td colspan="2">West Total</td>
<td data-math="sumabove"></td>
<td data-math="sumabove"></td>
<td data-math="sumabove"></td>
<td data-math="sumabove" data-math-target="[data-math]"></td>
</tr>
</tbody>
</table></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
</div>
</body>
</html>