deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-06-03 06:22:34 +02:00
Code Issues Releases Wiki Activity
TableFilter/column-calculations-api.html
Max Guglielmi e349eef381 Generated by grunt gh-pages
2017-12-22 23:08:36 +11:00

1073 lines
27 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column calculations with API | TableFilter</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Bootstrap theme -->
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/theme.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./">TableFilter</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- you can exclude pages using {{#isnt}} helper: {{#isnt data.title 'Blog'}} -->
<li>
<a href="examples.html">Examples</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Github <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="https://github.com/koalyptus/TableFilter">Repo</a>
</li>
<li>
<a href="https://github.com/koalyptus/TableFilter/wiki">Wiki</a>
</li>
</ul>
</li>
<li>
<a href="http://koalyptus.github.io/TableFilter/docs" target="_blank">Docs</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container theme-showcase" role="main">
<h1>Column calculations with API</h1>
<p>
This example shows how to get advantage of the <code>ColOps</code> API to
perform desired calculations on a specified column. Pagination is turned on
to specifically show the difference between visible filtered data and
filtered data (the filtered data displayed on current page vs filtered dataset).
</p>
<div class="alert alert-warning" role="alert">
Instructions: filter or sort a column, change a page to see calculation
results for the <code>Total</code> column.
</div>
<div style="font-size:1.2em;" data-config>
<p>Visible data:<br>
<code>Sum:</code> <span id="vis-sum" class="badge"></span>
<code>Mean:</code> <span id="vis-mean" class="badge"></span>
<code>Median:</code> <span id="vis-median" class="badge"></span>
<code>Min:</code> <span id="vis-min" class="badge"></span>
<code>max:</code> <span id="vis-max" class="badge"></span>
</p>
<p>Filtered data:<br>
<code>Sum:</code> <span id="flt-sum" class="badge"></span>
<code>Mean:</code> <span id="flt-mean" class="badge"></span>
<code>Median:</code> <span id="flt-median" class="badge"></span>
<code>Min:</code> <span id="flt-min" class="badge"></span>
<code>max:</code> <span id="flt-max" class="badge"></span>
</p>
</div>
<table id="demo" class="dummy">
<thead>
<tr>
<th>Email</th>
<th>Id</th>
<th>Phone</th>
<th>Total</th>
<th>Url</th>
<th>ISO Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>found@mountdev.net</td>
<td>03519</td>
<td>941-964-1599</td>
<td>$1176.48</td>
<td>http://donuts.com</td>
<td>2000/8/6</td>
</tr>
<tr>
<td>lost@fish.org</td>
<td>36628</td>
<td>941-964-5975</td>
<td>$822.23</td>
<td>http://www.gmail.com</td>
<td>1994/7/14</td>
</tr>
<tr>
<td>mendez@dotnet.ca</td>
<td>90442</td>
<td>941-964-1649</td>
<td>$1985.72</td>
<td>http://reno.gov</td>
<td>1997/10/20</td>
</tr>
<tr>
<td>carl@donuts.com</td>
<td>00412</td>
<td>941-964-6432</td>
<td>$1834.77</td>
<td>http://gmail.com</td>
<td>1998/8/23</td>
</tr>
<tr>
<td>foo@fish.org</td>
<td>80653</td>
<td>941-964-1022</td>
<td>$260.26</td>
<td>http://samba.org</td>
<td>1991/11/24</td>
</tr>
<tr>
<td>found@fish.org</td>
<td>54635</td>
<td>941-964-6439</td>
<td>$1442.80</td>
<td>http://dotnet.ca</td>
<td>1987/7/12</td>
</tr>
<tr>
<td>found@flexomat.com</td>
<td>20953</td>
<td>941-964-5544</td>
<td>$575.42</td>
<td>http://gmail.com</td>
<td>1988/6/10</td>
</tr>
<tr>
<td>lost@aftonbladet.se</td>
<td>60810</td>
<td>941-964-8406</td>
<td>$1054.39</td>
<td>http://www.samba.org</td>
<td>1988/5/18</td>
</tr>
<tr>
<td>carl@reno.gov</td>
<td>22666</td>
<td>941-964-104</td>
<td>$373.59</td>
<td>http://www.lostnfound.org</td>
<td>1981/11/5</td>
</tr>
<tr>
<td>carl@donuts.com</td>
<td>82867</td>
<td>941-964-1031</td>
<td>$631.03</td>
<td>http://www.reno.gov</td>
<td>1985/1/22</td>
</tr>
<tr>
<td>foo@donuts.com</td>
<td>11268</td>
<td>941-964-208</td>
<td>$3730.64</td>
<td>http://aftonbladet.se</td>
<td>1989/8/4</td>
</tr>
<tr>
<td>devo@google.se</td>
<td>17059</td>
<td>941-964-2903</td>
<td>$1404.67</td>
<td>http://www.gmail.com</td>
<td>1983/4/28</td>
</tr>
<tr>
<td>muffins@flexomat.com</td>
<td>90584</td>
<td>941-964-4640</td>
<td>$3706.01</td>
<td>http://www.fish.org</td>
<td>1997/4/8</td>
</tr>
<tr>
<td>foo@samba.org</td>
<td>82966</td>
<td>941-964-7245</td>
<td>$1001.38</td>
<td>http://www.reno.gov</td>
<td>1995/11/1</td>
</tr>
<tr>
<td>foo@reno.gov</td>
<td>03603</td>
<td>941-964-8942</td>
<td>$1677.07</td>
<td>http://www.flexomat.com</td>
<td>1980/7/31</td>
</tr>
<tr>
<td>found@flexomat.com</td>
<td>84939</td>
<td>941-964-7004</td>
<td>$3916.83</td>
<td>http://www.fish.org</td>
<td>1980/8/26</td>
</tr>
<tr>
<td>henry@lostnfound.org</td>
<td>76453</td>
<td>941-964-3084</td>
<td>$3875.88</td>
<td>http://www.fish.org</td>
<td>2000/10/22</td>
</tr>
<tr>
<td>sam@aftonbladet.se</td>
<td>36274</td>
<td>941-964-7784</td>
<td>$73.43</td>
<td>http://www.dn.se</td>
<td>1994/11/11</td>
</tr>
<tr>
<td>dev@polyester.se</td>
<td>15971</td>
<td>941-964-7527</td>
<td>$1855.18</td>
<td>http://www.flexomat.com</td>
<td>1984/8/16</td>
</tr>
<tr>
<td>devo@fish.org</td>
<td>31734</td>
<td>941-964-9760</td>
<td>$3201.35</td>
<td>http://www.samba.org</td>
<td>1989/3/4</td>
</tr>
<tr>
<td>devo@reno.gov</td>
<td>52074</td>
<td>941-964-2068</td>
<td>$3035.24</td>
<td>http://www.dn.se</td>
<td>1998/2/24</td>
</tr>
<tr>
<td>mendez@fish.org</td>
<td>87800</td>
<td>941-964-7933</td>
<td>$618.59</td>
<td>http://www.dn.se</td>
<td>1989/5/28</td>
</tr>
<tr>
<td>muffins@reno.gov</td>
<td>95926</td>
<td>941-964-147</td>
<td>$3897.91</td>
<td>http://www.flexomat.com</td>
<td>2003/4/1</td>
</tr>
<tr>
<td>carl@donuts.com</td>
<td>74513</td>
<td>941-964-4507</td>
<td>$2150.68</td>
<td>http://www.fish.org</td>
<td>1987/4/8</td>
</tr>
<tr>
<td>sam@fish.org</td>
<td>82420</td>
<td>941-964-2134</td>
<td>$3947.54</td>
<td>http://mountdev.net</td>
<td>1990/11/26</td>
</tr>
<tr>
<td>devo@mountdev.net</td>
<td>81905</td>
<td>941-964-3535</td>
<td>$722.17</td>
<td>http://fish.org</td>
<td>1985/12/28</td>
</tr>
<tr>
<td>john@lostnfound.org</td>
<td>93124</td>
<td>941-964-1508</td>
<td>$394.82</td>
<td>http://www.mountdev.net</td>
<td>1989/12/10</td>
</tr>
<tr>
<td>adam@google.se</td>
<td>51938</td>
<td>941-964-5533</td>
<td>$3519.06</td>
<td>http://dotnet.ca</td>
<td>1986/6/27</td>
</tr>
<tr>
<td>carl@lostnfound.org</td>
<td>51270</td>
<td>941-964-805</td>
<td>$2101.59</td>
<td>http://flexomat.com</td>
<td>1987/10/25</td>
</tr>
<tr>
<td>muffins@dotnet.ca</td>
<td>44995</td>
<td>941-964-8299</td>
<td>$1708.57</td>
<td>http://fish.org</td>
<td>1987/9/24</td>
</tr>
<tr>
<td>adam@samba.org</td>
<td>04065</td>
<td>941-964-8643</td>
<td>$1461.31</td>
<td>http://polyester.se</td>
<td>1993/9/13</td>
</tr>
<tr>
<td>carl@donuts.com</td>
<td>01801</td>
<td>941-964-1839</td>
<td>$2434.33</td>
<td>http://www.google.se</td>
<td>1987/7/8</td>
</tr>
<tr>
<td>muffins@mountdev.net</td>
<td>49570</td>
<td>941-964-877</td>
<td>$3273.22</td>
<td>http://polyester.se</td>
<td>2000/4/23</td>
</tr>
<tr>
<td>dev@google.se</td>
<td>31947</td>
<td>941-964-3956</td>
<td>$1647.20</td>
<td>http://www.dn.se</td>
<td>2006/9/25</td>
</tr>
<tr>
<td>christian@fish.org</td>
<td>05775</td>
<td>941-964-9882</td>
<td>$3203.96</td>
<td>http://flexomat.com</td>
<td>1981/5/3</td>
</tr>
<tr>
<td>henry@mountdev.net</td>
<td>18946</td>
<td>941-964-5204</td>
<td>$3281.09</td>
<td>http://www.lostnfound.org</td>
<td>1989/9/29</td>
</tr>
<tr>
<td>carl@mountdev.net</td>
<td>39096</td>
<td>941-964-5708</td>
<td>$1788.11</td>
<td>http://www.samba.org</td>
<td>1983/2/7</td>
</tr>
<tr>
<td>sam@dn.se</td>
<td>45043</td>
<td>941-964-7175</td>
<td>$1254.08</td>
<td>http://google.se</td>
<td>1981/3/30</td>
</tr>
<tr>
<td>henry@dotnet.ca</td>
<td>41456</td>
<td>941-964-4812</td>
<td>$1779.17</td>
<td>http://mountdev.net</td>
<td>1980/9/11</td>
</tr>
<tr>
<td>christian@polyester.se</td>
<td>78584</td>
<td>941-964-6967</td>
<td>$3956.45</td>
<td>http://www.reno.gov</td>
<td>1982/7/24</td>
</tr>
<tr>
<td>muffins@flexomat.com</td>
<td>56098</td>
<td>941-964-9399</td>
<td>$558.88</td>
<td>http://www.fish.org</td>
<td>1981/3/1</td>
</tr>
<tr>
<td>muffins@gmail.com</td>
<td>92303</td>
<td>941-964-1958</td>
<td>$1094.38</td>
<td>http://www.fish.org</td>
<td>1983/1/10</td>
</tr>
<tr>
<td>christian@mountdev.net</td>
<td>96564</td>
<td>941-964-3947</td>
<td>$3593.94</td>
<td>http://www.dn.se</td>
<td>2004/11/26</td>
</tr>
<tr>
<td>lost@polyester.se</td>
<td>53352</td>
<td>941-964-7300</td>
<td>$1548.49</td>
<td>http://www.mountdev.net</td>
<td>1989/7/22</td>
</tr>
<tr>
<td>adam@flexomat.com</td>
<td>17411</td>
<td>941-964-6808</td>
<td>$3744.57</td>
<td>http://www.lostnfound.org</td>
<td>1998/4/17</td>
</tr>
<tr>
<td>john@gmail.com</td>
<td>55140</td>
<td>941-964-5592</td>
<td>$641.84</td>
<td>http://www.dn.se</td>
<td>1989/12/15</td>
</tr>
<tr>
<td>foo@google.se</td>
<td>19355</td>
<td>941-964-5290</td>
<td>$3053.28</td>
<td>http://donuts.com</td>
<td>1987/6/25</td>
</tr>
<tr>
<td>dev@dn.se</td>
<td>38729</td>
<td>941-964-1565</td>
<td>$1539.30</td>
<td>http://www.flexomat.com</td>
<td>1989/3/13</td>
</tr>
<tr>
<td>mendez@dn.se</td>
<td>22531</td>
<td>941-964-4285</td>
<td>$18.39</td>
<td>http://google.se</td>
<td>1996/8/19</td>
</tr>
<tr>
<td>found@mountdev.net</td>
<td>03979</td>
<td>941-964-3119</td>
<td>$2961.55</td>
<td>http://www.dotnet.ca</td>
<td>2005/5/27</td>
</tr>
<tr>
<td>foo@reno.gov</td>
<td>59240</td>
<td>941-964-3593</td>
<td>$3039.37</td>
<td>http://www.lostnfound.org</td>
<td>2005/8/27</td>
</tr>
<tr>
<td>dev@polyester.se</td>
<td>53160</td>
<td>941-964-8179</td>
<td>$468.97</td>
<td>http://www.samba.org</td>
<td>1988/10/23</td>
</tr>
<tr>
<td>christian@reno.gov</td>
<td>96671</td>
<td>941-964-99</td>
<td>$994.56</td>
<td>http://gmail.com</td>
<td>1984/4/22</td>
</tr>
<tr>
<td>christian@gmail.com</td>
<td>60247</td>
<td>941-964-341</td>
<td>$1358.07</td>
<td>http://www.donuts.com</td>
<td>1987/11/20</td>
</tr>
<tr>
<td>lost@dotnet.ca</td>
<td>92437</td>
<td>941-964-6495</td>
<td>$3384.20</td>
<td>http://mountdev.net</td>
<td>1982/10/14</td>
</tr>
<tr>
<td>dev@flexomat.com</td>
<td>08314</td>
<td>941-964-5549</td>
<td>$223.00</td>
<td>http://flexomat.com</td>
<td>1985/12/6</td>
</tr>
<tr>
<td>henry@lostnfound.org</td>
<td>46306</td>
<td>941-964-8496</td>
<td>$3170.19</td>
<td>http://www.dotnet.ca</td>
<td>1986/7/7</td>
</tr>
<tr>
<td>foo@mountdev.net</td>
<td>07328</td>
<td>941-964-3503</td>
<td>$2486.92</td>
<td>http://www.dn.se</td>
<td>1999/7/24</td>
</tr>
<tr>
<td>lost@flexomat.com</td>
<td>66996</td>
<td>941-964-5705</td>
<td>$3333.71</td>
<td>http://www.aftonbladet.se</td>
<td>1989/1/17</td>
</tr>
<tr>
<td>henry@donuts.com</td>
<td>83394</td>
<td>941-964-3776</td>
<td>$1808.67</td>
<td>http://dn.se</td>
<td>1981/6/14</td>
</tr>
<tr>
<td>muffins@fish.org</td>
<td>76935</td>
<td>941-964-5150</td>
<td>$403.02</td>
<td>http://www.samba.org</td>
<td>1986/7/13</td>
</tr>
</tbody>
</table>
<script src="tablefilter/tablefilter.js"></script>
<script data-config>
var tfConfig = {
base_path: 'tablefilter/',
paging: true,
alternate_rows: true,
rows_counter: true,
btn_reset: true,
loader: true,
status_bar: true,
locale: 'en-US',
col_types: [
'string', 'number', 'string',
'formatted-number', 'string', 'date'
],
// extensions: sort and column operations
extensions: [
{ name: 'sort' },
{
// minimal configuration for column operation extension
name: 'colOps',
col: [3]
}
]
};
var tf = new TableFilter('demo', tfConfig);
// subscribe to 'column-calc' event emitted whenever a calculation is
// performed on a column
tf.emitter.on(['column-calc'], calcAll);
tf.init();
/**
* Perform all calculations
* @param {Object} tf TableFilter instance
* @param {Object} colOps ColOps extension instance
* @param {Number} colIndex Column index
*/
function calcAll(tf, colOps, colIndex) {
calc(tf, colOps, colIndex, 'sum', true, 'vis-sum');
calc(tf, colOps, colIndex, 'sum', false, 'flt-sum');
calc(tf, colOps, colIndex, 'mean', true, 'vis-mean');
calc(tf, colOps, colIndex, 'mean', false, 'flt-mean');
calc(tf, colOps, colIndex, 'median', true, 'vis-median');
calc(tf, colOps, colIndex, 'median', false, 'flt-median');
calc(tf, colOps, colIndex, 'min', true, 'vis-min');
calc(tf, colOps, colIndex, 'min', false, 'flt-min');
calc(tf, colOps, colIndex, 'max', true, 'vis-max');
calc(tf, colOps, colIndex, 'max', false, 'flt-max');
}
/**
* Perform a specified calculation on a column and display result
* @param {Object} tf TableFilter instance
* @param {Object} colOps ColOps extension instance
* @param {Number} colIndex Column index
* @param {String} operation Calculation to be performed ('sum', 'mean', 'median'...)
* @param {Boolean} onlyVisible Perform calculation on only visible data as opposed to filtered data
* @param {String} labelId Id of DOM element displaying calculation result
*/
function calc(tf, colOps, colIndex, operation, onlyVisible, labelId) {
/** getFilteredDataCol accepts in order of appearance:
- a column index
- an optional boolean indicating whether the returned dataset also includes the colunm header
- an optional boolean indicating whether the returned dataset should return numbers (string by default)
- an optional array of row indexes to be excluded from the returned dataset
- an optional boolean indicating whether the returned dataset should only include filtered and
visible data (true by default) or filtered only (paging can contain filtered data which is not visible)
Refer to: http://koalyptus.github.io/TableFilter/docs/class/src/tablefilter.js~TableFilter.html#instance-method-getFilteredDataCol
*/
var colValues = tf.getFilteredDataCol(colIndex, false, true, [], onlyVisible);
var result = 0;
// Refer to ColOps API to perform desired calculations
// http://koalyptus.github.io/TableFilter/docs/class/src/extensions/colOps/colOps.js~ColOps.html
if(operation === 'sum') {
result = colOps.calcSum(colValues);
}
else if(operation === 'mean') {
result = colOps.calcMean(colValues) || 0;
}
else if(operation === 'median') {
result = colOps.calcMedian(colValues) || 0;
}
else if(operation === 'min') {
let calc = colOps.calcMin(colValues);
result = isFinite(calc) ? calc : 0;
}
else if(operation === 'max') {
let calc = colOps.calcMax(colValues);
result = isFinite(calc) ? calc : 0;
}
// display result
document.getElementById(labelId).innerHTML = result.toFixed(2);
}
</script>
<hr>
<ul class="nav nav-pills">
<li class="active">
<a data-toggle="tab" href="#js">JS</a>
</li>
<li>
<a data-toggle="tab" href="#html">HTML</a>
</li>
<li>
<a data-toggle="tab" href="#css">CSS</a>
</li>
</ul>
<div class="tab-content">
<div id="js" class="tab-pane fade in active">
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
<pre class="js">
<code class="javascript"></code>
</pre>
<script src="assets/js/js-code-in-pre.js"></script>
<!-- -->
</div>
<div id="html" class="tab-pane fade">
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
<pre class="html">
<code class="xml"></code>
</pre>
<script src="assets/js/html-code-in-pre.js"></script>
<!-- -->
</div>
<div id="css" class="tab-pane fade">
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
<pre class="css">
<code class="css"></code>
</pre>
<script src="assets/js/css-code-in-pre.js"></script>
<!-- -->
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-bottom">
<div class="container">
<ul class="nav navbar-nav">
<li>
<a href="https://github.com/koalyptus/TableFilter">Repo</a>
</li>
<li>
<a href="https://github.com/koalyptus/TableFilter/wiki">Wiki</a>
</li>
<li>
<a href="http://koalyptus.github.io/TableFilter/docs" target="_blank">Docs</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="maxgug@hotmail.com">
<input type="hidden" name="lc" value="BM">
<input type="hidden" name="item_name" value="TableFilter">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHosted">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
</p>
</li>
<li>
<a href="https://flattr.com/submit/auto?user_id=koalyptus&
url=https%3A%2F%2Fgithub.com%2Fkoalyptus%2FTablefilter">
<img src="https://api.flattr.com/button/flattr-badge-large.png"
alt="TableFilter - A Javascript library making HTML tables filterable
and a bit more" />
</a>
</li>
</ul>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/github-fork-me.js"></script>
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
<link rel="stylesheet" href="assets/js/highlight/styles/monokai-sublime.css">
<script src="assets/js/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- -->
<script type="text/javascript"
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=maxgug"
async="async"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68429903-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink