datatables.net 3.0.0-beta.2 → 3.0.0

package/js/dataTables.mjs

@@ -1,4 +1,4 @@
-/*! DataTables 3.0.0-beta.2
+/*! DataTables
  * Copyright (c) SpryMedia Ltd - datatables.net/license
  */
 
@@ -535,11 +535,16 @@ function ajax(optionsIn) {
     if (options.data instanceof FormData) {
         sendData = options.data;
     }
-    else if (method !== 'GET' && options.data && typeof options.data !== 'string') {
-        sendData = serialize(options.data, options.traditional);
-        sendData = convertSpaces(sendData, options);
-        // So beforeSend matches how jQuery behaves
-        options.data = sendData;
+    else if (method !== 'GET' && options.data) {
+        if (typeof options.data === 'string') {
+            sendData = options.data;
+        }
+        else {
+            sendData = serialize(options.data, options.traditional);
+            sendData = convertSpaces(sendData, options);
+            // So beforeSend matches how jQuery behaves
+            options.data = sendData;
+        }
     }
     xhr.onreadystatechange = function () {
         if (xhr.readyState != 4) {
@@ -589,6 +594,7 @@ function ajax(optionsIn) {
     if (options.beforeSend) {
         if (options.beforeSend.call(options, xhr, options) === false) {
             xhr.abort();
+            return xhr;
         }
     }
     xhr.send(sendData);
@@ -775,7 +781,7 @@ function allUnique(src) {
  * @returns Flattened array
  */
 function flatten(out, val) {
-    if (Array.isArray(val)) {
+    if (Array.isArray(val) || arrayLike(val)) {
         for (var i = 0; i < val.length; i++) {
             flatten(out, val[i]);
         }
@@ -1318,7 +1324,7 @@ var timer = /*#__PURE__*/Object.freeze({
  * @returns true if this version of DataTables is greater or equal to the
  *   required version, or false if this version of DataTales is not suitable
  */
-function check(version1, version2) {
+function check$1(version1, version2) {
     let dt = external('datatable');
     var parts1 = version2 ? version2.split('.') : dt.ext.version.split('.');
     var parts2 = version1.split('.');
@@ -1338,7 +1344,7 @@ function check(version1, version2) {
 
 var version = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    check: check
+    check: check$1
 });
 
 // Note that the aliased properties are for compatibility with DataTables 2-
@@ -1556,9 +1562,12 @@ function parseEventName(original) {
         isFocus = true;
     }
     else if (name === 'blur') {
-        name = 'blurout';
+        name = 'focusout';
         isFocus = true;
     }
+    else if (name === 'ready') {
+        name = 'DOMContentLoaded';
+    }
     return {
         eventName: name,
         isFocus,
@@ -1595,6 +1604,14 @@ function add(el, nameFull, handler, selector, one) {
     if (!eventName) {
         return;
     }
+    // Special handling for the "ready" event - it will trigger when the content
+    // is ready, but also if it is already ready, when added.
+    if (el === document && eventName === 'DOMContentLoaded' && nameFull.includes('ready')) {
+        if (document.readyState === 'complete') {
+            handler(new Event('DOMContentLoaded'));
+            return;
+        }
+    }
     // Create a function that will be the actual event handler, and performs any
     // logic we need, such as delegate handling and adding properties.
     let wrapped = function (event) {
@@ -1620,6 +1637,11 @@ function add(el, nameFull, handler, selector, one) {
             if (!dTarget) {
                 return;
             }
+            if (isHover &&
+                event.relatedTarget &&
+                dTarget.contains(event.relatedTarget)) {
+                return;
+            }
             callScope = dTarget;
         }
         // Set the properties that jQuery adds to the event object
@@ -1677,7 +1699,7 @@ function remove(el, nameFull, handler, selector) {
             wrapped.delegateSelector === selector &&
             wrapped.original === handler);
     }
-    if (eventName && selector) {
+    else if (eventName && selector) {
         removeEvents = stored.filter(wrapped => wrapped.type === eventName &&
             wrapped.delegateSelector === selector);
     }
@@ -1908,29 +1930,33 @@ class Dom {
         if (!content) {
             return this;
         }
-        if (Array.isArray(content)) {
-            content.forEach(c => this.append(c));
-            return this;
+        if (!arrayLike(content)) {
+            content = [content];
         }
-        return this.each(el => {
-            if (content instanceof Dom) {
-                content.each(item => {
-                    el.append(item);
-                });
-            }
-            else if (typeof content === 'string') {
-                el.insertAdjacentHTML('beforeend', content);
-            }
-            else if (arrayLike(content)) {
-                // Allow for a jQuery object being passed
-                let arrayLike = content;
-                for (let i = 0; i < arrayLike.length; i++) {
-                    el.append(arrayLike[i]);
+        // Generate a flat array of the content to be added, with nulls removed
+        // this means it will be an array of nodes and / or strings
+        let flatContent = flatten([], content).filter(c => !!c);
+        /// Got a string somewhere in it, so need to use insertAdjacentHTML
+        if (flatContent.find(val => typeof val === 'string')) {
+            return this.each(el => {
+                for (let i = 0; i < flatContent.length; i++) {
+                    if (typeof flatContent[i] === 'string') {
+                        el.insertAdjacentHTML('beforeend', flatContent[i]);
+                    }
+                    else {
+                        el.append(flatContent[i]);
+                    }
                 }
+            });
+        }
+        // Otherwise we can use a document fragment for a single mutation
+        // on the main document
+        return this.each(el => {
+            let fragment = new DocumentFragment();
+            for (let i = 0; i < flatContent.length; i++) {
+                fragment.append(flatContent[i]);
             }
-            else {
-                el.append(content);
-            }
+            el.append(fragment);
         });
     }
     /**
@@ -2097,9 +2123,7 @@ class Dom {
     css(rule, value) {
         // String getter
         if (typeof rule === 'string' && value === undefined) {
-            return this.length
-                ? getComputedStyle(this[0])[rule]
-                : null;
+            return this.length ? getComputedStyle(this[0])[rule] : null;
         }
         return this.each(el => {
             if (typeof rule === 'string') {
@@ -2127,11 +2151,11 @@ class Dom {
             return this.length ? dataConvert(this[0].dataset[name]) : null;
         }
         if (typeof name === 'string') {
-            this.each(el => el.dataset[name] = JSON.stringify(value));
+            this.each(el => (el.dataset[name] = JSON.stringify(value)));
         }
         else {
             each(name, (key, val) => {
-                this.each(el => el.dataset[key] = JSON.stringify(val));
+                this.each(el => (el.dataset[key] = JSON.stringify(val)));
             });
         }
         return this;
@@ -3855,7 +3879,7 @@ const ext = {
      * Software version
      *  @type string
      */
-    version: '3.0.0-beta.2'
+    version: '3.0.0'
 };
 //
 // Backwards compatibility. Alias to pre 1.10 Hungarian notation counter parts
@@ -3870,7 +3894,7 @@ Object.assign(ext, {
     oStdClasses: ext.classes,
     oPagination: ext.pager,
     sVersion: ext.version,
-    fnVersionCheck: check
+    fnVersionCheck: check$1
 });
 
 /**
@@ -4099,7 +4123,7 @@ function arrayApply(arr, data) {
 function listener(that, name, src) {
     let srcArr = Array.isArray(src) ? src : [src];
     for (var i = 0; i < srcArr.length; i++) {
-        that.on(name + '.dt', srcArr[i]);
+        that.on(name + '.dt.DT', srcArr[i]);
     }
 }
 /**
@@ -4214,10 +4238,12 @@ function __mlHelper(localeString) {
                         // gives milliseconds epoch
                         return d.valueOf();
                     }
-                },
-                className: 'dt-right'
+                }
             });
         }
+        if (!store.className[typeName]) {
+            store.className[typeName] = 'dt-right';
+        }
         return function (d, type) {
             // Allow for a default value
             if (d === null || d === undefined) {
@@ -4318,10 +4344,12 @@ function datetime(format, locale) {
                 pre: function (d) {
                     return __mldObj(d, format, locale) || 0;
                 }
-            },
-            className: 'dt-right'
+            }
         });
     }
+    if (!store.className[typeName]) {
+        store.className[typeName] = 'dt-right';
+    }
 }
 /**
  * Helpers for `columns.render`.
@@ -4990,6 +5018,7 @@ function invalidate(settings, rowIdx, src, colIdx) {
         // Update DataTables special `DT_*` attributes for the row
         rowAttributes(settings, row);
     }
+    callbackFire(settings, null, 'rowInvalidate', [settings, rowIdx, colIdx], false);
 }
 /**
  * Get the cells and data for a given row - from a <tr> element
@@ -5335,9 +5364,9 @@ function getWideStrings(settings, colIdx) {
             // Don't want script, dialog or template tags in the width
             // calculations as they are hidden content
             cellString = cellString
-                .replace(/<script[\s\S]*?<\/script>/gi, ' ')
-                .replace(/<dialog[\s\S]*?<\/dialog>/gi, ' ')
-                .replace(/<template[\s\S]*?<\/template>/gi, ' ');
+                .replace(/<script[\s\S]*?<\/script(?:\s[^>]*)?>/gi, ' ')
+                .replace(/<dialog[\s\S]*?<\/dialog(?:\s[^>]*)?>/gi, ' ')
+                .replace(/<template[\s\S]*?<\/template(?:\s[^>]*)?>/gi, ' ');
             var noHtml = util.string
                 .stripHtml(cellString, ' ')
                 .replace(/&nbsp;/g, ' ');
@@ -5938,6 +5967,7 @@ function columnTypes(settings) {
     var types = ext.type.detect;
     var i, iLen, j, jen, k, ken;
     var col, detectedType, cache;
+    var originalTypes = columns.map(c => c.type).join(',');
     // For each column, spin over the data type detection functions, seeing if
     // one matches
     for (i = 0, iLen = columns.length; i < iLen; i++) {
@@ -6035,6 +6065,10 @@ function columnTypes(settings) {
             _columnAutoRender(settings, i);
         }
     }
+    var newTypes = columns.map(c => c.type).join(',');
+    if (newTypes !== originalTypes) {
+        callbackFire(settings, null, 'columnTypes', [settings], false);
+    }
 }
 /**
  * Apply an auto detected renderer to data which doesn't yet have a renderer
@@ -7236,13 +7270,13 @@ function implementState(settings, s, callback) {
                 let idx = currentNames.indexOf(col[0]);
                 if (idx < 0) {
                     // If the column was not found ignore it and continue
-                    return;
+                    continue;
                 }
                 set[0] = idx;
             }
             else if (set[0] >= columns.length) {
                 // If the column index is out of bounds ignore it and continue
-                return;
+                continue;
             }
             settings.order.push(set);
         }
@@ -9560,12 +9594,13 @@ function selectCells(settings, selector, opts) {
         // Otherwise the selector is a node, and there is one last option - the
         // element might be a child of an element which has dt-row and dt-column
         // data attributes
-        host = Dom.s(s).closest('*[data-dt-row]');
-        return host.count()
+        let rowHost = Dom.s(s).closest('*[data-dt-row]');
+        let columnHost = Dom.s(s).closest('*[data-dt-column]');
+        return rowHost.count()
             ? [
                 {
-                    row: host.data('dt-row'),
-                    column: host.data('dt-column')
+                    row: parseInt(rowHost.attr('data-dt-row')),
+                    column: parseInt(columnHost.attr('data-dt-column'))
                 }
             ]
             : [];
@@ -9878,7 +9913,7 @@ function selectColumns(settings, selector, opts) {
         // Otherwise a node which might have a `dt-column` data attribute, or be
         // a child or such an element
         var host = Dom.s(s).closest('*[data-dt-column]');
-        return host.count() ? [host.data('dt-column')] : [];
+        return host.count() ? [parseInt(host.attr('data-dt-column'))] : [];
     };
     var selected = selectorRun('column', selector, run, settings, opts);
     return opts.columnOrder && opts.columnOrder === 'index'
@@ -10075,18 +10110,19 @@ registerPlural('columns().widths()', 'column().width()', function () {
     // Injects a fake row into the table for just a moment so the widths can
     // be read, regardless of colspan in the header and rows being present
     // in the body
-    var columns = this.columns(':visible').count();
+    var columns = this.columns(':visible');
     var row = Dom
         .c('tr')
-        .html('<td>' + Array(columns).join('</td><td>') + '</td>');
+        .html('<td>' + Array(columns.count()).join('</td><td>') + '</td>');
     Dom.s(this.table().body()).append(row);
-    var widths = row.children().mapTo(el => {
-        return Dom.s(el).width('outer');
+    var widths = [];
+    var indexes = columns.indexes();
+    row.children().each((el, idx) => {
+        widths[indexes[idx]] = Dom.s(el).width('outer');
     });
     row.remove();
-    return this.iterator('column', function (settings, column) {
-        var visIdx = columnIndexToVisible(settings, column);
-        return visIdx !== null ? widths[visIdx] : 0;
+    return this.iterator('column', (settings, column) => {
+        return widths[column] || 0;
     }, true);
 });
 registerPlural('columns().indexes()', 'column().index()', function (type) {
@@ -10558,7 +10594,7 @@ function selectRows(settings, selector, opts) {
             }
             else {
                 var host = Dom.s(sel).closest('*[data-dt-row]');
-                return host.count() ? [host.data('dt-row')] : [];
+                return host.count() ? [parseInt(host.attr('data-dt-row'))] : [];
             }
         }
         // ID selector. Want to always be able to select rows by id, regardless
@@ -10590,8 +10626,7 @@ function selectRows(settings, selector, opts) {
         // Get nodes in the order from the `rows` array with null values removed
         var nodes = util.array.removeEmpty(util.array.pluckOrder(settings.data, rows, 'tr'));
         // Selector - selector string, array of nodes or jQuery object.
-        return Dom
-            .s(nodes)
+        return Dom.s(nodes)
             .filter(sel)
             .mapTo((el) => el._DT_RowIndex);
     };
@@ -10736,7 +10771,7 @@ register('row().data()', function (data) {
         util.set(ctx[0].rowId)(data, row.tr.id);
     }
     // Automatically invalidate
-    invalidate(ctx[0], this[0], 'data');
+    invalidate(ctx[0], this[0][0], 'data');
     return this;
 });
 register('row().node()', function () {
@@ -11054,10 +11089,10 @@ register('caption()', function (value, side) {
             caption.css('caption-side', side);
             caption.get(0)._captionSide = side;
         }
-        if (container.find('div.dataTables_scroll').count()) {
-            var selector = side === 'top' ? 'Head' : 'Foot';
+        if (container.find('div.dt-scroll').count()) {
+            var selector = side === 'top' ? 'head' : 'foot';
             container
-                .find('div.dataTables_scroll' + selector + ' table')
+                .find('div.dt-scroll-' + selector + ' table')
                 .prepend(caption);
         }
         else {
@@ -11070,6 +11105,272 @@ register('caption.node()', function () {
     return ctx.length ? ctx[0].captionNode : null;
 });
 
+/**
+ * What's this!? "DataTables Plus" is a commercial set of extensions for
+ * DataTables, such as Editor, and the functions in this file allow a license
+ * key to be provided (`DataTable.key(...)`) to unlock those features.
+ *
+ * This is the modal that I've selected to make DataTables sustainable, open
+ * source core, with some commercial extensions available.
+ *
+ * Please support DataTables and open source by purchasing a Plus license from
+ * https://datatables.net/plus .
+ */
+let _ready = false;
+let _notice;
+let _processingKey = false;
+let _delayedReleaseDate = null;
+let _delayedSoftware = null;
+const _licenseInfo = {
+    developers: 0,
+    type: null,
+    expires: null,
+    valid: null
+};
+const _wm = Dom.c('div');
+const _publicKey = 'BE1A9w9D9U/4s4/TogY+1sW/dLJ8IquzK1PmV70J93ZTIvXMZ0eV2NAb52ntpgwVFySSB2fOI7geLNO737rQAyo=';
+/**
+ * Convert a base64 string to a binary array
+ *
+ * @param b64 Source string
+ * @returns Array
+ */
+function b64ToBuf(b64) {
+    return Uint8Array.from(atob(b64), c => c.charCodeAt(0));
+}
+/**
+ * Logic to check the trial and plus license expiry and display messages if
+ * needed. There is particular consideration for checking a release date of
+ * software, as the license for DataTables Plus is perpetual for the version
+ * purchased, and it shouldn't show a message for the purchased version ever.
+ *
+ * @param releaseDate The date the software was released on.
+ * @param software The software name being validated. Can be null for a general
+ *   "Plus" check.
+ * @returns true if valid, false otherwise
+ */
+function check(releaseDate, software) {
+    let expires = _licenseInfo.expires;
+    if (_licenseInfo.valid === false) {
+        noticePrep('License key invalid');
+        noticeDisplay();
+    }
+    else if (_licenseInfo.type === 'trial') {
+        // Trail is for plus, so the software type isn't taken into account
+        let remaining = expires
+            ? Math.ceil((expires.getTime() - new Date().getTime()) / 86400000)
+            : -1;
+        if (remaining < 0) {
+            // Trial expires
+            consoleMsg('Your trial has now expired - https://datatables.net/plus', 'warn');
+            noticePrep('Trial expired');
+            noticeDisplay();
+            return false;
+        }
+        else {
+            // Let the user know when it is going to expire with a console
+            // message.
+            consoleMsg('Your trial expires in ' +
+                remaining +
+                ' day' +
+                (remaining === 1 ? '' : 's'));
+            return true;
+        }
+    }
+    else if (_licenseInfo.type === 'plus' ||
+        (_licenseInfo.type === 'editor' && software === 'editor')) {
+        if (!expires || new Date(releaseDate) > expires) {
+            noticePrep('Upgrade required for this version');
+            noticeDisplay();
+            return false;
+        }
+        return true;
+    }
+    else if (_licenseInfo.type === 'editor' && software !== 'editor') {
+        noticePrep('License for Editor only. Upgrade for Plus');
+        noticeDisplay();
+        return false;
+    }
+    noticePrep();
+    noticeDisplay();
+    return false;
+}
+/**
+ * Common log message handling
+ *
+ * @param msg Message to show
+ * @param level Log level
+ */
+function consoleMsg(msg, level = 'log') {
+    let fn = level === 'log' ? console.log : console.warn;
+    fn('%cDataTables Plus%c ' + msg, 'background: #007bff; color: #fff; padding: 2px 5px;', 'color: inherit;');
+}
+/**
+ * Set the DataTables Plus key to use
+ *
+ * @param key DataTables Plus key - obtain from https://datatables.net/account .
+ */
+const key = function (key) {
+    _processingKey = true;
+    // Run the verification of the key
+    verify(key)
+        .then(result => {
+        _processingKey = false;
+        check(_delayedReleaseDate, _delayedSoftware);
+    })
+        .catch(() => {
+        _processingKey = false;
+        check(_delayedReleaseDate, _delayedSoftware);
+    });
+};
+/**
+ * Build the notice
+ *
+ * @returns
+ */
+function noticePrep(text) {
+    if (!_ready) {
+        let shadow = _wm[0].attachShadow({ mode: 'closed' });
+        let notice = Dom.c('div').css({
+            position: 'fixed',
+            bottom: '1em',
+            right: '1em',
+            border: '1px solid #ffc107',
+            background: '#fff3cd',
+            color: '#856404',
+            padding: '0.5em 1em',
+            'font-family': 'sans-serif',
+            'font-size': '12px',
+            'border-radius': '4px',
+            'z-index': '10000',
+            'box-shadow': '0 2px 5px rgba(0,0,0,0.2)'
+        });
+        Dom.c('a')
+            .attr('href', 'https://datatables.net/tn/25')
+            .attr('target', '_blank')
+            .css({
+            color: 'inherit',
+            'text-decoration': 'none'
+        })
+            .appendTo(notice);
+        if (!text) {
+            text = 'License key required';
+        }
+        shadow.appendChild(notice[0]);
+        _notice = notice;
+        _ready = true;
+    }
+    if (text) {
+        _notice
+            .find('a')
+            .html('DataTables Plus: ' + text + ' - learn more &#187;');
+    }
+}
+/**
+ * Display the license notice
+ */
+function noticeDisplay() {
+    if (!_processingKey && !document.body.contains(_wm[0])) {
+        document.body.appendChild(_wm[0]);
+    }
+}
+/**
+ * Validate the license string, which is in two parts - the first is a payload
+ * that provides a small amount of information about the license, and the second
+ * which is the license key.
+ *
+ * @param licenseString Key to validate
+ * @returns Promise with validation information
+ */
+function verify(licenseString) {
+    return new Promise(function (resolve) {
+        try {
+            var parts = licenseString.split(':');
+            if (parts.length !== 2) {
+                _licenseInfo.valid = false;
+                return resolve();
+            }
+            var payload = parts[0];
+            var signatureB64 = parts[1];
+            // Backwards compat for old browsers
+            var cryptoObj = window.crypto || window.msCrypto;
+            var subtle = cryptoObj.subtle || cryptoObj.webkitSubtle;
+            var rawKey = b64ToBuf(_publicKey);
+            var rawSig = b64ToBuf(signatureB64);
+            var data = new TextEncoder().encode(payload);
+            subtle
+                .importKey('raw', rawKey, { name: 'ECDSA', namedCurve: 'P-256' }, false, ['verify'])
+                .then(function (key) {
+                return subtle.verify({ name: 'ECDSA', hash: { name: 'SHA-256' } }, key, rawSig, data);
+            })
+                .then(function (isValid) {
+                if (!isValid) {
+                    _licenseInfo.valid = false;
+                    return resolve();
+                }
+                // Extract the payload to be useful
+                var payloadParts = payload.match(/(plus|trial|editor)_(\d+)_(\d{4})(\d{2})(\d{2})/);
+                if (!payloadParts || payloadParts.length !== 6) {
+                    _licenseInfo.valid = false;
+                    return resolve();
+                }
+                _licenseInfo.valid = true;
+                _licenseInfo.type = payloadParts[1];
+                _licenseInfo.developers = parseInt(payloadParts[2]);
+                _licenseInfo.expires = new Date(payloadParts[3] +
+                    '-' +
+                    payloadParts[4] +
+                    '-' +
+                    payloadParts[5]);
+                resolve();
+            })
+                .catch(function () {
+                _licenseInfo.valid = false;
+                resolve();
+            });
+        }
+        catch (e) {
+            _licenseInfo.valid = false;
+            resolve();
+        }
+    });
+}
+/**
+ * Create the `plus` function on `DataTable` which Plus extensions can call to
+ * determine if the license key is valid and in date for the release. The
+ * resulting function is called like this: `DataTable.plus('2026-12-25')` and
+ * will return `true` or `false` depending on the key that was given (or not).
+ *
+ * @param DataTable The DataTable host object
+ */
+function plus (DataTable) {
+    Object.defineProperty(DataTable, 'plus', {
+        value: function (releaseDate, software = null) {
+            // Unsecure sites are only useful for development, so allow there
+            // and on the site.
+            let host = window.location.hostname;
+            let isDev = host === '192.168.234.234' ||
+                host.endsWith('.datatables.net') ||
+                host === 'datatables.net';
+            if (isDev) {
+                return true;
+            }
+            if (_processingKey) {
+                // The validation of the key is async, so there is a chance that
+                // it could still be happening when this runs. We just queue the
+                // last one if that is the case.
+                _delayedReleaseDate = releaseDate;
+                _delayedSoftware = software;
+                return true;
+            }
+            return check(releaseDate, software);
+        },
+        configurable: false,
+        enumerable: false,
+        writable: false
+    });
+}
+
 /**
  * CommonJS factory function pass through. This will check if the arguments
  * given are a window object or a jQuery object. If so they are set accordingly.
@@ -11429,8 +11730,7 @@ register$2('pageLength', function (settings, optsIn) {
     }
     // Wrapper element - use a span as a holder for where the select will go
     var tmpId = 'tmp-' + +new Date();
-    var div = Dom
-        .c('div')
+    var div = Dom.c('div')
         .classAdd(classes.container)
         .html(str.replace('_MENU_', '<span id="' + tmpId + '"></span>'));
     // Save text node content for macro updating
@@ -11452,9 +11752,9 @@ register$2('pageLength', function (settings, optsIn) {
         });
     };
     // Next, the select itself, along with the options
-    var select = Dom
-        .c('select')
+    var select = Dom.c('select')
         .attr('aria-controls', tableId)
+        .attr('autocomplete', 'off')
         .classAdd(classes.select);
     for (i = 0; i < lengths.length; i++) {
         // Attempt to look up the length from the i18n options
@@ -11485,7 +11785,26 @@ register$2('pageLength', function (settings, optsIn) {
     // Update node value whenever anything changes the table's length
     Dom.s(settings.table).on('length.dt.DT', function (e, s, len) {
         if (settings === s) {
-            div.find('select').val(len);
+            let localSelect = div.find('select');
+            // Remove any temporary values
+            localSelect.find('option[data-dt-len-tmp]').remove();
+            let option = localSelect.find('option[value="' + len + '"]');
+            // If the select list doesn't have the target value, then we
+            // need to add it for display.
+            if (!option.length) {
+                let after = findInsertBeforePoint(select, len);
+                let tempOption = Dom.c('option')
+                    .val(len)
+                    .text(len)
+                    .attr('data-dt-len-tmp', true);
+                if (after && after.length) {
+                    tempOption.insertBefore(after);
+                }
+                else {
+                    localSelect.append(tempOption);
+                }
+            }
+            localSelect.val(len);
             // Resolve plurals in the text for the new length
             updateEntries(len);
         }
@@ -11493,6 +11812,19 @@ register$2('pageLength', function (settings, optsIn) {
     updateEntries(settings.pageLength);
     return div;
 }, 'l');
+/**
+ * Find the element to insert the temporary option before to keep the sequence.
+ *
+ * @param select Select element
+ * @param insertValue Page length value
+ * @returns Target option or null if not found
+ */
+function findInsertBeforePoint(select, insertValue) {
+    let options = select.find('option');
+    let values = options.mapTo(el => parseInt(el.value));
+    let idx = values.findIndex(val => val > insertValue);
+    return idx < -1 ? null : options.eq(idx);
+}
 
 let __searchCounter = 0;
 register$2('search', function (settings, optsIn) {
@@ -11503,7 +11835,9 @@ register$2('search', function (settings, optsIn) {
     let classes = settings.classes.search;
     let tableId = settings.tableId;
     let language = settings.language;
-    let input = '<input type="search" class="' + classes.input + '"/>';
+    let input = '<input type="search" class="' +
+        classes.input +
+        '" autocomplete="off"/>';
     let opts = util.object.assignDeep({
         columns: '*',
         placeholder: language.searchPlaceholder,
@@ -12325,6 +12659,8 @@ DataTable.datetime = datetime;
 DataTable.__browser = browser;
 DataTable.Dom = Dom;
 DataTable.ajax = util.ajax;
+DataTable.key = key;
+plus(DataTable);
 /**
  * Private data store, containing all of the settings objects that are created
  * for the tables on a given page.