Improvements in filter-control extension (#2460)

* Release the new extension

* Update the resetSearch docs

* Adding a separated css file and disabled the unused options from select control

* Added new option disableUnusedSelectOptions

* Instead of disable, hide the option

* Use hide/show instead of display:none/block

* Fix #2461

Example: pagination true: http://jsfiddle.net/djhvscf/hcbg3k8g/13/
pagination false: http://jsfiddle.net/djhvscf/hcbg3k8g/14/

* Fix the filter-control version number

CHANGELOG.md

@@ -16,6 +16,12 @@ ChangeLog
 - fix(export extension): fix #2220, selected rows does not work when data-pagination-side is server
 - feat(cookie extension): fix #2386, add `getCookies` method
 - feat(multiple-selection-row extension): add multiple-selection-row extension
+- feat(filter-control extension): fix #1540, disable unnecessary/unused values from select options
+- feat(filter-control extension): fix #2448, create a css file which contains the style for this extension
+
+#### Breaking changes in 1.11.1
+- **Filter-Control extension**: deleted the inline-style and now this extension is using a separated css file.
+
 
 ### 1.11.0
 

src/bootstrap-table.js

@@ -2510,6 +2510,7 @@
         });
 
         this.initSearch();
+        this.initPagination();
         this.initSort();
         this.initBody(true);
     };

src/extensions/filter-control/README.md

@@ -6,6 +6,7 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 ## Usage
 
 ```html
+<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
 <script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
 ```
 
@@ -20,7 +21,7 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 ### filterShowClear
 
 * type: Boolean
-* description: Set true to add a button to clear all the controls added by this plugin
+* description: Set true to add a button to clear all the controls added by this plugin.
 * default: `false`
 
 ### alignmentSelectControlOptions
@@ -29,6 +30,12 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 * description: Set the alignemnt of the select control options. Use Use `left`, `right` or `auto`.
 * default: `undefined`
 
+### hideUnusedSelectOptions
+
+* type: Boolean
+* description: Set to true in order to hide the options that are not in the table. This option does not work on server-side pagination.
+* default: `false`
+
 ## Column options
 
 ### filterControl

src/extensions/filter-control/bootstrap-table-filter-control.css

@@ -0,0 +1,13 @@
+/**
+ * @author: Dennis Hernández
+ * @webSite: http://djhvscf.github.io/Blog
+ * @version: v2.1.1
+ */
+
+.no-filter-control {
+    height: 34px;
+}
+
+.filter-control {
+    margin: 0 2px 2px 2px;
+}

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -11,6 +11,24 @@
     var sprintf = $.fn.bootstrapTable.utils.sprintf,
         objectKeys = $.fn.bootstrapTable.utils.objectKeys;
 
+    var getOptionsFromSelectControl = function (selectControl) {
+        return selectControl.get(selectControl.length - 1).options;
+    };
+
+    var hideUnusedSelectOptions = function (selectControl, uniqueValues) {
+        var options = getOptionsFromSelectControl(selectControl);
+
+        for (var i = 0; i < options.length; i++) {
+            if (options[i].value !== "") {
+                if (!uniqueValues.hasOwnProperty(options[i].value)) {
+                    selectControl.find(sprintf("option[value='%s']", options[i].value)).hide(); 
+                } else {
+                    selectControl.find(sprintf("option[value='%s']", options[i].value)).show(); 
+                }
+            }
+        }
+    };
+
     var addOptionToSelectControl = function (selectControl, value, text) {
         value = $.trim(value);
         selectControl = $(selectControl.get(selectControl.length - 1));
@@ -39,7 +57,7 @@
     };
 
     var existOptionInSelectControl = function (selectControl, value) {
-        var options = selectControl.get(selectControl.length - 1).options;
+        var options = getOptionsFromSelectControl(selectControl);
         for (var i = 0; i < options.length; i++) {
             if (options[i].value === value.toString()) {
                 //The value is not valid to add
@@ -161,7 +179,7 @@
     };
 
     var initFilterSelectControls = function (that) {
-        var data = that.options.data,
+        var data = that.data,
             itemsPerPage = that.pageTo < that.options.data.length ? that.options.data.length : that.pageTo,
 
             isColumnSearchableViaSelect = function (column) {
@@ -198,16 +216,21 @@
 
                     uniqueValues[formattedValue] = fieldValue;
                 }
+                
                 for (var key in uniqueValues) {
                     addOptionToSelectControl(selectControl, uniqueValues[key], key);
                 }
 
                 sortSelectControl(selectControl);
+
+                if (that.options.hideUnusedSelectOptions) {
+                    hideUnusedSelectOptions(selectControl, uniqueValues);
+                }
             }
         });
     };
 
-    var escapeID = function( id ) {
+    var escapeID = function(id) {
        return String(id).replace( /(:|\.|\[|\]|,)/g, "\\$1" );
    };
 
@@ -226,9 +249,9 @@
             }
 
             if (!column.filterControl) {
-                html.push('<div style="height: 34px;"></div>');
+                html.push('<div class="no-filter-control"></div>');
             } else {
-                html.push('<div style="margin: 0 2px 2px 2px;" class="filterControl">');
+                html.push('<div class="filter-control">');
 
                 var nameControl = column.filterControl.toLowerCase();
                 if (column.searchable && that.options.filterTemplate[nameControl]) {