248 lines
5.3 KiB
HTML
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>
|
|
|