Fix for #5061 adding toggleFilterControl () method (#5069)

* Fix for #5061 adding toggleFilterControl () method

* #5061 Refactored toggleFilterControl and introduced filterControlHidden attr

* #5061 changed filterControlHidden to filterControlVisible

* #5061 renamed const filterControl to

* #5061 also showing/hiding no-filter-control element on toggle

* #5061 also showing/hiding no-filter-control elements on creating controls

* Fixed wrong class name

* #5061 Updated docs

Co-authored-by: Dennis Hernández <dennishernandezvargas@gmail.com>

site/docs/extensions/filter-control.md

@@ -29,10 +29,22 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 
 - **Detail:**
 
-   Set true to add an `input` or `select` into the column.
+   Set to `true` to add an `input` or `select` into the column.
 
 - **Default:** `false`
 
+### filterControlVisible
+
+- **Attribute:** `data-filter-control-visible`
+
+- **type:** `Boolean`
+
+- **Detail:**
+
+   Set to `false` to hide the filter controls.
+
+- **Default:** `true`
+
 ### alignmentSelectControlOptions
 
 - **Attribute:** `data-alignment-select-control-options`
@@ -254,6 +266,10 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 
 * Clear all the controls added by this plugin (similar to showSearchClearButton option).
 
+### toggleFilterControl
+
+* Toggles the visibility (show/hide) of the filter controls.
+
 ## Localizations
 
 ### formatClearFilters

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

@@ -481,8 +481,12 @@ const UtilsFilterControl = {
         that.triggerSearch()
       }
 
+      if (!that.options.filterControlVisible) {
+        UtilsFilterControl.getControlContainer(that).find('.filter-control, .no-filter-control').hide()
+      }
+
     } else {
-      UtilsFilterControl.getControlContainer(that).find('.filterControl').hide()
+      UtilsFilterControl.getControlContainer(that).find('.filter-control, .no-filter-control').hide()
     }
   },
   getDirectionOfSelectOptions (_alignment) {
@@ -559,6 +563,7 @@ const filterDataMethods = {
 
 $.extend($.fn.bootstrapTable.defaults, {
   filterControl: false,
+  filterControlVisible: true,
   onColumnSearch (field, text) {
     return false
   },
@@ -632,6 +637,7 @@ $.extend($.fn.bootstrapTable.defaults, {
 
 $.fn.bootstrapTable.methods.push('triggerSearch')
 $.fn.bootstrapTable.methods.push('clearFilterControl')
+$.fn.bootstrapTable.methods.push('toggleFilterControl')
 
 $.BootstrapTable = class extends $.BootstrapTable {
   init () {
@@ -958,4 +964,15 @@ $.BootstrapTable = class extends $.BootstrapTable {
       }
     }
   }
+
+  toggleFilterControl () {
+    this.options.filterControlVisible = !this.options.filterControlVisible
+    const $filterControls = UtilsFilterControl.getControlContainer(this).find('.filter-control, .no-filter-control')
+    if (this.options.filterControlVisible) {
+      $filterControls.show()
+    } else {
+      $filterControls.hide()
+      this.clearFilterControl()
+    }
+  }
 }