Locale based sorting in jQuery Datatables

Posted By : Himanshu Agarwal | 31-Aug-2017

jquery

In non english languages Javascript Array.sort using String.compare() gives false order, e.g in German correct sort order is: Arzt, Ärzte, Ast, Baum, Zeder in contrast to Arzt, Ast, Baum, Zeder, Ärzte as in English/ASCII string sort.

Since String.localeCompare is extremely expansive performance wise this uses the following approach: Pre sort all column fields using String.localeCompare (onyl when necessary) and then map each cell to the position in the ordered list and cache that. Later DataTables.api().sort() just uses the position index (an integer). The sorting can then take advantage of much faster integer comparison (even faster than ASCII string comparison).

Note: The pre computed cache must be invalidated and rebuild whenever the underlying data changes (e.g. Rows added/removed). The plugin does not check this, user has to invalidate here. Thus this will only be fast for relatively static data.

For large data sets this can be more than 100 times faster than the naive localeCompare approach.

usage: drop in DT_localsort.js, include script in your html. In initialisation options set "type": "string-locale-mapped-int"and "orderDataType":"string-locale-mapped-int" for each column that shall benefit from sorted with this plugin.

Plug-in code

// 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;
        };
    }
};
 
 
}));