datatables.net-columncontrol 1.1.1 → 1.2.1

package/js/dataTables.columnControl.js

@@ -1,4 +1,4 @@
-/*! ColumnControl 1.1.1
+/*! ColumnControl 1.2.1
  * Copyright (c) SpryMedia Ltd - datatables.net/license
  *
  * SVG icons: ISC License
@@ -81,73 +81,6 @@ function addClass(el, classes) {
     });
 }
 
-// The SVG for many of these icons are from Lucide ( https://lucide.dev ), which are available
-// under the ISC License. There are a number of custom icons as well. These are optimised through
-// https://optimize.svgomg.net/
-function wrap(paths) {
-    return ('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-        paths +
-        '</svg>');
-}
-var icons = {
-    chevronRight: wrap('<path d="m9 18 6-6-6-6"/>'),
-    // columns-3
-    columns: wrap('<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/>'),
-    // Custom
-    contains: wrap('<path d="M10 3h4v18h-4z"/><path d="M18 8h3v9h-3"/><path d="M6 17H3V8h3"/>'),
-    empty: wrap('<circle cx="12" cy="12" r="10"/>'),
-    ends: wrap('<path d="M21 3h-4v18h4z"/><path d="M13 8H3v9h10"/>'),
-    // Customised
-    equal: wrap('<line x1="5" x2="19" y1="9" y2="9"/><line x1="5" x2="19" y1="15" y2="15"/>'),
-    greater: wrap('<path d="m9 18 6-6-6-6"/>'),
-    // Custom
-    greaterOrEqual: wrap('<path d="m9 16 6-6-6-6"/><path d="m9 21 6-6"/>'),
-    // Custom
-    groupAdd: wrap('<path d="M6 21v-7.5m-3.549 3.75H9.75"/><rect width="13.5" height="7.5" x="3" y="3" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" fill="currentColor" rx="1.5"/>'),
-    // Custom
-    groupClear: wrap('<rect width="13.5" height="7.5" x="3" y="3" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" rx="1.5"/>'),
-    // Custom
-    groupTop: wrap('<rect width="13.5" height="7.5" x="3" y="3" fill="currentColor" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" rx="1.5"/>'),
-    // Custom
-    groupRemove: wrap('<path d="M2.451 17.25H9.75"/><rect width="13.5" height="7.5" x="3" y="3" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" rx="1.5"/>'),
-    less: wrap('<path d="m15 18-6-6 6-6"/>'),
-    // Custom
-    lessOrEqual: wrap('<path d="m15 16-6-6 6-6"/><path d="m15 21-6-6"/>'),
-    menu: wrap('<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>'),
-    // move-horizontal
-    move: wrap('<line x1="12" x2="12" y1="3" y2="21"/><polyline points="8 8 4 12 8 16"/><polyline points="16 16 20 12 16 8"/>'),
-    // arrow-left-from-line
-    moveLeft: wrap('<path d="m9 6-6 6 6 6"/><path d="M3 12h14"/><path d="M21 19V5"/>'),
-    // arrow-right-from-line
-    moveRight: wrap('<path d="M3 5v14"/><path d="M21 12H7"/><path d="m15 18 6-6-6-6"/>'),
-    // Custom
-    notContains: wrap('<path d="M15 4 9 20"/><path d="M3 8h18v9H3z"/>'),
-    notEmpty: wrap('<circle cx="12" cy="12" r="10"/><line x1="9" x2="15" y1="15" y2="9"/>'),
-    notEqual: wrap('<path d="M5 9h14"/><path d="M5 15h14"/><path d="M15 5 9 19"/>'),
-    // Custom
-    orderAddAsc: wrap('<path d="M17 21v-8"/><path d="M3 4h6"/><path d="M3 8h9"/><path d="M3 12h10"/><path d="M13 17h8"/>'),
-    // Custom
-    orderAddDesc: wrap('<path d="M17 21v-8"/><path d="M3 4h12"/><path d="M3 8h9"/><path d="M3 12h6"/><path d="M13 17h8"/>'),
-    orderAsc: wrap('<path d="m3 8 4-4 4 4"/><path d="M7 4v16"/><path d="M11 12h4"/><path d="M11 16h7"/><path d="M11 20h10"/>'),
-    // Custom
-    orderClear: wrap('<path d="m21 21-8-8"/><path d="M3 4h12"/><path d="M3 8h9"/><path d="M3 12h6"/><path d="m13 21 8-8"/>'),
-    orderDesc: wrap('<path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="M11 4h10"/><path d="M11 8h7"/><path d="M11 12h4"/>'),
-    // Custom
-    orderRemove: wrap('<path d="M3 4h12"/><path d="M3 8h9"/><path d="M3 12h6"/><path d="M13 17h8"/>'),
-    // Custom
-    orderNone: wrap('<path d="m3 8 4-4 4 4"/><path d="m11 16-4 4-4-4"/><path d="M7 4v16"/><path d="M15 8h6"/><path d="M15 16h6"/><path d="M13 12h8"/>'),
-    // search
-    search: wrap('<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'),
-    // search-x
-    searchClear: wrap('<path d="m13.5 8.5-5 5"/><path d="m8.5 8.5 5 5"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'),
-    // Custom
-    starts: wrap('<path d="M3 3h4v18H3z"/><path d="M11 8h10v9H11"/>'),
-    // tick
-    tick: wrap('<path d="M20 6 9 17l-5-5"/>'),
-    // x
-    x: wrap('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>')
-};
-
 /**
  * Close all or only other dropdowns
  *
@@ -395,6 +328,73 @@ var dropdownContent = {
     }
 };
 
+// The SVG for many of these icons are from Lucide ( https://lucide.dev ), which are available
+// under the ISC License. There are a number of custom icons as well. These are optimised through
+// https://optimize.svgomg.net/
+function wrap(paths) {
+    return ('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        paths +
+        '</svg>');
+}
+var icons = {
+    chevronRight: wrap('<path d="m9 18 6-6-6-6"/>'),
+    // columns-3
+    columns: wrap('<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/>'),
+    // Custom
+    contains: wrap('<path d="M10 3h4v18h-4z"/><path d="M18 8h3v9h-3"/><path d="M6 17H3V8h3"/>'),
+    empty: wrap('<circle cx="12" cy="12" r="10"/>'),
+    ends: wrap('<path d="M21 3h-4v18h4z"/><path d="M13 8H3v9h10"/>'),
+    // Customised
+    equal: wrap('<line x1="5" x2="19" y1="9" y2="9"/><line x1="5" x2="19" y1="15" y2="15"/>'),
+    greater: wrap('<path d="m9 18 6-6-6-6"/>'),
+    // Custom
+    greaterOrEqual: wrap('<path d="m9 16 6-6-6-6"/><path d="m9 21 6-6"/>'),
+    // Custom
+    groupAdd: wrap('<path d="M6 21v-7.5m-3.549 3.75H9.75"/><rect width="13.5" height="7.5" x="3" y="3" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" fill="currentColor" rx="1.5"/>'),
+    // Custom
+    groupClear: wrap('<rect width="13.5" height="7.5" x="3" y="3" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" rx="1.5"/>'),
+    // Custom
+    groupTop: wrap('<rect width="13.5" height="7.5" x="3" y="3" fill="currentColor" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" rx="1.5"/>'),
+    // Custom
+    groupRemove: wrap('<path d="M2.451 17.25H9.75"/><rect width="13.5" height="7.5" x="3" y="3" rx="1.5"/><rect width="7.5" height="7.5" x="13.5" y="13.5" rx="1.5"/>'),
+    less: wrap('<path d="m15 18-6-6 6-6"/>'),
+    // Custom
+    lessOrEqual: wrap('<path d="m15 16-6-6 6-6"/><path d="m15 21-6-6"/>'),
+    menu: wrap('<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>'),
+    // move-horizontal
+    move: wrap('<line x1="12" x2="12" y1="3" y2="21"/><polyline points="8 8 4 12 8 16"/><polyline points="16 16 20 12 16 8"/>'),
+    // arrow-left-from-line
+    moveLeft: wrap('<path d="m9 6-6 6 6 6"/><path d="M3 12h14"/><path d="M21 19V5"/>'),
+    // arrow-right-from-line
+    moveRight: wrap('<path d="M3 5v14"/><path d="M21 12H7"/><path d="m15 18 6-6-6-6"/>'),
+    // Custom
+    notContains: wrap('<path d="M15 4 9 20"/><path d="M3 8h18v9H3z"/>'),
+    notEmpty: wrap('<circle cx="12" cy="12" r="10"/><line x1="9" x2="15" y1="15" y2="9"/>'),
+    notEqual: wrap('<path d="M5 9h14"/><path d="M5 15h14"/><path d="M15 5 9 19"/>'),
+    // Custom
+    orderAddAsc: wrap('<path d="M17 21v-8"/><path d="M3 4h6"/><path d="M3 8h9"/><path d="M3 12h10"/><path d="M13 17h8"/>'),
+    // Custom
+    orderAddDesc: wrap('<path d="M17 21v-8"/><path d="M3 4h12"/><path d="M3 8h9"/><path d="M3 12h6"/><path d="M13 17h8"/>'),
+    orderAsc: wrap('<path d="m3 8 4-4 4 4"/><path d="M7 4v16"/><path d="M11 12h4"/><path d="M11 16h7"/><path d="M11 20h10"/>'),
+    // Custom
+    orderClear: wrap('<path d="m21 21-8-8"/><path d="M3 4h12"/><path d="M3 8h9"/><path d="M3 12h6"/><path d="m13 21 8-8"/>'),
+    orderDesc: wrap('<path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="M11 4h10"/><path d="M11 8h7"/><path d="M11 12h4"/>'),
+    // Custom
+    orderRemove: wrap('<path d="M3 4h12"/><path d="M3 8h9"/><path d="M3 12h6"/><path d="M13 17h8"/>'),
+    // Custom
+    orderNone: wrap('<path d="m3 8 4-4 4 4"/><path d="m11 16-4 4-4-4"/><path d="M7 4v16"/><path d="M15 8h6"/><path d="M15 16h6"/><path d="M13 12h8"/>'),
+    // search
+    search: wrap('<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'),
+    // search-x
+    searchClear: wrap('<path d="m13.5 8.5-5 5"/><path d="m8.5 8.5 5 5"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'),
+    // Custom
+    starts: wrap('<path d="M3 3h4v18H3z"/><path d="M11 8h10v9H11"/>'),
+    // tick
+    tick: wrap('<path d="M20 6 9 17l-5-5"/>'),
+    // x
+    x: wrap('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>')
+};
+
 var _namespace = 0;
 var Button = /** @class */ (function () {
     /**
@@ -1446,13 +1446,14 @@ var SearchInput = /** @class */ (function () {
     /**
      * Create a container element, for consistent DOM structure and styling
      */
-    function SearchInput(dt, idx) {
+    function SearchInput(dt, idx, columnUnique) {
         var _this = this;
         this._type = 'text';
         this._sspTransform = null;
         this._sspData = {};
         this._dt = dt;
         this._idx = idx;
+        this._colUnique = columnUnique;
         this._dom = {
             clear: createElement('span', 'dtcc-search-clear', icons['x']),
             container: createElement('div', SearchInput.classes.container),
@@ -1493,10 +1494,10 @@ var SearchInput = /** @class */ (function () {
             if (!data.columnControl) {
                 data.columnControl = {};
             }
-            if (!data.columnControl[_this._idx]) {
-                data.columnControl[_this._idx] = {};
+            if (!data.columnControl[_this._colUnique]) {
+                data.columnControl[_this._colUnique] = {};
             }
-            data.columnControl[_this._idx].searchInput = {
+            data.columnControl[_this._colUnique].searchInput = {
                 logic: dom.select.value,
                 type: _this._type,
                 value: dom.input.value
@@ -1719,7 +1720,7 @@ var SearchInput = /** @class */ (function () {
     SearchInput.prototype._stateLoad = function (state) {
         var _a, _b;
         var dom = this._dom;
-        var idx = this._idx;
+        var idx = this._colUnique;
         var loadedState = (_b = (_a = state === null || state === void 0 ? void 0 : state.columnControl) === null || _a === void 0 ? void 0 : _a[idx]) === null || _b === void 0 ? void 0 : _b.searchInput;
         if (loadedState) {
             // The search callback needs to know if we are loading an existing state or not
@@ -1743,6 +1744,7 @@ var SearchInput = /** @class */ (function () {
 var searchDateTime = {
     defaults: {
         clear: true,
+        excludeLogic: [],
         format: '',
         mask: '',
         placeholder: '',
@@ -1759,7 +1761,7 @@ var searchDateTime = {
         var pickerFormat = '';
         var dataSrcFormat = '';
         var dateTime;
-        var searchInput = new SearchInput(dt, this.idx())
+        var searchInput = new SearchInput(dt, this.idx(), this.idxOriginal())
             .type('date')
             .addClass('dtcc-searchDateTime')
             .sspTransform(function (val) { return toISO(val, pickerFormat, moment, luxon); })
@@ -1775,17 +1777,28 @@ var searchDateTime = {
             { label: dt.i18n(i18nBase + 'less', 'Before'), value: 'less' },
             { label: dt.i18n(i18nBase + 'empty', 'Empty'), value: 'empty' },
             { label: dt.i18n(i18nBase + 'notEmpty', 'Not empty'), value: 'notEmpty' }
-        ])
+        ].filter(function (x) { return !config.excludeLogic.includes(x.value); }))
             .search(function (searchType, searchTerm, loadingState) {
+            // If in a dropdown, set the parent levels as active
+            if (config._parents) {
+                config._parents.forEach(function (btn) {
+                    return btn.activeList(_this.unique() + 'date', searchType === 'empty' || searchType === 'notEmpty' || !!searchTerm);
+                });
+            }
+            var column = dt.column(_this.idx());
             // When SSP, don't apply a filter here, SearchInput will add to the submit data
             if (dt.page.info().serverSide) {
+                // Need to let the searchClear button know if we have a filter
+                // applied though.
+                column.init().__ccList = !!(searchType === 'empty' ||
+                    searchType === 'notEmpty' ||
+                    searchTerm);
                 if (!loadingState) {
                     dt.draw();
                 }
                 return;
             }
             var mask = config.mask;
-            var column = dt.column(_this.idx());
             var search = searchTerm === ''
                 ? ''
                 : dateToNum(dateTime && fromPicker ? dateTime.val() : searchTerm.trim(), pickerFormat, moment, luxon, mask);
@@ -1826,12 +1839,6 @@ var searchDateTime = {
                     return dateToNum(haystack, dataSrcFormat, moment, luxon, mask) < search;
                 });
             }
-            // If in a dropdown, set the parent levels as active
-            if (config._parents) {
-                config._parents.forEach(function (btn) {
-                    return btn.activeList(_this.unique(), !!column.search.fixed('dtcc'));
-                });
-            }
             if (!loadingState) {
                 column.draw();
             }
@@ -1840,9 +1847,7 @@ var searchDateTime = {
         dt.ready(function () {
             var DateTime = DataTable.use('datetime');
             dataSrcFormat = getFormat(dt, _this.idx());
-            pickerFormat = config.format
-                ? config.format
-                : dataSrcFormat;
+            pickerFormat = config.format ? config.format : dataSrcFormat;
             if (DateTime) {
                 dateTime = new DateTime(searchInput.input(), {
                     format: pickerFormat,
@@ -2011,20 +2016,21 @@ function toISO(input, srcFormat, moment, luxon) {
 }
 
 /** Set the options to show in the list */
-function setOptions(checkList, opts) {
+function setOptions(checkList, opts, activeList) {
+    if (activeList === void 0) { activeList = []; }
     var existing = checkList.values();
     checkList.clear();
     for (var i = 0; i < opts.length; i++) {
         if (typeof opts[i] === 'object') {
             checkList.add({
-                active: false,
+                active: activeList.includes(opts[i].value),
                 label: opts[i].label,
                 value: opts[i].value
             }, i === opts.length - 1);
         }
         else {
             checkList.add({
-                active: false,
+                active: activeList.includes(opts[i]),
                 label: opts[i],
                 value: opts[i]
             }, i === opts.length - 1);
@@ -2131,11 +2137,18 @@ var searchList = {
         // The search can be applied from a stored start at start up before the options are
         // available. It can also be applied by user input, so it is generalised into this function.
         var applySearch = function (values) {
+            // If in a dropdown, set the parent levels as active
+            if (config._parents) {
+                config._parents.forEach(function (btn) { return btn.activeList(_this.unique() + 'list', values && !!values.length); });
+            }
+            var col = dt.column(_this.idx());
             // When SSP, don't do any client-side filtering
             if (dt.page.info().serverSide) {
+                // Need to let the searchClear button know if we have a filter
+                // applied though.
+                col.init().__ccList = values && values.length !== 0;
                 return;
             }
-            var col = dt.column(_this.idx());
             if (!values) {
                 return;
             }
@@ -2149,10 +2162,6 @@ var searchList = {
                     return values.includes(val);
                 });
             }
-            // If in a dropdown, set the parent levels as active
-            if (config._parents) {
-                config._parents.forEach(function (btn) { return btn.activeList(_this.unique(), !!values.length); });
-            }
         };
         var checkList = new CheckList(dt, this, {
             search: config.search,
@@ -2171,8 +2180,9 @@ var searchList = {
                 dt.draw();
             }
         });
+        loadedValues = getState(this.idx(), dt.state.loaded());
         if (config.options) {
-            setOptions(checkList, config.options);
+            setOptions(checkList, config.options, loadedValues);
         }
         else {
             dt.ready(function () {
@@ -2183,9 +2193,11 @@ var searchList = {
                 // Need to wait for the draw to complete so the table has the latest data
                 dt.one('draw', function () {
                     reloadOptions(dt, config, _this.idx(), checkList, loadedValues);
+                    loadedValues = null;
                 });
             });
         }
+        var sspValues = [];
         // Data for server-side processing
         if (dt.page.info().serverSide) {
             dt.on('preXhr.DT', function (e, s, d) {
@@ -2196,22 +2208,24 @@ var searchList = {
                 if (!d.columns[_this.idx()].columnControl) {
                     d.columns[_this.idx()].columnControl = {};
                 }
+                var values = sspValues.length ? sspValues : checkList.values();
+                sspValues = [];
                 // We need the indexes in the HTTP parameter names (for .NET), so use an object.
-                d.columns[_this.idx()].columnControl.list = Object.assign({}, checkList.values());
+                d.columns[_this.idx()].columnControl.list = Object.assign({}, values);
             });
         }
         // Unlike the SearchInput based search contents, CheckList does not handle state saving
         // (since the mechanism for column visibility is different), so state saving is handled
         // here.
         dt.on('stateLoaded', function (e, s, state) {
-            var values = getState(_this.idx(), state);
+            var values = getState(_this.idxOriginal(), state);
             if (values) {
                 checkList.values(values);
                 applySearch(values);
             }
         });
         dt.on('stateSaveParams', function (e, s, data) {
-            var idx = _this.idx();
+            var idx = _this.idxOriginal();
             if (!data.columnControl) {
                 data.columnControl = {};
             }
@@ -2233,8 +2247,12 @@ var searchList = {
                 setOptions(checkList, options);
             }
         };
-        loadedValues = getState(this.idx(), dt.state.loaded());
         applySearch(loadedValues);
+        // If SSP, then there are no options yet, so for a saved state we need
+        // to use the values from the state in a temporary variable
+        if (dt.page.info().serverSide && loadedValues && loadedValues.length) {
+            sspValues = loadedValues;
+        }
         return checkList.element();
     }
 };
@@ -2242,6 +2260,7 @@ var searchList = {
 var searchNumber = {
     defaults: {
         clear: true,
+        excludeLogic: [],
         placeholder: '',
         title: '',
         titleAttr: ''
@@ -2250,7 +2269,7 @@ var searchNumber = {
         var _this = this;
         var dt = this.dt();
         var i18nBase = 'columnControl.search.number.';
-        var searchInput = new SearchInput(dt, this.idx())
+        var searchInput = new SearchInput(dt, this.idx(), this.idxOriginal())
             .type('num')
             .addClass('dtcc-searchNumber')
             .clearable(config.clear)
@@ -2266,19 +2285,34 @@ var searchNumber = {
                 value: 'greaterOrEqual'
             },
             { label: dt.i18n(i18nBase + 'less', 'Less than'), value: 'less' },
-            { label: dt.i18n(i18nBase + 'lessOrEqual', 'Less or equal'), value: 'lessOrEqual' },
+            {
+                label: dt.i18n(i18nBase + 'lessOrEqual', 'Less or equal'),
+                value: 'lessOrEqual'
+            },
             { label: dt.i18n(i18nBase + 'empty', 'Empty'), value: 'empty' },
             { label: dt.i18n(i18nBase + 'notEmpty', 'Not empty'), value: 'notEmpty' }
-        ])
+        ].filter(function (x) { return !config.excludeLogic.includes(x.value); }))
             .search(function (searchType, searchTerm, loadingState) {
-            // When SSP, don't apply a filter here, SearchInput will add to the submit data
+            // If in a dropdown, set the parent levels as active
+            if (config._parents) {
+                config._parents.forEach(function (btn) {
+                    return btn.activeList(_this.unique() + 'number', searchType === 'empty' || searchType === 'notEmpty' || !!searchTerm);
+                });
+            }
+            var column = dt.column(_this.idx());
+            // When SSP, don't apply a filter here, SearchInput will add to
+            // the submit data
             if (dt.page.info().serverSide) {
+                // Need to let the searchClear button know if we have a filter
+                // applied though.
+                column.init().__ccList = !!(searchType === 'empty' ||
+                    searchType === 'notEmpty' ||
+                    searchTerm);
                 if (!loadingState) {
                     dt.draw();
                 }
                 return;
             }
-            var column = dt.column(_this.idx());
             if (searchType === 'empty') {
                 column.search.fixed('dtcc', function (haystack) { return !haystack; });
             }
@@ -2312,12 +2346,6 @@ var searchNumber = {
             else if (searchType === 'lessOrEqual') {
                 column.search.fixed('dtcc', function (haystack) { return stringToNum(haystack) <= searchTerm; });
             }
-            // If in a dropdown, set the parents as active
-            if (config._parents) {
-                config._parents.forEach(function (btn) {
-                    return btn.activeList(_this.unique(), !!column.search.fixed('dtcc'));
-                });
-            }
             if (!loadingState) {
                 column.draw();
             }
@@ -2347,6 +2375,7 @@ function stringToNum(d) {
 var searchText = {
     defaults: {
         clear: true,
+        excludeLogic: [],
         placeholder: '',
         title: '',
         titleAttr: ''
@@ -2355,7 +2384,7 @@ var searchText = {
         var _this = this;
         var dt = this.dt();
         var i18nBase = 'columnControl.search.text.';
-        var searchInput = new SearchInput(dt, this.idx())
+        var searchInput = new SearchInput(dt, this.idx(), this.idxOriginal())
             .addClass('dtcc-searchText')
             .clearable(config.clear)
             .placeholder(config.placeholder)
@@ -2373,16 +2402,27 @@ var searchText = {
             { label: dt.i18n(i18nBase + 'ends', 'Ends'), value: 'ends' },
             { label: dt.i18n(i18nBase + 'empty', 'Empty'), value: 'empty' },
             { label: dt.i18n(i18nBase + 'notEmpty', 'Not empty'), value: 'notEmpty' }
-        ])
+        ].filter(function (x) { return !config.excludeLogic.includes(x.value); }))
             .search(function (searchType, searchTerm, loadingState) {
+            // If in a dropdown, set the parent levels as active
+            if (config._parents) {
+                config._parents.forEach(function (btn) {
+                    return btn.activeList(_this.unique() + 'text', searchType === 'empty' || searchType === 'notEmpty' || !!searchTerm);
+                });
+            }
+            var column = dt.column(_this.idx());
             // When SSP, don't apply a filter here, SearchInput will add to the submit data
             if (dt.page.info().serverSide) {
+                // Need to let the searchClear button know if we have a filter
+                // applied though.
+                column.init().__ccList = !!(searchType === 'empty' ||
+                    searchType === 'notEmpty' ||
+                    searchTerm);
                 if (!loadingState) {
                     dt.draw();
                 }
                 return;
             }
-            var column = dt.column(_this.idx());
             searchTerm = searchTerm.toLowerCase();
             if (searchType === 'empty') {
                 column.search.fixed('dtcc', function (haystack) { return !haystack; });
@@ -2427,7 +2467,7 @@ var searchText = {
             // If in a dropdown, set the parent levels as active
             if (config._parents) {
                 config._parents.forEach(function (btn) {
-                    return btn.activeList(_this.unique(), !!column.search.fixed('dtcc'));
+                    return btn.activeList(_this.unique() + 'string', !!column.search.fixed('dtcc'));
                 });
             }
             if (!loadingState) {
@@ -2444,15 +2484,15 @@ var search = {
     },
     init: function (config) {
         var _this = this;
-        var _a, _b, _c;
+        var _a, _b;
         var dt = this.dt();
         var idx = this.idx();
         var displayEl;
-        var loadedState = (_c = (_b = (_a = dt.state.loaded()) === null || _a === void 0 ? void 0 : _a.columnControl) === null || _b === void 0 ? void 0 : _b[idx]) === null || _c === void 0 ? void 0 : _c.searchInput;
+        var loadedState = (_b = (_a = dt.state.loaded()) === null || _a === void 0 ? void 0 : _a.columnControl) === null || _b === void 0 ? void 0 : _b[idx];
         var initType = function (type) {
             var json = getJsonOptions(dt, idx);
             // Attempt to match what type of search should be shown
-            if (config.allowSearchList && json) {
+            if (type === 'list' || (config.allowSearchList && json)) {
                 // We've got a list of JSON options, and are allowed to show the searchList
                 return searchList.init.call(_this, Object.assign({}, searchList.defaults, config));
             }
@@ -2473,9 +2513,14 @@ var search = {
         // to allow the state to be applied to the table and the first draw to have a filter
         // applied (if it is needed).
         if (loadedState) {
-            displayEl = initType(loadedState.type);
+            if (loadedState.searchInput) {
+                displayEl = initType(loadedState.searchInput.type);
+            }
+            else if (loadedState.searchList) {
+                displayEl = initType('list');
+            }
         }
-        else {
+        if (!displayEl) {
             // Wait until we can get the data type for the column and the run the corresponding type
             displayEl = document.createElement('div');
             dt.ready(function () {
@@ -2507,9 +2552,12 @@ var searchClear$1 = {
             .enable(false);
         dt.on('draw', function () {
             // change enable state
-            var search = dt.column(_this.idx()).search.fixed('dtcc');
-            var searchList = dt.column(_this.idx()).search.fixed('dtcc-list');
-            btn.enable(!!(search || searchList));
+            var col = dt.column(_this.idx());
+            var search = col.search.fixed('dtcc');
+            var searchList = col.search.fixed('dtcc-list');
+            var searchSearchSsp = col.init().__ccSearch;
+            var searchListSsp = col.init().__ccList;
+            btn.enable(!!(search || searchList || searchSearchSsp || searchListSsp));
         });
         return btn.element();
     }
@@ -2694,6 +2742,20 @@ var ColumnControl = /** @class */ (function () {
     ColumnControl.prototype.idx = function () {
         return this._s.columnIdx;
     };
+    /**
+     * Get the column index that was originally used for initialisation of this
+     * column. This is important when used with ColReorder and when arrays can
+     * be reordered (i.e. state saving on initialisation).
+     *
+     * @returns Column index
+     */
+    ColumnControl.prototype.idxOriginal = function () {
+        var currentIdx = this.idx();
+        if (this._dt.colReorder) {
+            return this._dt.colReorder.transpose(currentIdx, 'toOriginal');
+        }
+        return currentIdx;
+    };
     /**
      * Covert the options from `content` in the DataTable initialisation for this instance into a
      * resolved plugin and options.
@@ -2788,7 +2850,7 @@ var ColumnControl = /** @class */ (function () {
     /** SVG icons that can be used by the content plugins */
     ColumnControl.icons = icons;
     /** Version */
-    ColumnControl.version = '1.1.1';
+    ColumnControl.version = '1.2.1';
     return ColumnControl;
 }());
 
@@ -2890,7 +2952,10 @@ DataTable.ext.buttons.ccSearchClear = {
             // No point in wasting clock cycles if we already know it will be enabled
             if (!glob) {
                 dt.columns().every(function () {
-                    if (this.search.fixed('dtcc') || this.search.fixed('dtcc-list')) {
+                    if (this.search.fixed('dtcc') ||
+                        this.search.fixed('dtcc-list') ||
+                        this.init().__ccList // server-side processing
+                    ) {
                         enabled = true;
                     }
                 });