From d9592b38b432e98c7a6d84bdf9a2508b03af8a19 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Wed, 21 Feb 2024 16:54:18 +0000 Subject: [PATCH] Sorting - natural: Updated to use `localeCompare` https://datatables.net/forums/discussion/comment/228331 --- sorting/src/natural.ts | 217 +++++++++++++++++------------------------ 1 file changed, 87 insertions(+), 130 deletions(-) diff --git a/sorting/src/natural.ts b/sorting/src/natural.ts index 5ebcf24..ab01955 100644 --- a/sorting/src/natural.ts +++ b/sorting/src/natural.ts @@ -1,151 +1,108 @@ -/*! © SpryMedia Ltd, Jim Palmer, Michael Buehler, Mike Grier, Clint Priest, Kyle Adams, guillermo - datatables.net/license */ +/*! © SpryMedia Ltd - datatables.net/license */ /** * Data can often be a complicated mix of numbers and letters (file names * are a common example) and sorting them in a natural manner is quite a * difficult problem. * - * Fortunately a deal of work has already been done in this area by other - * authors - the following plug-in uses the [naturalSort() function by Jim - * Palmer](http://www.overset.com/2008/09/01/javascript-natural-sort-algorithm-with-unicode-support) to provide natural sorting in DataTables. + * Fortunately the Javascript `localeCompare` method is now widely supported + * and provides a natural sorting method we can use with DataTables. * * @name Natural sorting * @summary Sort data with a mix of numbers and letters _naturally_. - * @author [Jim Palmer](http://www.overset.com/2008/09/01/javascript-natural-sort-algorithm-with-unicode-support) - * @author [Michael Buehler] (https://github.com/AnimusMachina) + * @author Allan Jardine + * @requires DataTables 2+ * * @example - * $('#example').dataTable( { + * // Natural sorting + * new DataTable('#myTable', * columnDefs: [ - * { type: 'natural', targets: 0 } + * { type: 'natural', target: 0 } * ] - * } ); + * } ); * - * Html can be stripped from sorting by using 'natural-nohtml' such as + * @example + * // Html can be stripped from sorting by using 'natural-nohtml' such as + * new DataTable('#myTable', + * columnDefs: [ + * { type: 'natural-nohtml', target: 0 } + * ] + * } ); * - * $('#example').dataTable( { + * @example + * // Case insensitive natural sorting + * new DataTable('#myTable', * columnDefs: [ - * { type: 'natural-nohtml', targets: 0 } + * { type: 'natural-ci', target: 0 } * ] * } ); * */ -import DataTable from 'datatables.net'; - -/* - * Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT license - * Author: Jim Palmer (based on chunking idea from Dave Koelle) - * Contributors: Mike Grier (mgrier.com), Clint Priest, Kyle Adams, guillermo - * See: http://js-naturalsort.googlecode.com/svn/trunk/naturalSort.js - */ -function naturalSort(a, b, html) { - var re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?%?$|^0x[0-9a-f]+$|[0-9]+)/gi, - sre = /(^[ ]*|[ ]*$)/g, - dre = - /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/, - hre = /^0x[0-9a-f]+$/i, - ore = /^0/, - htmre = /(<([^>]+)>)/gi, - // convert all to strings and trim() - x = a.toString().replace(sre, '') || '', - y = b.toString().replace(sre, '') || ''; - - // remove html from strings if desired - if (!html) { - x = x.replace(htmre, ''); - y = y.replace(htmre, ''); - } - // chunk/tokenize - var xN = x - .replace(re, '\0$1\0') - .replace(/\0$/, '') - .replace(/^\0/, '') - .split('\0'), - yN = y - .replace(re, '\0$1\0') - .replace(/\0$/, '') - .replace(/^\0/, '') - .split('\0'), - // numeric, hex or date detection - xD = - parseInt(x.match(hre), 10) || - (xN.length !== 1 && x.match(dre) && Date.parse(x)), - yD = - parseInt(y.match(hre), 10) || - (xD && y.match(dre) && Date.parse(y)) || - null; - - // first try and sort Hex codes or Dates - if (yD) { - if (xD < yD) { - return -1; - } - else if (xD > yD) { - return 1; - } - } - - // natural sorting through split numeric strings and default strings - for ( - var cLoc = 0, numS = Math.max(xN.length, yN.length); - cLoc < numS; - cLoc++ - ) { - // find floats not starting with '0', string or 0 if not defined (Clint Priest) - var oFxNcL = - (!(xN[cLoc] || '').match(ore) && parseFloat(xN[cLoc])) || xN[cLoc] || 0; - var oFyNcL = - (!(yN[cLoc] || '').match(ore) && parseFloat(yN[cLoc])) || yN[cLoc] || 0; - - // handle numeric vs string comparison - number < string - (Kyle Adams) - if (isNaN(oFxNcL) !== isNaN(oFyNcL)) { - return isNaN(oFxNcL) ? 1 : -1; - } - // rely on string comparison if different types - i.e. '02' < 2 != '02' < '2' - else if (typeof oFxNcL !== typeof oFyNcL) { - oFxNcL += ''; - oFyNcL += ''; - } - - if (oFxNcL < oFyNcL) { - return -1; - } - - if (oFxNcL > oFyNcL) { - return 1; - } - } - - return 0; -} - -DataTable.ext.type.order['natural-asc'] = function (a, b) { - return naturalSort(a, b, true); -}; - -DataTable.ext.type.order['natural-desc'] = function (a, b) { - return naturalSort(a, b, true) * -1; -}; - -DataTable.ext.type.order['natural-nohtml-asc'] = function (a, b) { - return naturalSort(a, b, false); -}; - -DataTable.ext.type.order['natural-nohtml-desc'] = function (a, b) { - return naturalSort(a, b, false) * -1; -}; - -DataTable.ext.type.order['natural-ci-asc'] = function (a, b) { - a = a.toString().toLowerCase(); - b = b.toString().toLowerCase(); - - return naturalSort(a, b, true); -}; - -DataTable.ext.type.order['natural-ci-desc'] = function (a, b) { - a = a.toString().toLowerCase(); - b = b.toString().toLowerCase(); - - return naturalSort(a, b, true) * -1; -}; +import DataTable from "datatables.net"; + +DataTable.type("natural", { + order: { + asc: function (a, b) { + return a.localeCompare(b, navigator.languages[0] || navigator.language, { + numeric: true, + ignorePunctuation: true, + }); + }, + desc: function (a, b) { + return ( + a.localeCompare(b, navigator.languages[0] || navigator.language, { numeric: true, ignorePunctuation: true }) * + -1 + ); + }, + }, + className: "natural-sort", +}); + +DataTable.type("natural-nohtml", { + order: { + asc: function (a, b) { + a = DataTable.util.stripHtml(a); + b = DataTable.util.stripHtml(b); + + return a.localeCompare(b, navigator.languages[0] || navigator.language, { + numeric: true, + ignorePunctuation: true, + }); + }, + desc: function (a, b) { + a = DataTable.util.stripHtml(a); + b = DataTable.util.stripHtml(b); + + return ( + a.localeCompare(b, navigator.languages[0] || navigator.language, { numeric: true, ignorePunctuation: true }) * + -1 + ); + }, + }, + className: "natural-sort", +}); + +DataTable.type("natural-ci", { + order: { + asc: function (a, b) { + a = a.toString().toLowerCase(); + b = b.toString().toLowerCase(); + + return a.localeCompare(b, navigator.languages[0] || navigator.language, { + numeric: true, + ignorePunctuation: true, + }); + }, + desc: function (a, b) { + a = a.toString().toLowerCase(); + b = b.toString().toLowerCase(); + + return ( + a.localeCompare(b, navigator.languages[0] || navigator.language, { numeric: true, ignorePunctuation: true }) * + -1 + ); + }, + }, + className: "natural-sort", +});