New: Plug-ins for sorting and rendering using the Javascript Intl APIs

8 years ago · cf2b89baef
parent 6193c68dd5
commit cf2b89baef
2 changed files with 233 additions and 0 deletions
--- a/dataRender/intl.js
+++ b/dataRender/intl.js
@ -0,0 +1,147 @@
+/**
+ * Rendering methods using the Javascript Intl API. This is supported by IE11,
+ * Edge, Chrome, Firefox and Safari 10+. Any browser that does not support the
+ * Intl will simply show the unformatted data to the end user.
+ *
+ * The great advantage of using these methods is that your table's data will
+ * automatically be shown to your end user formatted for their locale. For
+ * example a date might be formatted as "m/d/yyyy" in the US, while in France
+ * it would show as "dd/mm/yyyy".
+ *
+ * Two rendering methods are available:
+ *
+ * * `intlNumber` which will format numbers.
+ * * `intlDateTime` which formats date times.
+ *
+ * Both optionally takes two arguments:
+ *
+ * 1. [Optional] Locale or array of locales
+ * 2. [Optional] Formatter options
+ *
+ * For the supported options please see the MDN documentation for
+ * [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) and
+ * [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat).
+ *
+ *  @name intl
+ *  @summary Use the Intl Javascript API to render dates and numbers
+ *  @author [Allan Jardine](http://datatables.net)
+ *  @requires DataTables 1.10+
+ *
+ *  @example
+ *    // Number renderer - using the `columns.render` option:
+ *    render: $.fn.dataTable.render.intlNumber()
+ *
+ *  @example
+ *    // Number renderer - with specified locale:
+ *    render: $.fn.dataTable.render.intlNumber('de')
+ *
+ *  @example
+ *    // Number renderer - with specified locale and options:
+ *    render: $.fn.dataTable.render.intlNumber('de', {
+ *      style: 'currency',
+ *      currency: 'USD'
+ *    } )
+ *
+ * 
+ *  @example
+ *    // Date time renderer - using the `columns.render` option:
+ *    render: $.fn.dataTable.render.intlDateTime()
+ *
+ *  @example
+ *    // Date time renderer - with specified locale:
+ *    render: $.fn.dataTable.render.intlDateTime('en-US')
+ *
+ *  @example
+ *    // Date time renderer - with specified locale and options:
+ *    render: $.fn.dataTable.render.intlDateTime('de', {
+ *      weekday: 'long'
+ *    } )
+ *  
+ */
+
+// UMD
+(function( factory ) {
+	"use strict";
+
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		module.exports = function (root, $) {
+			if ( ! root ) {
+				root = window;
+			}
+
+			if ( ! $ ) {
+				$ = typeof window !== 'undefined' ?
+					require('jquery') :
+					require('jquery')( root );
+			}
+
+			return factory( $, root, root.document );
+		};
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}
+(function( $, window, document ) {
+
+
+$.fn.dataTable.render.intlNumber = function ( locale, options ) {
+	if ( window.Intl ) {
+		var formatter = new Intl.NumberFormat( locale, options );
+
+		return function ( d, type ) {
+			if ( type === 'display' ) {
+				return formatter.format( d );
+			}
+			else if ( type === 'filter' ) {
+				return d +' '+ formatter.format( d );
+			}
+			return d;
+		};
+	}
+	else {
+		return function ( d ) {
+			return d;
+		};
+	}
+};
+
+
+$.fn.dataTable.render.intlDateTime = function ( locale, options ) {
+	if ( window.Intl ) {
+		var formatter = new Intl.DateTimeFormat( locale, options );
+
+		return function ( data, type ) {
+			var date;
+
+			if ( typeof data === 'string' ) {
+				date = Date.parse( data );
+			}
+			else if ( d instanceof Date ) {
+				date = data;
+			}
+
+			if ( isNaN( date ) || type === 'type' || type === 'sort' ) {
+				return data;
+			}
+
+			return formatter.format( date );
+		};
+	}
+	else {
+		return function ( d ) {
+			return d;
+		};
+	}
+};
+
+
+}));
--- a/sorting/intl.js
+++ b/sorting/intl.js
@ -0,0 +1,86 @@
+/**
+ * This sorting type will replace DataTables' default string sort with one that
+ * will use a locale aware collator. This is supported by IE11, Edge, Chrome,
+ * Firefox and Safari 10+. Any browser that does not support the Intl will
+ * simply fall back to UTF8 string sorting.
+ *
+ * This method simply needs to be called prior to the DataTables' initialisation
+ * to replace the default string sort with locale aware sorting. The method
+ * optionally takes two arguments:
+ *
+ * 1. [Optional] Locale or array of locales
+ * 2. [Optional] Collator options
+ *
+ * For the supported options please see the
+ * [MDN Intl documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator).
+ *
+ * @name intl
+ * @summary Sort string data using the Intl Javascript API
+ * @author [Allan Jardine](//datatables.net)
+ * @depends DataTables 1.10+
+ *
+ * @example
+ *    // Host's current locale
+ *    $.fn.dataTable.ext.order.intl();
+ *
+ * @example
+ *    // Explicit locale
+ *    $.fn.dataTable.ext.order.intl('de-u-co-phonebk');
+ *
+ * @example
+ *    // Locale with configuration options
+ *    $.fn.dataTable.ext.order.intl('fr', {
+ *      sensitivity: 'base'
+ *    } );
+ */
+
+
+// UMD
+(function( factory ) {
+	"use strict";
+
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		module.exports = function (root, $) {
+			if ( ! root ) {
+				root = window;
+			}
+
+			if ( ! $ ) {
+				$ = typeof window !== 'undefined' ?
+					require('jquery') :
+					require('jquery')( root );
+			}
+
+			return factory( $, root, root.document );
+		};
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}
+(function( $, window, document ) {
+
+
+$.fn.dataTable.ext.order.intl = function ( locales, options ) {
+	if ( window.Intl ) {
+		var collator = new window.Intl.Collator( locales, options );
+		var types = $.fn.dataTable.ext.type;
+
+		delete types.order['string-pre'];
+		types.order['string-asc'] = collator.compare;
+		types.order['string-desc'] = function ( a, b ) {
+			return collator.compare( a, b ) * -1;
+		};
+	}
+};
+
+
+}));