subtotal
Version:
Subtotal.js is a JavaScript plugin for PivotTable.js. It renders subtotals of rows and columns with the ability to expand and collapse rows.
72 lines (64 loc) • 3.72 kB
HTML
<html>
<head>
<title>Subtotal Demo</title>
<!-- external libs from cdnjs -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- PivotTable.js libs from cdnjs -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.7.0/pivot.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.7.0/pivot.min.css">
<!-- subtotal.js libs from ../dist -->
<script type="text/javascript" src="../dist/subtotal.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/subtotal.css">
<!-- optional: mobile support with jqueryui-touch-punch -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<!-- for examples only! script to show code to user -->
<script type="text/javascript" src="js/show_code.js"></script>
</head>
<body>
<script type="text/javascript">
// This example loads the fixureData for testing purposes
fixtureData = [
["name", "gender", "colour", "birthday", "trials", "successes"],
["Nick", "male", "blue", "1982-11-07", 103, 12],
["Jane", "female", "red", "1982-11-08", 95, 25],
["John", "male", "blue", "1982-12-08", 112, 30],
["Carol", "female", "yellow", "1983-11-11", 102, 14],
["Raj", "male", "blue", "1982-11-07", 103, 12],
["Rani", "female", "red", "1982-11-08", 95, 25],
["Joshi", "male", "blue", "1982-12-09", 112, 12],
["Vel", "male", "yellow", "1982-12-01", 112, 25],
["Sai", "male", "red", "1982-11-08", 112, 30],
["Geeth", "female", "blue", "1982-12-03", 112, 14],
["Malar", "male", "red", "1982-11-05", 112, 12],
["Nila", "male", "blue", "1982-12-07", 112, 25],
["Yaazhi", "male", "yellow", "1982-12-06", 112, 30],
["Mukhi", "male", "yellow", "1982-11-07", 112, 14]];
$(function(){
var dataClass = $.pivotUtilities.SubtotalPivotData;
var renderers = $.pivotUtilities.subtotal_renderers;
var aggregators = $.extend($.pivotUtilities.aggregators, $.pivotUtilities.subtotal_aggregators);
$("#output").pivotUI(fixtureData, {
dataClass: dataClass,
renderers: renderers,
aggregators: aggregators,
rows: ["gender", "colour"],
cols: ["birthday", "trials"],
vals: ["successes"],
rendererOptions: {
collapseRowsAt: 0,
collapseColsAt: 0
}
});
});
</script>
<p><a href="index.html">« back to examples</a></p>
<p></p>
<p>To expand and collapse rows and columns, click on ▶ and ◢ arrows in the table. Scroll down to view the code.</p>
<p></p>
<div id="output" style="margin: 30px;"></div>
<p></p>
<p><a href="index.html">« back to examples</a></p>
</body>
</html>