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.
61 lines (54 loc) • 2.63 kB
HTML
<html>
<head>
<title>Subtotal Demo</title>
<!-- external dependency 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.14.0/pivot.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.14.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 demonstrates customization collapse / expand arrow characters
$(function(){
var dataClass = $.pivotUtilities.SubtotalPivotData;
var renderers = $.pivotUtilities.subtotal_renderers;
$.getJSON("data/mps.json", function(mps) {
$("#output").pivotUI(mps, {
dataClass: dataClass,
rows: ["Gender", "Province"],
cols: ["Party", "Age"],
renderers: renderers,
rendererName: "Table With Subtotal",
rendererOptions: {
arrowCollapsed: "[+] ",
arrowExpanded: "[-] ",
rowSubtotalDisplay: {
collapseAt: 0
},
colSubtotalDisplay: {
collapseAt: 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>