mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Parser: Globalize parser now allows a different language per column
This commit is contained in:
Rob Garrison
parent
612c76e5ee
commit
7fa7907953
297
docs/example-parsers-globalize.html
Normal file
297
docs/example-parsers-globalize.html
Normal file
@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Parsers Globalize</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>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/parsers/parser-globalize.js"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/event.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/supplemental.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/unresolved.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/number.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/date.js"></script>
|
||||
|
||||
<script id="js">$(function () {
|
||||
|
||||
// data loaded from CLDR (https://github.com/unicode-cldr)
|
||||
Globalize.load(data);
|
||||
// set up Globalize language per column (only using "en" {English} in this demo)
|
||||
var en = Globalize('en');
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
// globalize options
|
||||
globalize: {
|
||||
1: { lang : en },
|
||||
3: { lang : en, raw: 'MMM d, y G' }
|
||||
},
|
||||
headers: {
|
||||
1: { sorter: 'globalize-number' },
|
||||
3: { sorter: 'globalize-date' }
|
||||
}
|
||||
});
|
||||
|
||||
// *** FOR DEMO ONLY ***
|
||||
// add parsed values to Globalize numeric & date columns
|
||||
addParsedValues( $( 'table' ), [ 1, 3 ] );
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
/* only a small portion of the CLDR JavaScript Library
|
||||
(https://github.com/unicode-cldr) is included below */
|
||||
var data = {
|
||||
"main": {
|
||||
"en": {
|
||||
"identity": {
|
||||
"version": {
|
||||
"_cldrVersion": "25",
|
||||
"_number": "$Revision: 91 $"
|
||||
},
|
||||
"generation": {
|
||||
"_date": "$Date: 2014-03-13 22:27:12 -0500 (Thu, 13 Mar 2014) $"
|
||||
},
|
||||
"language": "en"
|
||||
},
|
||||
"dates": {
|
||||
"calendars": {
|
||||
"gregorian": {
|
||||
"months": {
|
||||
"format": {
|
||||
"abbreviated": {
|
||||
"1": "Jan",
|
||||
"2": "Feb",
|
||||
"3": "Mar",
|
||||
"4": "Apr",
|
||||
"5": "May",
|
||||
"6": "Jun",
|
||||
"7": "Jul",
|
||||
"8": "Aug",
|
||||
"9": "Sep",
|
||||
"10": "Oct",
|
||||
"11": "Nov",
|
||||
"12": "Dec"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dayPeriods": {
|
||||
"format": {
|
||||
"wide": {
|
||||
"am": "AM",
|
||||
"am-alt-variant": "am",
|
||||
"noon": "noon",
|
||||
"pm": "PM",
|
||||
"pm-alt-variant": "pm"
|
||||
}
|
||||
}
|
||||
},
|
||||
"eras": {
|
||||
"eraAbbr": {
|
||||
"0": "BC",
|
||||
"0-alt-variant": "BCE",
|
||||
"1": "AD",
|
||||
"1-alt-variant": "CE"
|
||||
}
|
||||
},
|
||||
"dateFormats": {
|
||||
"medium": "MMM d, y"
|
||||
},
|
||||
"timeFormats": {
|
||||
"medium": "h:mm:ss a",
|
||||
},
|
||||
"dateTimeFormats": {
|
||||
"medium": "{1}, {0}",
|
||||
"availableFormats": {
|
||||
"E": "ccc",
|
||||
"EHm": "E HH:mm",
|
||||
"EHms": "E HH:mm:ss",
|
||||
"Ed": "d E",
|
||||
"Ehm": "E h:mm a",
|
||||
"Ehms": "E h:mm:ss a",
|
||||
"Gy": "y G",
|
||||
"GyMMM": "MMM y G",
|
||||
"GyMMMEd": "E, MMM d, y G",
|
||||
"GyMMMd": "MMM d, y G",
|
||||
"H": "HH",
|
||||
"Hm": "HH:mm",
|
||||
"Hms": "HH:mm:ss",
|
||||
"M": "L",
|
||||
"MEd": "E, M/d",
|
||||
"MMM": "LLL",
|
||||
"MMMEd": "E, MMM d",
|
||||
"MMMd": "MMM d",
|
||||
"Md": "M/d",
|
||||
"d": "d",
|
||||
"h": "h a",
|
||||
"hm": "h:mm a",
|
||||
"hms": "h:mm:ss a",
|
||||
"ms": "mm:ss",
|
||||
"y": "y",
|
||||
"yM": "M/y",
|
||||
"yMEd": "E, M/d/y",
|
||||
"yMMM": "MMM y",
|
||||
"yMMMEd": "E, MMM d, y",
|
||||
"yMMMd": "MMM d, y",
|
||||
"yMd": "M/d/y",
|
||||
"yQQQ": "QQQ y",
|
||||
"yQQQQ": "QQQQ y"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"fields": {
|
||||
"second": {
|
||||
"displayName": "Second",
|
||||
"relative-type-0": "now",
|
||||
"relativeTime-type-future": {
|
||||
"relativeTimePattern-count-one": "in {0} second",
|
||||
"relativeTimePattern-count-other": "in {0} seconds"
|
||||
},
|
||||
"relativeTime-type-past": {
|
||||
"relativeTimePattern-count-one": "{0} second ago",
|
||||
"relativeTimePattern-count-other": "{0} seconds ago"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"numbers": {
|
||||
"currencies": {
|
||||
"USD": {
|
||||
"symbol": "$"
|
||||
}
|
||||
},
|
||||
"defaultNumberingSystem": "latn",
|
||||
"symbols-numberSystem-latn": {
|
||||
"decimal": ".",
|
||||
"exponential": "E",
|
||||
"group": ",",
|
||||
"infinity": "∞",
|
||||
"minusSign": "-",
|
||||
"nan": "NaN",
|
||||
"percentSign": "%",
|
||||
"perMille": "‰",
|
||||
"plusSign": "+",
|
||||
"timeSeparator": ":"
|
||||
},
|
||||
"decimalFormats-numberSystem-latn": {
|
||||
"standard": "#,##0.###"
|
||||
},
|
||||
"currencyFormats-numberSystem-latn": {
|
||||
"currencySpacing": {
|
||||
"beforeCurrency": {
|
||||
"currencyMatch": "[:^S:]",
|
||||
"surroundingMatch": "[:digit:]",
|
||||
"insertBetween": " "
|
||||
},
|
||||
"afterCurrency": {
|
||||
"currencyMatch": "[:^S:]",
|
||||
"surroundingMatch": "[:digit:]",
|
||||
"insertBetween": " "
|
||||
}
|
||||
},
|
||||
"standard": "¤#,##0.00"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"supplemental": {
|
||||
"version": {
|
||||
"_cldrVersion": "25",
|
||||
"_number": "$Revision: 91 $"
|
||||
},
|
||||
"currencyData": {
|
||||
"fractions": {
|
||||
"DEFAULT": {
|
||||
"_rounding": "0",
|
||||
"_digits": "2"
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeData": {
|
||||
"001": {
|
||||
"_allowed": "H h",
|
||||
"_preferred": "H"
|
||||
}
|
||||
},
|
||||
"likelySubtags": {
|
||||
"en": "en-Latn-US",
|
||||
},
|
||||
"plurals-type-cardinal": {
|
||||
"en": {
|
||||
"pluralRule-count-one": "i = 1 and v = 0 @integer 1",
|
||||
"pluralRule-count-other": " @integer 0, 2~16, 100, 1000, 10000, 100000, 1000000, … @decimal 0.0~1.5, 10.0, 100.0, 1000.0, 10000.0, 100000.0, 1000000.0, …"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Parsers Globalize</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><a href="https://github.com/jquery/globalize">jQuery Globalize</a> supports the parsing of locale specific data, including <a href="https://github.com/jquery/globalize/blob/master/doc/api/number/number-parser.md">numerous number formats</a> (including Arabic, Chinese & Japanese) and <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-parser.md">custom date formats</a>.</li>
|
||||
<li>This is a very basic example using English only. For more details on how to set up Globalize, see the <a href="example-widget-grouping.html#globalization">Grouping widget documentation about Globalization</a>.</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>AlphaNumeric</th><th>Numeric (Globalize)</th><th>Animals</th><th>Date (Globalize)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>abc 123</td><td>12,735.00</td><td>Koala</td><td>Jan 22, 2015 AD</td></tr>
|
||||
<tr><td>abc 1</td><td>65.34</td><td>Ox</td><td>Mar 30, 2015 AD</td></tr>
|
||||
<tr><td>abc 9</td><td>∞</td><td>Girafee</td><td>Dec 31, 2014 AD</td></tr>
|
||||
<tr><td>zyx 24</td><td>-∞</td><td>Bison</td><td>Apr 13, 2015 AD</td></tr>
|
||||
<tr><td>abc 11</td><td>0.44</td><td>Chimp</td><td>Oct 31, 2015 AD</td></tr>
|
||||
<tr><td>abc 2</td><td>5.6</td><td>Elephant</td><td>May 3, 2015 AD</td></tr>
|
||||
<tr><td>abc 9</td><td>1,345,155</td><td>Lion</td><td>Jun 30, 2014 AD</td></tr>
|
||||
<tr><td>ABC 10</td><td>2,875.33</td><td>Zebra</td><td>Feb 14, 2015 AD</td></tr>
|
||||
<tr><td>zyx 1</td><td>99.9</td><td>Koala</td><td>Mar 20, 2015 AD</td></tr>
|
||||
<tr><td>zyx 12</td><td>1.2</td><td>Llama</td><td>Mar 2, 2015 AD</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -522,7 +522,7 @@
|
||||
<li><a href="example-parsers-file-type.html">File type parser</a> (<span class="version">v2.13</span>).</li>
|
||||
<li><a href="example-parsers-ignore-articles.html">Ignore leading articles parser</a> (Ignore "A", "An" and "The" in titles) (<span class="version">v2.8</span>).</li>
|
||||
<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.23.0</span>).</li>
|
||||
<li><a href="http://jsfiddle.net/Mottie/0j18Lw8r/">jQuery Globalize</a> (number & date parsers; <span class="version">v2.22.0</span>).</li>
|
||||
<li><a href="example-parsers-globalize.html">jQuery Globalize</a> (number & date parsers; <span class="version">v2.22.0</span>; <span class="version updated">v2.23.6</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>; <span class="version updated">v2.22.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.22.0</span>).</li>
|
||||
|
||||
@ -1,24 +1,27 @@
|
||||
/*! Parser: jQuery Globalize - updated 5/17/2015 (v2.22.0) */
|
||||
/*! Parser: jQuery Globalize - updated 10/26/2015 (v2.23.6) */
|
||||
/* Extract localized data using jQuery's Globalize parsers; set
|
||||
Globalize.locale( 'xx' ) prior to initializing tablesorter! */
|
||||
Globalize.locale( 'xx' ) in the globalize settings */
|
||||
/*jshint jquery:true */
|
||||
/*global Globalize:false */
|
||||
;( function( $ ) {
|
||||
'use strict';
|
||||
|
||||
/*! jQuery Globalize date parser (https://github.com/jquery/globalize#date-module) */
|
||||
/* demo: http://jsfiddle.net/Mottie/0j18Lw8r/ */
|
||||
$.tablesorter.addParser({
|
||||
id: 'globalize-date',
|
||||
is: function () {
|
||||
return false;
|
||||
},
|
||||
format: function ( str, table, cell, cellIndex ) {
|
||||
var c = table.config,
|
||||
var globalize, date,
|
||||
c = table.config,
|
||||
// add options to 'config.globalize' for all columns --> globalize : { skeleton: 'GyMMMd' }
|
||||
// or per column by using the column index --> globalize : { 0 : { datetime: 'medium' } }
|
||||
options = c.globalize && ( c.globalize[ cellIndex ] || c.globalize ) || {},
|
||||
date = Globalize && Globalize.dateParser ? Globalize.dateParser( options )( str ) :
|
||||
options = c.globalize && ( c.globalize[ cellIndex ] || c.globalize ) || {};
|
||||
if ( Globalize ) {
|
||||
globalize = typeof options.lang === 'object' ? options.lang : Globalize( options.lang || 'en' );
|
||||
}
|
||||
date = globalize && globalize.dateParser ? globalize.dateParser( options )( str ) :
|
||||
str ? new Date( str ) : str;
|
||||
return date instanceof Date && isFinite( date ) ? date.getTime() : str;
|
||||
},
|
||||
@ -26,18 +29,21 @@
|
||||
});
|
||||
|
||||
/*! jQuery Globalize number parser (https://github.com/jquery/globalize#number-module) */
|
||||
/* demo: http://jsfiddle.net/Mottie/0j18Lw8r/ */
|
||||
$.tablesorter.addParser({
|
||||
id: 'globalize-number',
|
||||
is: function () {
|
||||
return false;
|
||||
},
|
||||
format: function ( str, table, cell, cellIndex ) {
|
||||
var c = table.config,
|
||||
var globalize, num,
|
||||
c = table.config,
|
||||
// add options to 'config.globalize' for all columns --> globalize : { skeleton: 'GyMMMd' }
|
||||
// or per column by using the column index --> globalize : { 0 : { datetime: 'medium' } }
|
||||
options = c.globalize && ( c.globalize[ cellIndex ] || c.globalize ) || {},
|
||||
num = Globalize && Globalize.numberParser ? Globalize.numberParser( options )( str ) :
|
||||
options = c.globalize && ( c.globalize[ cellIndex ] || c.globalize ) || {};
|
||||
if ( Globalize ) {
|
||||
globalize = typeof options.lang === 'object' ? options.lang : Globalize( options.lang || 'en' );
|
||||
}
|
||||
num = globalize && globalize.numberParser ? globalize.numberParser( options )( str ) :
|
||||
str ? $.tablesorter.formatFloat( ( str || '' ).replace( /[^\w,. \-()]/g, '' ), table ) : str;
|
||||
return str && typeof num === 'number' ? num : str;
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user