datatables.net 3.0.0-beta.1 → 3.0.0

package/js/dataTables.mjs

@@ -1,4 +1,4 @@
-/*! DataTables 3.0.0-beta.1
+/*! DataTables
  * Copyright (c) SpryMedia Ltd - datatables.net/license
  */
 
@@ -46,9 +46,11 @@ const reRegexCharacters = new RegExp('(\\' +
 // implementations differ between browsers.
 const reDate = /^\d{2,4}[./-]\d{1,2}[./-]\d{1,2}([T ]{1}\d{1,2}[:.]\d{2}([.:]\d{2})?)?$/;
 const reNewLines = /[\r\n\u2028]/g;
+const isoTimezone = /[T\s]\d{2}.*?(Z|[+-]\d{2}(?::?\d{2})?)$/;
 
 var regex = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    isoTimezone: isoTimezone,
     reDate: reDate,
     reFormattedNumeric: reFormattedNumeric,
     reHtml: reHtml,
@@ -520,17 +522,29 @@ function ajax(optionsIn) {
     if (options.contentType && !(options.data instanceof FormData)) {
         xhr.setRequestHeader('Content-Type', options.contentType);
     }
+    // Add a X-Request-With header, as jQuery does so and some server-side
+    // platforms look for it. Only for same domain though.
+    if (options.headers &&
+        !options.headers['X-Requested-With'] &&
+        !isCrossDomain(options.url)) {
+        options.headers['X-Requested-With'] = 'XMLHttpRequest';
+    }
     each(options.headers, (key, val) => {
         xhr.setRequestHeader(key, val);
     });
     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) {
@@ -580,6 +594,7 @@ function ajax(optionsIn) {
     if (options.beforeSend) {
         if (options.beforeSend.call(options, xhr, options) === false) {
             xhr.abort();
+            return xhr;
         }
     }
     xhr.send(sendData);
@@ -617,6 +632,17 @@ function convertSpaces(sendData, options) {
         ? sendData.replace(/%20/g, '+')
         : sendData;
 }
+/**
+ * Determine if a url is a cross domain request or not
+ *
+ * @param url URL to check
+ * @returns True if cross domain, false otherwise
+ */
+function isCrossDomain(url) {
+    // Use the current page as the base to handle relative URLs correctly
+    const target = new URL(url, window.location.origin);
+    return target.origin !== window.location.origin;
+}
 /**
  * Get the HTTP method from the Ajax request options
  *
@@ -755,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]);
         }
@@ -1298,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('.');
@@ -1318,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-
@@ -1536,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,
@@ -1575,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) {
@@ -1600,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
@@ -1657,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);
     }
@@ -1872,8 +1914,7 @@ class Dom {
             }
         }
         if (sort) {
-            Array.prototype.sort.call(this, documentOrder);
-            // this.sort(documentOrder);
+            this.sort();
         }
         return this;
     }
@@ -1889,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);
         });
     }
     /**
@@ -2078,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') {
@@ -2108,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;
@@ -2664,6 +2707,18 @@ class Dom {
             el.style.display = 'block';
         });
     }
+    /**
+     * Sort the DOM elements into document order.
+     *
+     * This is normally not needed as elements selected with a DOM selector are
+     * automatically sorted in document order. However, in the case of elements
+     * being added as an array, their order will be retained. In such as case
+     * you might wish to sort them in document order.
+     */
+    sort() {
+        Array.prototype.sort.call(this, documentOrder);
+        return this;
+    }
     text(txt) {
         if (txt === undefined) {
             return this.count() ? this[0].textContent : null;
@@ -3824,7 +3879,7 @@ const ext = {
      * Software version
      *  @type string
      */
-    version: '3.0.0-beta.1'
+    version: '3.0.0'
 };
 //
 // Backwards compatibility. Alias to pre 1.10 Hungarian notation counter parts
@@ -3839,7 +3894,7 @@ Object.assign(ext, {
     oStdClasses: ext.classes,
     oPagination: ext.pager,
     sVersion: ext.version,
-    fnVersionCheck: check
+    fnVersionCheck: check$1
 });
 
 /**
@@ -4068,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]);
     }
 }
 /**
@@ -4117,7 +4172,7 @@ function __mldObj(d, format, locale) {
     var dt;
     resolveWindowLibs();
     if (__moment) {
-        dt = __moment.utc(d, format, locale, true);
+        dt = __moment(d, format, locale, true);
         if (!dt.isValid()) {
             return null;
         }
@@ -4183,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) {
@@ -4220,6 +4277,15 @@ function __mlHelper(localeString) {
                 !(d instanceof Date)) {
                 return d;
             }
+            // Determine if there is a timezone. If there is, we want to reuse
+            // it for the output, so the timezone doesn't change between the
+            // input and output.
+            let options = {};
+            let tzMatch = typeof d === 'string' ? d.match(util.regex.isoTimezone) : null;
+            if (tzMatch) {
+                options.timeZone = tzMatch[1] === 'Z' ? 'UTC' : tzMatch[1];
+            }
+            // Get a Date object (Luxon, moment or Date)
             var dt = __mldObj(d, from, locale);
             if (dt === null) {
                 return d;
@@ -4228,7 +4294,7 @@ function __mlHelper(localeString) {
                 return dt;
             }
             var formatted = to === null
-                ? __mld(dt, 'toDate', 'toJSDate', '')[localeString](navigator.language, { timeZone: 'UTC' })
+                ? __mld(dt, 'toDate', 'toJSDate', '')[localeString](navigator.language, options)
                 : __mld(dt, 'format', 'toFormat', 'toISOString', to);
             // XSS protection
             return type === 'display' ? util.escapeHtml(formatted) : formatted;
@@ -4278,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`.
@@ -4950,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
@@ -5295,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, ' ');
@@ -5384,8 +5453,8 @@ function featureTable(settings) {
     let captionSide = caption
         ? caption._captionSide
         : null;
-    let headerClone = table.clone(false);
-    let footerClone = table.clone(false);
+    let tableCloneHeader = table.clone(false);
+    let tableCloneFooter = table.clone(false);
     let footer = table.children('tfoot');
     let size = function (s) {
         return !s ? '100%' : stringToCss(s);
@@ -5406,11 +5475,10 @@ function featureTable(settings) {
      *        table - scroll foot table
      *          tfoot - tfoot
      */
-    let scroller = Dom
-        .c('div')
+    let scroller = Dom.c('div')
         .classAdd(classes.container)
-        .append(Dom
-        .c('div')
+        .attr('role', 'table')
+        .append(Dom.c('div')
         .classAdd(classes.header.self)
         .css({
         overflow: 'hidden',
@@ -5418,40 +5486,41 @@ function featureTable(settings) {
         border: '0',
         width: scrollX ? size(scrollX) : '100%'
     })
-        .append(Dom
-        .c('div')
+        .attr('role', 'none')
+        .append(Dom.c('div')
         .classAdd(classes.header.inner)
         .css({
         'box-sizing': 'content-box',
         width: scroll.xInner || '100%'
     })
-        .append(headerClone
+        .attr('role', 'none')
+        .append(tableCloneHeader
         .attrRemove('id')
         .css('margin-left', '0')
         .append(captionSide === 'top' ? caption : null)
         .append(table.children('thead')))))
-        .append(Dom
-        .c('div')
+        .append(Dom.c('div')
         .classAdd(classes.body)
         .css({
         position: 'relative',
         overflow: 'auto',
         width: size(scrollX)
     })
+        .attr('role', 'none')
         .append(table));
     if (footer.count()) {
-        scroller.append(Dom
-            .c('div')
+        scroller.append(Dom.c('div')
             .classAdd(classes.footer.self)
             .css({
             overflow: 'hidden',
             border: '0',
             width: scrollX ? size(scrollX) : '100%'
         })
-            .append(Dom
-            .c('div')
+            .attr('role', 'none')
+            .append(Dom.c('div')
             .classAdd(classes.footer.inner)
-            .append(footerClone
+            .attr('role', 'none')
+            .append(tableCloneFooter
             .attrRemove('id')
             .css('margin-left', '0')
             .append(captionSide === 'bottom' ? caption : null)
@@ -5489,6 +5558,22 @@ function featureTable(settings) {
     settings.scrollFoot = scrollFoot;
     // On redraw - align columns
     settings.callbacks.draw.push(scrollDraw);
+    // Aria roles - because we break the table up into parts we need to be very
+    // explicit with the roles to create the accessability tree for the table,
+    // otherwise browser's attempt to "fix" the tree by filling in what it
+    // thinks are gaps. The static elements that we can assign roles to are done
+    // here. Dynamic ones are done in the draw function below.
+    table.attr('role', 'none');
+    table.find('tbody').attr('role', 'rowgroup');
+    tableCloneHeader.attr('role', 'none');
+    tableCloneFooter.attr('role', 'none');
+    settings.colgroup.find('colgroup').attr('role', 'none');
+    // Move the info feature's aria desc by to the new "table"
+    let describedBy = table.attr('aria-describedby');
+    if (describedBy) {
+        scroller.attr('aria-describedby', describedBy);
+        table.attrRemove('aria-describedby');
+    }
     return scroller.get(0);
 }
 /**
@@ -5521,10 +5606,13 @@ function scrollDraw(settings) {
     else {
         settings.scrollBarVis = scrollBarVis;
     }
+    header.find('thead').attr('role', 'rowgroup');
+    footer.find('tfoot').attr('role', 'rowgroup');
     // 1. Re-create the table inside the scrolling div
     // Remove the old minimised thead and tfoot elements in the inner table
     table.children('thead, tfoot').remove();
-    // Clone the current header and footer elements and then place it into the inner table
+    // Clone the current header and footer elements and then place it into the
+    // inner table
     headerCopy = header.clone(true).prependTo(table);
     headerCopy.find('th, td').attrRemove('tabindex');
     headerCopy.find('[id]').attrRemove('id');
@@ -5559,8 +5647,7 @@ function scrollDraw(settings) {
             }
         }
         if (firstTr) {
-            let colSizes = Dom
-                .s(firstTr)
+            let colSizes = Dom.s(firstTr)
                 .children('th, td')
                 .mapTo(function (cell, idx) {
                 return {
@@ -5625,6 +5712,18 @@ function scrollDraw(settings) {
     }
     // Correct DOM ordering for colgroup - comes before the thead
     table.children('colgroup').prependTo(table);
+    // Remove tabindex from the hidden row elements
+    table.find('thead, tfoot').find('[tabindex]').attrRemove('tabindex');
+    // Dynamic ARIA roles - see setup for details on why this is needed
+    table
+        .find('thead, tfoot')
+        .attr('role', 'none')
+        .find('[role]')
+        .attrRemove('role');
+    table.find('tbody tr:not([role])').attr('role', 'row');
+    table.find('tbody td:not([role]), tbody th:not([role])').attr('role', 'cell');
+    scrollAria(headerCopy);
+    scrollAria(footerCopy);
     // Adjust the position of the header in case we loose the y-scrollbar
     divBody.trigger('scroll');
     // If sorting or filtering has occurred, jump the scrolling back to the top
@@ -5633,6 +5732,18 @@ function scrollDraw(settings) {
         divBodyEl.scrollTop(0);
     }
 }
+/**
+ * Apply ARIA roles for the header / footer of a scrolling table
+ * @param element
+ */
+function scrollAria(element) {
+    if (element) {
+        element.find('tfoot:not([role])').attr('role', 'rowgroup');
+        element.find('tr:not([role])').attr('role', 'row');
+        element.find('th:not([role])').attr('role', 'columnheader');
+        element.find('td:not([role])').attr('role', 'cell');
+    }
+}
 
 /**
  * Add a column to the list used for the table with default values
@@ -5856,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++) {
@@ -5953,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
@@ -7154,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);
         }
@@ -8297,6 +8413,11 @@ function reDraw(settings, holdPosition, recompute) {
     if (holdPosition !== true) {
         settings.displayStart = 0;
     }
+    else {
+        // Keep position, but make sure that there is actually data to display,
+        // otherwise we need to rewind a bit (e.g. if rows were deleted)
+        lengthOverflow(settings);
+    }
     // Let any modules know about the draw hold position state (used by
     // scrolling internally)
     settings.drawHold = holdPosition;
@@ -9473,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'))
                 }
             ]
             : [];
@@ -9791,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'
@@ -9988,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) {
@@ -10471,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
@@ -10503,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);
     };
@@ -10649,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 () {
@@ -10967,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 {
@@ -10983,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.
@@ -11342,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
@@ -11365,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
@@ -11398,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);
         }
@@ -11406,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) {
@@ -11416,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,
@@ -12238,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.