1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter - Metric Parser</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<style>
th { width: 20%; }
</style>
<link href="../css/theme.blue.css" rel="stylesheet">
<script src="../js/jquery.tablesorter.js"></script>
<!-- load metric parser -->
<script src="../js/parsers/parser-metric.js"></script>
<script id="js">$(function() {
$("table").tablesorter({
theme : 'blue',
widgets : ["zebra"]
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Metric parser</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>
</p>
<ul>
<li>In <span class="version update">v2.22.2</span>,
<ul>
<li>Added header data-attribute <code>data-metric-name-full</code> which will contain the full base unit name, e.g. <code>"byte|Byte|BYTE"</code>. This change should allow for different capitalizations of the base unit name.</li>
<li>Added header data-attribute <code>data-metric-name-abbr</code> which will contain the abbreviated base unit name, e.g. <code>"b|B"</code>. This change also should allow for different capitalizations of the base unit name.</li>
<li>Each name is separated by a pipe, or vertical bar, ("<code>|</code>") without spaces, because it will eventually be used in a regular expression - the vertical bar signifies an "OR" operator.</li>
<li>When using these new data-attributes, the value in <code>data-metric-name</code> (now deprecated) will be ignored; eventually <code>data-metric-name</code> support will be removed.</li>
<li>These additions were made because of <em>common misuse</em> of abbreviated capitalization in the metric units, i.e. "kB" versus "kb". The lower case "b" is for "bit", and upper case "B" is for "byte". I am guilty of this too!</li>
</ul>
</li>
<li>This parser will convert numbers with metric prefixes ("Mega", "Giga", etc) into appropriate values so they are sorted correctly.</li>
<li>The base name must be included in the header:
<ul>
<li>The base is the unit of measure, such as "byte", "meter", "liter", etc.</li>
<li><span class="label alert">deprecated</span> When saving the base, include both the abbreviation and full name of the base separated by a vertical bar (shift-\) <code>b|byte</code>.</li>
<li><span class="label alert">deprecated</span> Store this information within the header's data-attribute (<code>data-metric-name="b|byte"</code>) - this data-attribute should be considered deprecated as of v2.22.2, use <code>data-metric-name-full</code> & <code>data-metric-name-abbr</code> instead.</li>
<li>If no base information is found, it will default to <code>m|meter</code>.</li>
</ul>
</li>
<li>Because metric prefixes can be applied to binary values, the parser will calculate the cached value based on the binary multiple, i.e. <code>"1 kB"</code> is actually <code>"1024 bytes"</code>. See <a href="http://en.wikipedia.org/wiki/Unit_prefix#Binary_prefixes">this article</a> for more details.</li>
<li>This parser does not (yet) support the IEC recommendations for binary prefixes (i.e. "kibibyte (KiB)", "mebibyte (MiB)", etc).</li>
<li>Supported prefixes include: Yotta (10<sup>24</sup>), Zetta (10<sup>21</sup>), Exa (10<sup>18</sup>), Peta (10<sup>15</sup>), Tera (10<sup>12</sup>), Giga (10<sup>9</sup>), Mega (10<sup>6</sup>), kilo (10<sup>3</sup>), hecto (10<sup>2</sup>), deka (10<sup>1</sup>), deci (10<sup>-1</sup>), centi (10<sup>-2</sup>), milli (10<sup>-3</sup>), micro (10<sup>-6</sup>), nano (10<sup>-9</sup>), pico (10<sup>-12</sup>), femto (10<sup>-15</sup>), atto (10<sup>-18</sup>), zepto (10<sup>-21</sup>) and yocto (10<sup>-24</sup>).</li>
<li>This demo includes the stored metric values within the table cells, toggle the view using the button below.</li>
</ul>
<h1>Demo</h1>
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th class="sorter-metric" data-metric-name-full="byte|Byte|BYTE" data-metric-name-abbr="b|B">Metric (binary) Size</th>
<!-- "data-metric-name" is deprecated in v2.22.2, use "data-metric-name-full" and "data-metric-name-abbr" instead -->
<th class="sorter-metric" data-metric-name="m|meter">Metric Length</th>
</tr>
</thead>
<tbody>
<tr><td>1 byte</td><td>1 nm</td></tr>
<tr><td>1 kB</td><td>1 kilometer</td></tr>
<tr><td>1 Gigabyte</td><td>1 Gm</td></tr>
<tr><td>10 MB</td><td>1 Tm</td></tr>
<tr><td>1 MB</td><td>1,000 mm</td></tr>
<tr><td>1 TB</td><td>1 meter</td></tr>
<tr><td>1 Petabyte</td><td>1 hm</td></tr>
<tr><td>1 ZB</td><td>1 dam</td></tr>
<tr><td>1 ZettaB</td><td>1 millimeter</td></tr>
<tr><td>1,025 MB</td><td>1 Mm</td></tr>
<tr><td>1,000 kilobytes</td><td>1 dm</td></tr>
<tr><td>1 EB</td><td>1 µm</td></tr>
<tr><td>1023 MB</td><td>1 pm</td></tr>
</tbody>
</table></div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
<link rel="stylesheet" href="../css/theme.blue.css">
<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>
<!-- load metric parser -->
<script src="../js/parsers/parser-metric.js"></script></pre>
</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 class="next-up">
<hr />
Next up: <a href="example-widget-filter.html">Applying the filter widget ››</a>
</div>
</div>
<script>
$(function() {
// add parsed values to columns [0,1]
addParsedValues($('table'), [0,1], function(num) { return num.toExponential(); });
});
</script>
</body>
</html>
|
