Parser: add named number parser & demo

This commit is contained in:
Mottie 2014-10-04 23:06:30 -05:00
parent 3058060a63
commit 7ceb69056b
3 changed files with 278 additions and 0 deletions

View File

@ -0,0 +1,156 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter - Named Numbers 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: 50%; }
</style>
<link href="../css/theme.blue.css" rel="stylesheet">
<script src="../js/jquery.tablesorter.js"></script>
<!-- load metric parser -->
<script src="../js/parsers/parser-named-numbers.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>Named Numbers 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>This parser will convert named numbers into appropriate values so they are sorted correctly.</li>
<li>Named numbers include values:
<ul>
<li>zero to twenty; by one ("one", "two", "three", ..., "nineteen", "twenty")</li>
<li>twenty to hundred; by ten ("twenty", "thirty", "forty", ... "ninety", "hundred")</li>
<li>thousand (1e3) to duotrigintillion (1e99); by 10^(3n+3) value ("thousand", "million", "billion", ... "untrigintillion", "duotrigintillion")</li>
<li>googl (1e100)</li>
</ul>
</li>
<li>Even bigger named values will need to be manually added to the parser code; see <a href="http://en.wikipedia.org/wiki/Names_of_large_numbers">this wikipedia page</a> for more names.</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-namedNumbers">Numbers</th>
<th class="sorter-namedNumbers">Large Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>5 hundred</td>
<td>one hundred and fifty two million</td>
</tr>
<tr>
<td>four hundred thousand five hundred fourty three</td>
<td>710,231,000</td>
</tr>
<tr>
<td>one hundred and fifty five</td>
<td>10 million three hundred sixty five thousand four hundred and ninety one</td>
</tr>
<tr>
<td>negative twelve</td>
<td>10 million and three</td>
</tr>
<tr>
<td>minus three hundred and fifty seven thousand four hundred and two</td>
<td>6 billion eight thousand</td>
</tr>
<tr>
<td>zero</td>
<td>3 hundred quadrillion</td>
</tr>
<tr>
<td>three hundred twenty</td>
<td>145 decillion</td>
</tr>
<tr>
<td>forty-two</td>
<td>700 thousand</td>
</tr>
<tr>
<td>ninety-nine thousand nine hundred and ninety-nine</td>
<td>2.3 million</td>
</tr>
<tr>
<td>2.3 thousand</td>
<td>2.3 googl</td>
</tr>
<tr>
<td>minus one</td>
<td>8 hundred thousand</td>
</tr>
<tr>
<td>seven hundred fifty two</td>
<td>9 hundred-million</td>
</tr>
<tr>
<td>one hundred and thirty-three</td>
<td>Twenty-three trillion</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-named-numbers.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>
<script>
$(function(){
// add parsed values to columns [0,1]
addParsedValues($('table'), [0,1]);
});
</script>
</body>
</html>

View File

@ -530,6 +530,7 @@
<li><a href="example-widget-grouping.html">Input/select parsers</a> (used by Grouping rows widget) (<span class="version">v2.8</span>; <span class="version updated">v2.17.5</span>).</li>
<li><a href="example-parsers-feet-inch-fraction.html">Feet-inch-fraction parser</a> (<span class="version">v2.8</span>).</li>
<li><a href="example-parsers-metric.html">Metric parser</a> (<span class="version">v2.8</span>).</li>
<li><a href="example-parsers-named-numbers.html">Named Numbers parser</a> (<span class="version">v2.18.0</span>).</li>
<li><a href="example-parsers-ip-address.html">Network (IPv4, IPv6 and MAC address parser</a> (<span class="version">v2.12</span>; <span class="version updated">v2.18.0</span>).</li>
<li><a href="example-parsers-roman.html">Roman Numeral parser</a> (<span class="version">v2.17.3</span>).</li>
<li><a href="example-option-textsorter-semver.html">Semantic Versioning (Semver) sorting</a> (<span class="version">v2.14.3</span>).</li>

View File

@ -0,0 +1,121 @@
/*! Named Numbers Parser
* code modified from http://stackoverflow.com/a/12014376/145346
*/
/*jshint jquery:true */
;(function($){
"use strict";
// Change language of the named numbers as needed
var named = {
negative: [ 'negative', 'minus' ],
numbers : {
'zero' : 0,
'one' : 1,
'two' : 2,
'three' : 3,
'four' : 4,
'five' : 5,
'six' : 6,
'seven' : 7,
'eight' : 8,
'nine' : 9,
'ten' : 10,
'eleven' : 11,
'twelve' : 12,
'thirteen' : 13,
'fourteen' : 14,
'fifteen' : 15,
'sixteen' : 16,
'seventeen' : 17,
'eighteen' : 18,
'nineteen' : 19,
'twenty' : 20,
'thirty' : 30,
'forty' : 40,
'fourty' : 40, // common misspelling
'fifty' : 50,
'sixty' : 60,
'seventy' : 70,
'eighty' : 80,
'ninety' : 90
},
// special case
hundred : 'hundred',
// multiples
powers : {
'thousand' : 1e3,
'million' : 1e6,
'billion' : 1e9,
'trillion' : 1e12,
'quadrillion' : 1e15,
'quintillion' : 1e18,
'sextillion' : 1e21,
'septillion' : 1e24,
'octillion' : 1e27,
'nonillion' : 1e30,
'decillion' : 1e33,
'undecillion' : 1e36,
'duodecillion' : 1e39,
'tredecillion' : 1e42,
'quattuordecillion' : 1e45,
'quindecillion' : 1e48,
'sexdecillion' : 1e51,
'septendecillion' : 1e54,
'octodecillion' : 1e57,
'novemdecillion' : 1e60,
'vigintillion' : 1e63,
'unvigintillion' : 1e66,
'duovigintillion' : 1e69,
'trevigintillion' : 1e72,
'quattuorvigintillion' : 1e75,
'quinvigintillion' : 1e78,
'sexvigintillion' : 1e81,
'septenvigintillion' : 1e84,
'octovigintillion' : 1e87,
'novemvigintillion' : 1e90,
'trigintillion' : 1e93,
'untrigintillion' : 1e96,
'duotrigintillion' : 1e99,
'googl' : 1e100
}
},
result, group,
negativeRegex = new RegExp('(' + named.negative.join('|') + ')'),
calc = function ( word, table ) {
var num = named.numbers.hasOwnProperty( word ) ? named.numbers[ word ] : null,
power = named.powers.hasOwnProperty( word ) ? named.powers[ word ] : null;
if ( !num && !isNaN( word ) ) {
num = $.tablesorter.formatFloat( word || '', table );
}
if ( num !== null ) {
group += num;
} else if ( word === named.hundred ) {
group *= 100;
} else if ( power !== null ) {
result += group * power;
group = 0;
}
};
$.tablesorter.addParser({
id: "namedNumbers",
is: function () {
return false;
},
format: function ( str, table ) {
result = 0;
group = 0;
var indx,
arry = ( str || '' ).split( /[\s-]+/ ),
len = arry.length;
for ( indx = 0; indx < len; indx++ ) {
calc( arry[ indx ].toLowerCase(), table );
}
result = ( result + group ) * ( str.match( negativeRegex ) ? -1 : 1 );
// make sure to let zero get parsed, so check hasOwnProperty
return result || named.numbers.hasOwnProperty( str ) ? result : $.tablesorter.formatFloat( str || '', table );
},
type: "numeric"
});
})( jQuery );