tablesorter/docs/example-parsers-metric.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
	<title>jQuery plugin: 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>
		<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> &amp; <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>
	<p>

	<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">&lt;!-- blue theme stylesheet with additional css styles added in v2.0.17 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.blue.css&quot;&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;

&lt;!-- load metric parser --&gt;
&lt;script src=&quot;../js/parsers/parser-metric.js&quot;&gt;&lt;/script&gt;</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 &rsaquo;&rsaquo;</a>
</div>

</div>

<script>
$(function(){
	// add parsed values to columns [0,1]
	addParsedValues($('table'), [0,1], function(num){ return num.toExponential(); });
});
</script>

</body>
</html>
code cleanup & metric demo 2013-03-26 21:16:13 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<meta charset="utf-8">`
			`<title>jQuery plugin: Tablesorter - Metric Parser</title>`

			`<!-- jQuery -->`
Docs: switch from CDN to local files (prevents https conflicts) & cleanup 2014-05-21 22:09:23 +00:00			`<script src="js/jquery-latest.min.js"></script>`
code cleanup & metric demo 2013-03-26 21:16:13 +00:00
			`<!-- 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>`
			`<ul>`
Parser: support metric base unit case insensitivity 2015-06-17 21:38:27 +00:00			`<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>`
code cleanup & metric demo 2013-03-26 21:16:13 +00:00			`<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>`
Parser: support metric base unit case insensitivity 2015-06-17 21:38:27 +00:00			`<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>`
code cleanup & metric demo 2013-03-26 21:16:13 +00:00			`<li>If no base information is found, it will default to <code>m\|meter</code>.</li>`
			`</ul>`
			`</li>`
Parser: support metric base unit case insensitivity 2015-06-17 21:38:27 +00:00			`<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>`
code cleanup & metric demo 2013-03-26 21:16:13 +00:00			<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>`
Docs: fix a bunch of minor HTML problems 2014-07-18 01:42:01 +00:00			`<p>`
code cleanup & metric demo 2013-03-26 21:16:13 +00:00
			`<h1>Demo</h1>`
added button type and return false to prevent IE form submit; see issue #285 2013-05-16 15:25:14 +00:00			`<button type="button" class="toggleparsedvalue">Toggle parsed values</button>`
code cleanup & metric demo 2013-03-26 21:16:13 +00:00			`<div id="demo"><table class="tablesorter">`
Parser: support metric base unit case insensitivity 2015-06-17 21:38:27 +00:00			`<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>`
code cleanup & metric demo 2013-03-26 21:16:13 +00:00			`</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 -->`
Docs: fix a bunch of minor HTML problems 2014-07-18 01:42:01 +00:00			`<script src="../js/parsers/parser-metric.js"></script></pre>`
code cleanup & metric demo 2013-03-26 21:16:13 +00:00			`</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 &rsaquo;&rsaquo;</a>`
			`</div>`

			`</div>`

			`<script>`
			`$(function(){`
more parser demos & cleanup 2013-03-27 23:13:44 +00:00			`// add parsed values to columns [0,1]`
			`addParsedValues($('table'), [0,1], function(num){ return num.toExponential(); });`
code cleanup & metric demo 2013-03-26 21:16:13 +00:00			`});`
			`</script>`

			`</body>`
			`</html>`