Merge branch 'develop' into feature/group-by_merge

site/docs/api/localizations.md

@@ -156,11 +156,18 @@ $('#table').bootstrapTable({
 
 - **Default:** `'Columns'`
 
+## formatColumnsToggleAll
+
+- **Parameter:** `undefined`
+
+- **Default:** `'Toggle all'`
+
 ## formatFullscreen
 
 - **Parameter:** `undefined`
 
 - **Default:** `'Fullscreen'`
+
 ## formatAllRows
 
 - **Parameter:** `undefined`

site/docs/api/table-options.md

@@ -794,6 +794,20 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Strict Search](https://examples.bootstrap-table.com/#options/strict-search.html)
 
+## visibleSearch
+
+- **Attribute:** `visible-search`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  set `true` to search only in visible column/data, if the data contains other values which are not displayed they will be ignored while searching.
+
+- **Default:** `false`
+
+- **Example:** [visible search](https://examples.bootstrap-table.com/#options/visible-search.html)
+
 ## showButtonIcons
 
 - **Attribute:** `show-button-icons`
@@ -1003,6 +1017,20 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Basic Columns](https://examples.bootstrap-table.com/#options/basic-columns.html) and [Large Columns](https://examples.bootstrap-table.com/#options/large-columns.html)
 
+## showColumnsToggleAll
+
+- **Attribute:** `data-show-columns-toggle-all`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `true` to show a toogle all checkbox within the columns option/dropdown.
+
+- **Default:** `false`
+
+- **Example:** [Columns Toggle All](https://examples.bootstrap-table.com/#options/columns-toggle-all.html)
+
 ## minimumCountColumns
 
 - **Attribute:** `data-minimum-count-columns`
@@ -1443,6 +1471,22 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Table Icons](https://examples.bootstrap-table.com/#options/table-icons.html)
 
+## html
+
+- **Attribute:** `data-html`
+
+- **Type:** `Object`
+
+- **Detail:**
+
+  Defines some html of the table.
+
+- **Default:**
+
+  Too much code, please checkout the source code of the `index.js`
+
+- **Example:** [Table Html](https://examples.bootstrap-table.com/#options/table-html.html)
+
 ## iconSize
 
 - **Attribute:** `data-icon-size`

site/docs/extensions/filter-control.md

@@ -29,6 +29,16 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 
 - **Default:** `false`
 
+### filterDataCollector
+
+- **type:** `Function`
+
+- **Detail:**
+
+   Collect data which will added to the select filter, to filter through e.g. labels which are comma separated and displayed with a formatter.
+
+- **Default:** `undefined`
+
 ### alignmentSelectControlOptions
 
 - **type:** `String`

src/bootstrap-table.js

@@ -451,6 +451,7 @@ class BootstrapTable {
     this.getCaret()
 
     if (this.options.sidePagination === 'server') {
+      this.options.pageNumber = 1
       this.initServer(this.options.silentSort)
       return
     }
@@ -527,10 +528,21 @@ class BootstrapTable {
         <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" data-toggle="dropdown"
         aria-label="Columns" title="${o.formatColumns()}">
         ${o.showButtonIcons ? Utils.sprintf(this.constants.html.icon, o.iconsPrefix, o.icons.columns) : '' }
-        ${o.showButtonText ? o.formatColumns() : ''} 
+        ${o.showButtonText ? o.formatColumns() : ''}
         ${this.constants.html.dropdownCaret}
         </button>
-        ${this.constants.html.toobarDropdow[0]}`)
+        ${this.constants.html.toolbarDropdown[0]}`)
+
+      if (o.showColumnsToggleAll) {
+        const allFieldsVisible = this.getVisibleColumns().length === this.columns.length
+        html.push(
+          Utils.sprintf(this.constants.html.toolbarDropdownItem,
+            Utils.sprintf('<input type="checkbox" class="toggle-all" %s> <span>%s</span>', allFieldsVisible ? 'checked="checked"' : '', o.formatColumnsToggleAll())
+          )
+        )
+
+        html.push(this.constants.html.toolbarDropdownSeperator)
+      }
 
       this.columns.forEach((column, i) => {
         if (column.radio || column.checkbox) {
@@ -544,13 +556,13 @@ class BootstrapTable {
         const checked = column.visible ? ' checked="checked"' : ''
 
         if (column.switchable) {
-          html.push(Utils.sprintf(this.constants.html.toobarDropdowItem,
+          html.push(Utils.sprintf(this.constants.html.toolbarDropdownItem,
             Utils.sprintf('<input type="checkbox" data-field="%s" value="%s"%s> <span>%s</span>',
               column.field, i, checked, column.title)))
           switchableCount++
         }
       })
-      html.push(this.constants.html.toobarDropdow[1], '</div>')
+      html.push(this.constants.html.toolbarDropdown[1], '</div>')
     }
 
     html.push('</div>')
@@ -584,6 +596,8 @@ class BootstrapTable {
 
     if (o.showColumns) {
       $keepOpen = this.$toolbar.find('.keep-open')
+      const $checkboxes = $keepOpen.find('input:not(".toggle-all")')
+      const $toggleAll = $keepOpen.find('input.toggle-all')
 
       if (switchableCount <= o.minimumCountColumns) {
         $keepOpen.find('input').prop('disabled', true)
@@ -592,11 +606,17 @@ class BootstrapTable {
       $keepOpen.find('li, label').off('click').on('click', e => {
         e.stopImmediatePropagation()
       })
-      $keepOpen.find('input').off('click').on('click', ({currentTarget}) => {
+
+      $checkboxes.off('click').on('click', ({currentTarget}) => {
         const $this = $(currentTarget)
 
         this._toggleColumn($this.val(), $this.prop('checked'), false)
         this.trigger('column-switch', $this.data('field'), $this.prop('checked'))
+        $toggleAll.prop('checked', $checkboxes.filter(':checked').length === this.columns.length)
+      })
+
+      $toggleAll.off('click').on('click', ({currentTarget}) => {
+        this._toggleAllColumns($(currentTarget).prop('checked'))
       })
     }
 
@@ -653,14 +673,18 @@ class BootstrapTable {
     }
   }
 
-  onSearch ({currentTarget, firedByInitSearchText} = {}) {
-    if (currentTarget !== undefined) {
+  onSearch ({currentTarget, firedByInitSearchText} = {}, overwriteSearchText = true) {
+    if (currentTarget !== undefined && overwriteSearchText) {
       const text = $(currentTarget).val().trim()
 
       if (this.options.trimOnSearch && $(currentTarget).val() !== text) {
         $(currentTarget).val(text)
       }
 
+      if (this.searchText === text) {
+        return
+      }
+
       this.searchText = text
       this.options.searchText = text
     }
@@ -729,9 +753,10 @@ class BootstrapTable {
         }) : this.options.data
       }
 
+      const visibleFields = this.getVisibleFields()
       this.data = s ? this.data.filter((item, i) => {
         for (let j = 0; j < this.header.fields.length; j++) {
-          if (!this.header.searchables[j]) {
+          if (!this.header.searchables[j] || (this.options.visibleSearch && visibleFields.indexOf(this.header.fields[j]) === -1)) {
             continue
           }
 
@@ -1931,12 +1956,11 @@ class BootstrapTable {
 
   getSelections () {
     // fix #2424: from html with checkbox
-    return this.options.data.filter(row =>
-      row[this.header.stateField] === true)
+    return this.data.filter(row => row[this.header.stateField] === true)
   }
 
   getAllSelections () {
-    return this.options.data.filter(row => row[this.header.stateField])
+    return this.options.data.filter(row => row[this.header.stateField] === true)
   }
 
   load (_data) {
@@ -2232,7 +2256,7 @@ class BootstrapTable {
   }
 
   _toggleColumn (index, checked, needUpdate) {
-    if (index === -1) {
+    if (index === -1 || this.columns[index].visible === checked) {
       return
     }
     this.columns[index].visible = checked
@@ -2271,8 +2295,11 @@ class BootstrapTable {
   }
 
   _toggleAllColumns (visible) {
-    for (const column of this.columns) {
+    for (const column of this.columns.slice().reverse()) {
       if (column.switchable) {
+        if (!visible && this.options.showColumns && this.getVisibleColumns().length === this.options.minimumCountColumns) {
+          continue
+        }
         column.visible = visible
       }
     }
@@ -2282,7 +2309,17 @@ class BootstrapTable {
     this.initPagination()
     this.initBody()
     if (this.options.showColumns) {
-      const $items = this.$toolbar.find('.keep-open input').prop('disabled', false)
+      const $items = this.$toolbar.find('.keep-open input:not(".toggle-all")').prop('disabled', false)
+
+      if (visible) {
+        $items.prop('checked', visible)
+      } else {
+        $items.get().reverse().forEach((item) => {
+          if ($items.filter(':checked').length > this.options.minimumCountColumns) {
+            $(item).prop('checked', visible)
+          }
+        })
+      }
 
       if ($items.filter(':checked').length <= this.options.minimumCountColumns) {
         $items.filter(':checked').prop('disabled', true)
@@ -2415,7 +2452,7 @@ class BootstrapTable {
     }
 
     const rows = []
-    this.options.data.forEach((row, i) => {
+    this.data.forEach((row, i) => {
       if (!row.hasOwnProperty(obj.field)) {
         return false
       }

src/constants/index.js

@@ -44,8 +44,9 @@ const CONSTANTS = {
       buttonActive: 'active'
     },
     html: {
-      toobarDropdow: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
-      toobarDropdowItem: '<li role="menuitem"><label>%s</label></li>',
+      toolbarDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
+      toolbarDropdownItem: '<li role="menuitem"><label>%s</label></li>',
+      toolbarDropdownSeperator: '<li class="divider"></li>',
       pageDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
       pageDropdownItem: '<li role="menuitem" class="%s"><a href="#">%s</a></li>',
       dropdownCaret: '<span class="caret"></span>',
@@ -88,10 +89,11 @@ const CONSTANTS = {
       buttonActive: 'active'
     },
     html: {
-      toobarDropdow: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
-      toobarDropdowItem: '<label class="dropdown-item">%s</label>',
+      toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
+      toolbarDropdownItem: '<label class="dropdown-item">%s</label>',
       pageDropdown: ['<div class="dropdown-menu">', '</div>'],
       pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
+      toolbarDropdownSeperator: '<div class="dropdown-divider"></div>',
       dropdownCaret: '<span class="caret"></span>',
       pagination: ['<ul class="pagination%s">', '</ul>'],
       paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
@@ -166,6 +168,7 @@ const DEFAULTS = {
   search: false,
   searchOnEnterKey: false,
   strictSearch: false,
+  visibleSearch: false,
   showButtonIcons: true,
   showButtonText: false,
   showSearchButton: false,
@@ -181,6 +184,7 @@ const DEFAULTS = {
     return {}
   },
   showColumns: false,
+  showColumnsToggleAll: false,
   minimumCountColumns: 1,
   showPaginationSwitch: false,
   showRefresh: false,
@@ -219,6 +223,7 @@ const DEFAULTS = {
   buttonsPrefix: CONSTANTS.classes.buttonsPrefix,
   buttonsClass: CONSTANTS.classes.buttons,
   icons: CONSTANTS.icons,
+  html: CONSTANTS.html,
   iconSize: undefined,
   iconsPrefix: CONSTANTS.iconsPrefix, // glyphicon or fa(font-awesome)
   onAll (name, args) {
@@ -366,6 +371,9 @@ const EN = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/extensions/export/bootstrap-table-export.js

@@ -176,10 +176,8 @@ $.BootstrapTable = class extends $.BootstrapTable {
           footerHtml.push(footerCellHtml)
         })
 
-        this.append(footerData)
-
+        this.$body.append(this.$body.children().last()[0].outerHTML)
         const $lastTableRow = this.$body.children().last()
-
         $.each($lastTableRow.children(), (index, lastTableRowCell) => {
           $(lastTableRowCell).html(footerHtml[index])
         })

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

@@ -233,14 +233,20 @@ const UtilsFilterControl = {
         for (let i = 0; i < z; i++) {
           // Added a new value
           const fieldValue = data[i][field]
-          const formattedValue = Utils.calculateObjectValue(that.header, that.header.formatters[j], [fieldValue, data[i], i], fieldValue)
+          let formattedValue = Utils.calculateObjectValue(that.header, that.header.formatters[j], [fieldValue, data[i], i], fieldValue)
 
-          uniqueValues[formattedValue] = fieldValue
-        }
+          if (column.filterDataCollector) {
+            formattedValue = Utils.calculateObjectValue(that.header, column.filterDataCollector, [fieldValue, data[i], formattedValue], formattedValue)
+          }
 
-        // eslint-disable-next-line guard-for-in
-        for (const key in uniqueValues) {
-          UtilsFilterControl.addOptionToSelectControl(selectControl, uniqueValues[key], key, column.filterDefault)
+          if (typeof formattedValue === 'object') {
+            formattedValue.forEach((value) => {
+              UtilsFilterControl.addOptionToSelectControl(selectControl, value, value, column.filterDefault)
+            })
+            continue
+          }
+
+          UtilsFilterControl.addOptionToSelectControl(selectControl, fieldValue, formattedValue, column.filterDefault)
         }
 
         UtilsFilterControl.sortSelectControl(selectControl, column.filterOrderBy)
@@ -565,6 +571,7 @@ $.extend($.fn.bootstrapTable.defaults, {
 
 $.extend($.fn.bootstrapTable.columnDefaults, {
   filterControl: undefined,
+  filterDataCollector: undefined,
   filterData: undefined,
   filterDatepickerOptions: undefined,
   filterStrictSearch: false,
@@ -757,7 +764,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
     this.options.pageNumber = 1
     this.EnableControls(false)
-    this.onSearch()
+    this.onSearch(event, false)
     this.trigger('column-search', $field, text)
   }
 

src/extensions/multiple-sort/bootstrap-table-multiple-sort.js

@@ -6,50 +6,318 @@
  */
 
 let isSingleSort = false
+const Utils = $.fn.bootstrapTable.utils
+const bootstrap = {
+  bootstrap3: {
+    icons: {
+      plus: 'glyphicon-plus',
+      minus: 'glyphicon-minus',
+      sort: 'glyphicon-sort'
+    },
+    html: {
+      multipleSortModal: `
+        <div class="modal fade" id="%s" tabindex="-1" role="dialog" aria-labelledby="%sLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                     <h4 class="modal-title" id="%sLabel">%s</h4>
+                </div>
+                <div class="modal-body">
+                    <div class="bootstrap-table">
+                        <div class="fixed-table-toolbar">
+                            <div class="bars">
+                                <div id="toolbar">
+                                     <button id="add" type="button" class="btn btn-default">%s %s</button>
+                                     <button id="delete" type="button" class="btn btn-default" disabled>%s %s</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="fixed-table-container">
+                            <table id="multi-sort" class="table">
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                         <th><div class="th-inner">%s</div></th>
+                                         <th><div class="th-inner">%s</div></th>
+                                    </tr>
+                                </thead>
+                                <tbody></tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                     <button type="button" class="btn btn-default" data-dismiss="modal">%s</button>
+                     <button type="button" class="btn btn-primary multi-sort-order-button">%s</button>
+                </div>
+            </div>
+        </div>
+    </div>
+      `,
+      multipleSortButton: '<button class="multi-sort btn btn-default" type="button" data-toggle="modal" data-target="#%s" title="%s">%s</button>',
+      multipleSortSelect: '<select class="%s %s form-control">'
+    }
+  },
+  bootstrap4: {
+    icons: {
+      'plus': 'fa-plus',
+      'minus': 'fa-minus',
+      'sort': 'fa-sort'
+    },
+    html: {
+      multipleSortModal: `
+        <div class="modal fade" id="%s" tabindex="-1" role="dialog" aria-labelledby="%sLabel" aria-hidden="true">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title" id="%sLabel">%s</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                <div class="bootstrap-table">
+                        <div class="fixed-table-toolbar">
+                            <div class="bars">
+                                <div id="toolbar" class="pb-3">
+                                     <button id="add" type="button" class="btn btn-secondary">%s %s</button>
+                                     <button id="delete" type="button" class="btn btn-secondary" disabled>%s %s</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="fixed-table-container">
+                            <table id="multi-sort" class="table">
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                         <th><div class="th-inner">%s</div></th>
+                                         <th><div class="th-inner">%s</div></th>
+                                    </tr>
+                                </thead>
+                                <tbody></tbody>
+                            </table>
+                        </div>
+                    </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">%s</button>
+                <button type="button" class="btn btn-primary multi-sort-order-button">%s</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `,
+      multipleSortButton: '<button class="multi-sort btn btn-secondary" type="button" data-toggle="modal" data-target="#%s" title="%s">%s</button>',
+      multipleSortSelect: '<select class="%s %s form-control">'
+    }
+  },
+  semantic: {
+    icons: {
+      'plus': 'fa-plus',
+      'minus': 'fa-minus',
+      'sort': 'fa-sort'
+    },
+    html: {
+      multipleSortModal: `
+        <div class="ui modal tiny" id="%s" aria-labelledby="%sLabel" aria-hidden="true">
+        <i class="close icon"></i>
+        <div class="header" id="%sLabel">
+          %s
+        </div>
+        <div class="image content">
+          <div class="bootstrap-table">
+            <div class="fixed-table-toolbar">
+                <div class="bars">
+                  <div id="toolbar" class="pb-3">
+                    <button id="add" type="button" class="ui button">%s %s</button>
+                    <button id="delete" type="button" class="ui button" disabled>%s %s</button>
+                  </div>
+                </div>
+            </div>
+            <div class="fixed-table-container">
+                <table id="multi-sort" class="table">
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th><div class="th-inner">%s</div></th>
+                            <th><div class="th-inner">%s</div></th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+          </div>
+        </div>
+        <div class="actions">
+          <div class="ui button deny">%s</div>
+          <div class="ui button approve multi-sort-order-button">%s</div>
+        </div>
+      </div>
+      `,
+      multipleSortButton: '<button class="multi-sort ui button" type="button" data-toggle="modal" data-target="#%s" title="%s">%s</button>',
+      multipleSortSelect: '<select class="%s %s">'
+    }
+  },
+  materialize: {
+    icons: {
+      'plus': 'plus',
+      'minus': 'minus',
+      'sort': 'sort'
+    },
+    html: {
+      multipleSortModal: `
+        <div id="%s" class="modal" aria-labelledby="%sLabel" aria-hidden="true">
+          <div class="modal-content" id="%sLabel">
+            <h4>%s</h4>
+            <div class="bootstrap-table">
+            <div class="fixed-table-toolbar">
+                <div class="bars">
+                  <div id="toolbar" class="pb-3">
+                    <button id="add" type="button" class="waves-effect waves-light btn">%s %s</button>
+                    <button id="delete" type="button" class="waves-effect waves-light btn" disabled>%s %s</button>
+                  </div>
+                </div>
+            </div>
+            <div class="fixed-table-container">
+                <table id="multi-sort" class="table">
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th><div class="th-inner">%s</div></th>
+                            <th><div class="th-inner">%s</div></th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn">%s</a>
+            <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn multi-sort-order-button">%s</a>
+          </div>
+          </div>
+        </div>
+      `,
+      multipleSortButton: '<a href="#%s" class="multi-sort waves-effect waves-light btn modal-trigger" type="button" data-toggle="modal" title="%s">%s</a>',
+      multipleSortSelect: '<select class="%s %s browser-default">'
+    }
+  },
+  foundation: {
+    icons: {
+      'plus': 'fa-plus',
+      'minus': 'fa-minus',
+      'sort': 'fa-sort'
+    },
+    html: {
+      multipleSortModal: `
+        <div class="reveal" id="%s" data-reveal aria-labelledby="%sLabel" aria-hidden="true">
+            <div id="%sLabel">
+              <h1>%s</h1>
+              <div class="bootstrap-table">
+                <div class="fixed-table-toolbar">
+                    <div class="bars">
+                      <div id="toolbar" class="padding-bottom-2">
+                        <button id="add" type="button" class="waves-effect waves-light button">%s %s</button>
+                        <button id="delete" type="button" class="waves-effect waves-light button" disabled>%s %s</button>
+                      </div>
+                    </div>
+                </div>
+                <div class="fixed-table-container">
+                    <table id="multi-sort" class="table">
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th><div class="th-inner">%s</div></th>
+                                <th><div class="th-inner">%s</div></th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
+                </div>
+              </div>
+              
+              <button class="waves-effect waves-light button" data-close aria-label="Close modal" type="button">
+                <span aria-hidden="true">%s</span>
+              </button>
+              <button class="waves-effect waves-light button multi-sort-order-button" data-close aria-label="Order" type="button">
+                  <span aria-hidden="true">%s</span>
+              </button>
+            </div>
+        </div>
+      `,
+      multipleSortButton: '<button class="button multi-sort" data-open="%s" title="%s">%s</button>',
+      multipleSortSelect: '<select class="%s %s browser-default">'
+    }
+  },
+  bulma: {
+    icons: {
+      'plus': 'fa-plus',
+      'minus': 'fa-minus',
+      'sort': 'fa-sort'
+    },
+    html: {
+      multipleSortModal: `
+        <div class="modal" id="%s" aria-labelledby="%sLabel" aria-hidden="true">
+          <div class="modal-background"></div>
+          <div class="modal-content" id="%sLabel">
+            <div class="box">
+            <h2>%s</h2>
+              <div class="bootstrap-table">
+                  <div class="fixed-table-toolbar">
+                      <div class="bars">
+                        <div id="toolbar" class="padding-bottom-2">
+                          <button id="add" type="button" class="waves-effect waves-light button">%s %s</button>
+                          <button id="delete" type="button" class="waves-effect waves-light button" disabled>%s %s</button>
+                        </div>
+                      </div>
+                  </div>
+                  <div class="fixed-table-container">
+                      <table id="multi-sort" class="table">
+                          <thead>
+                              <tr>
+                                  <th></th>
+                                  <th><div class="th-inner">%s</div></th>
+                                  <th><div class="th-inner">%s</div></th>
+                              </tr>
+                          </thead>
+                          <tbody></tbody>
+                      </table>
+                    </div>
+                </div>
+                <button type="button" class="waves-effect waves-light button" data-close>%s</button>
+                <button type="button" class="waves-effect waves-light button multi-sort-order-button" data-close>%s</button>
+            </div>
+          </div>
+        </div>
+      `,
+      multipleSortButton: '<button class="button multi-sort" data-target="%s" title="%s">%s</button>',
+      multipleSortSelect: '<select class="%s %s browser-default">'
+    }
+  }
+}[$.fn.bootstrapTable.theme]
+$.extend($.fn.bootstrapTable.defaults.icons, bootstrap.icons)
+$.extend($.fn.bootstrapTable.defaults.html, bootstrap.html)
 
 const showSortModal = that => {
   const _selector = that.sortModalSelector
   const _id = `#${_selector}`
+  const o = that.options
 
   if (!$(_id).hasClass('modal')) {
-    let sModal = `  <div class="modal fade" id="${_selector}" tabindex="-1" role="dialog" aria-labelledby="${_selector}Label" aria-hidden="true">`
-    sModal += '         <div class="modal-dialog">'
-    sModal += '             <div class="modal-content">'
-    sModal += '                 <div class="modal-header">'
-    sModal += '                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
-    sModal += `                     <h4 class="modal-title" id="${_selector}Label">${that.options.formatMultipleSort()}</h4>`
-    sModal += '                 </div>'
-    sModal += '                 <div class="modal-body">'
-    sModal += '                     <div class="bootstrap-table">'
-    sModal += '                         <div class="fixed-table-toolbar">'
-    sModal += '                             <div class="bars">'
-    sModal += '                                 <div id="toolbar">'
-    sModal += `                                     <button id="add" type="button" class="btn btn-default"><i class="${that.options.iconsPrefix} ${that.options.icons.plus}"></i> ${that.options.formatAddLevel()}</button>`
-    sModal += `                                     <button id="delete" type="button" class="btn btn-default" disabled><i class="${that.options.iconsPrefix} ${that.options.icons.minus}"></i> ${that.options.formatDeleteLevel()}</button>`
-    sModal += '                                 </div>'
-    sModal += '                             </div>'
-    sModal += '                         </div>'
-    sModal += '                         <div class="fixed-table-container">'
-    sModal += '                             <table id="multi-sort" class="table">'
-    sModal += '                                 <thead>'
-    sModal += '                                     <tr>'
-    sModal += '                                         <th></th>'
-    sModal += `                                         <th><div class="th-inner">${that.options.formatColumn()}</div></th>`
-    sModal += `                                         <th><div class="th-inner">${that.options.formatOrder()}</div></th>`
-    sModal += '                                     </tr>'
-    sModal += '                                 </thead>'
-    sModal += '                                 <tbody></tbody>'
-    sModal += '                             </table>'
-    sModal += '                         </div>'
-    sModal += '                     </div>'
-    sModal += '                 </div>'
-    sModal += '                 <div class="modal-footer">'
-    sModal += `                     <button type="button" class="btn btn-default" data-dismiss="modal">${that.options.formatCancel()}</button>`
-    sModal += `                     <button type="button" class="btn btn-primary">${that.options.formatSort()}</button>`
-    sModal += '                 </div>'
-    sModal += '             </div>'
-    sModal += '         </div>'
-    sModal += '     </div>'
+    const sModal = Utils.sprintf(
+      that.constants.html.multipleSortModal,
+      _selector, _selector, _selector,
+      that.options.formatMultipleSort(),
+      Utils.sprintf(that.constants.html.icon, o.iconsPrefix, that.constants.icons.plus),
+      that.options.formatAddLevel(),
+      Utils.sprintf(that.constants.html.icon, o.iconsPrefix, that.constants.icons.minus),
+      that.options.formatDeleteLevel(),
+      that.options.formatColumn(),
+      that.options.formatOrder(),
+      that.options.formatCancel(),
+      that.options.formatSort()
+    )
 
     $('body').append($(sModal))
 
@@ -78,13 +346,12 @@ const showSortModal = that => {
       }
     })
 
-    that.$sortModal.off('click', '.btn-primary').on('click', '.btn-primary', () => {
+    that.$sortModal.off('click', '.multi-sort-order-button').on('click', '.multi-sort-order-button', () => {
       const $rows = that.$sortModal.find('tbody > tr')
       let $alert = that.$sortModal.find('div.alert')
       const fields = []
       const results = []
 
-
       that.options.sortPriority = $.map($rows, row => {
         const $row = $(row)
         const name = $row.find('.multi-sort-name').val()
@@ -116,7 +383,10 @@ const showSortModal = that => {
           $($alert).remove()
         }
 
-        that.$sortModal.modal('hide')
+        if ($.inArray($.fn.bootstrapTable.theme, ['bootstrap3', 'bootstrap4']) !== -1) {
+          that.$sortModal.modal('hide')
+        }
+
         that.options.sortName = ''
 
         if (that.options.sidePagination === 'server') {
@@ -168,12 +438,6 @@ $.extend($.fn.bootstrapTable.defaults, {
   }
 })
 
-$.extend($.fn.bootstrapTable.defaults.icons, {
-  sort: 'glyphicon-sort',
-  plus: 'glyphicon-plus',
-  minus: 'glyphicon-minus'
-})
-
 $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
   'multiple-sort.bs.table': 'onMultipleSort'
 })
@@ -244,16 +508,41 @@ BootstrapTable.prototype.initToolbar = function (...args) {
   }
 
   if (this.options.showMultiSort) {
-    const $btnGroup = this.$toolbar.find('>.btn-group').first()
+    const $btnGroup = this.$toolbar.find('>.' + that.constants.classes.buttonsGroup.split(' ').join('.')).first()
     let $multiSortBtn = this.$toolbar.find('div.multi-sort')
+    const o = that.options
 
     if (!$multiSortBtn.length && this.options.showMultiSortButton) {
-      $multiSortBtn = `  <button class="multi-sort btn btn-default${this.options.iconSize === undefined ? '' : ` btn-${this.options.iconSize}`}" type="button" data-toggle="modal" data-target="${sortModalId}" title="${this.options.formatMultipleSort()}">`
-      $multiSortBtn += `     <i class="${this.options.iconsPrefix} ${this.options.icons.sort}"></i>`
-      $multiSortBtn += '</button>'
-
+      $multiSortBtn = Utils.sprintf(that.constants.html.multipleSortButton, that.sortModalSelector, this.options.formatMultipleSort(), Utils.sprintf(that.constants.html.icon, o.iconsPrefix, o.icons.sort))
       $btnGroup.append($multiSortBtn)
 
+      if ($.fn.bootstrapTable.theme === 'semantic') {
+        this.$toolbar.find('.multi-sort').on('click', () => {
+          $(sortModalId).modal('show')
+        })
+      } else if ($.fn.bootstrapTable.theme === 'materialize') {
+        this.$toolbar.find('.multi-sort').on('click', () => {
+          $(sortModalId).modal()
+        })
+      } else if ($.fn.bootstrapTable.theme === 'foundation') {
+        this.$toolbar.find('.multi-sort').on('click', () => {
+          if (!this.foundationModal) {
+            // eslint-disable-next-line no-undef
+            this.foundationModal = new Foundation.Reveal($(sortModalId))
+          }
+          this.foundationModal.open()
+        })
+      } else if ($.fn.bootstrapTable.theme === 'bulma') {
+        this.$toolbar.find('.multi-sort').on('click', () => {
+          $('html').toggleClass('is-clipped')
+          $(sortModalId).toggleClass('is-active')
+          $('button[data-close]').one('click', () => {
+            $('html').toggleClass('is-clipped')
+            $(sortModalId).toggleClass('is-active')
+          })
+        })
+      }
+
       showSortModal(that)
     }
 
@@ -348,8 +637,8 @@ BootstrapTable.prototype.addLevel = function (index, sortPriority) {
   this.$sortModal.find('tbody')
     .append($('<tr>')
       .append($('<td>').text(text))
-      .append($('<td>').append($('<select class="form-control multi-sort-name">')))
-      .append($('<td>').append($('<select class="form-control multi-sort-order">')))
+      .append($('<td>').append($(Utils.sprintf(this.constants.html.multipleSortSelect, this.constants.classes.paginationDropdown, 'multi-sort-name'))))
+      .append($('<td>').append($(Utils.sprintf(this.constants.html.multipleSortSelect, this.constants.classes.paginationDropdown, 'multi-sort-order'))))
     )
 
   const $multiSortName = this.$sortModal.find('.multi-sort-name').last()

src/locale/bootstrap-table-af-ZA.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['af-ZA'] = {
   formatColumns () {
     return 'Kolomme'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ar-SA.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ar-SA'] = {
   formatColumns () {
     return 'أعمدة'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ca-ES.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['ca-ES'] = {
   formatColumns () {
     return 'Columnes'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-cs-CZ.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['cs-CZ'] = {
   formatColumns () {
     return 'Sloupce'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-da-DK.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['da-DK'] = {
   formatColumns () {
     return 'Kolonner'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-de-DE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['de-DE'] = {
   formatColumns () {
     return 'Spalten'
   },
+  formatColumnsToggleAll () {
+    return 'Alle umschalten'
+  },
   formatFullscreen () {
     return 'Vollbild'
   },

src/locale/bootstrap-table-el-GR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['el-GR'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-en-US.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['en-US'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-AR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-AR'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-CL.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['es-CL'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-CR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-CR'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-ES.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-ES'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-MX.js

@@ -64,6 +64,9 @@ $.fn.bootstrapTable.locales['es-MX'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Pantalla completa'
   },

src/locale/bootstrap-table-es-NI.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-NI'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-SP.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-SP'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-et-EE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['et-EE'] = {
   formatColumns () {
     return 'Veerud'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-eu-EU.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['eu-EU'] = {
   formatColumns () {
     return 'Zutabeak'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-fa-IR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['fa-IR'] = {
   formatColumns () {
     return 'سطر ها'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-fi-FI.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['fi-FI'] = {
   formatColumns () {
     return 'Sarakkeet'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-fr-BE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['fr-BE'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-fr-FR.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['fr-FR'] = {
   formatColumns () {
     return 'Colonnes'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-he-IL.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['he-IL'] = {
   formatColumns () {
     return 'עמודות'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-hr-HR.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['hr-HR'] = {
   formatColumns () {
     return 'Kolone'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-hu-HU.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['hu-HU'] = {
   formatColumns () {
     return 'Oszlopok'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-id-ID.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['id-ID'] = {
   formatColumns () {
     return 'kolom'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-it-IT.js

@@ -64,6 +64,9 @@ $.fn.bootstrapTable.locales['it-IT'] = {
   formatColumns () {
     return 'Colonne'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ja-JP.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ja-JP'] = {
   formatColumns () {
     return '列'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ka-GE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ka-GE'] = {
   formatColumns () {
     return 'სვეტები'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ko-KR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ko-KR'] = {
   formatColumns () {
     return '컬럼 필터링'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ms-MY.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ms-MY'] = {
   formatColumns () {
     return 'Lajur'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-nb-NO.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['nb-NO'] = {
   formatColumns () {
     return 'Kolonner'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-nl-NL.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['nl-NL'] = {
   formatColumns () {
     return 'Kolommen'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-pl-PL.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['pl-PL'] = {
   formatColumns () {
     return 'Kolumny'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-pt-BR.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['pt-BR'] = {
   formatColumns () {
     return 'Colunas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-pt-PT.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['pt-PT'] = {
   formatColumns () {
     return 'Colunas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ro-RO.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ro-RO'] = {
   formatColumns () {
     return 'Coloane'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ru-RU.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ru-RU'] = {
   formatColumns () {
     return 'Колонки'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-sk-SK.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['sk-SK'] = {
   formatColumns () {
     return 'Stĺpce'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-sv-SE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['sv-SE'] = {
   formatColumns () {
     return 'kolumn'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-th-TH.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['th-TH'] = {
   formatColumns () {
     return 'คอลัมน์'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-tr-TR.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['tr-TR'] = {
   formatColumns () {
     return 'Sütunlar'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-uk-UA.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['uk-UA'] = {
   formatColumns () {
     return 'Стовпці'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ur-PK.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ur-PK'] = {
   formatColumns () {
     return 'کالم'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-uz-Latn-UZ.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['uz-Latn-UZ'] = {
   formatColumns () {
     return 'Ustunlar'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-vi-VN.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['vi-VN'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-zh-CN.js

@@ -42,10 +42,10 @@ $.fn.bootstrapTable.locales['zh-CN'] = {
     return '隐藏/显示分页'
   },
   formatPaginationSwitchDown () {
-    return 'Show pagination'
+    return '显示分页'
   },
   formatPaginationSwitchUp () {
-    return 'Hide pagination'
+    return '隐藏分页'
   },
   formatRefresh () {
     return '刷新'
@@ -54,14 +54,17 @@ $.fn.bootstrapTable.locales['zh-CN'] = {
     return '切换'
   },
   formatToggleOn () {
-    return 'Show card view'
+    return '显示卡片视图'
   },
   formatToggleOff () {
-    return 'Hide card view'
+    return '隐藏卡片视图'
   },
   formatColumns () {
     return '列'
   },
+  formatColumnsToggleAll () {
+    return '切换所有'
+  },
   formatFullscreen () {
     return '全屏'
   },

src/locale/bootstrap-table-zh-TW.js

@@ -42,10 +42,10 @@ $.fn.bootstrapTable.locales['zh-TW'] = {
     return '隱藏/顯示分頁'
   },
   formatPaginationSwitchDown () {
-    return 'Show pagination'
+    return '顯示分頁'
   },
   formatPaginationSwitchUp () {
-    return 'Hide pagination'
+    return '隱藏分頁'
   },
   formatRefresh () {
     return '重新整理'
@@ -54,14 +54,17 @@ $.fn.bootstrapTable.locales['zh-TW'] = {
     return '切換'
   },
   formatToggleOn () {
-    return 'Show card view'
+    return '顯示卡片視圖'
   },
   formatToggleOff () {
-    return 'Hide card view'
+    return '隱藏卡片視圖'
   },
   formatColumns () {
     return '列'
   },
+  formatColumnsToggleAll () {
+    return '切換所有'
+  },
   formatFullscreen () {
     return '全屏'
   },

src/themes/bulma/bootstrap-table-bulma.js

@@ -25,8 +25,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationActive = 'is-current'
     this.constants.classes.buttonActive = 'is-active'
 
-    this.constants.html.toobarDropdow = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
-    this.constants.html.toobarDropdowItem = '<label class="dropdown-item">%s</label>'
+    this.constants.html.toolbarDropdown = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
+    this.constants.html.toolbarDropdownItem = '<label class="dropdown-item">%s</label>'
+    this.constants.html.toolbarDropdownSeperator = '<li class="dropdown-divider"></li>'
     this.constants.html.pageDropdown = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
     this.constants.html.pageDropdownItem = '<a class="dropdown-item %s" href="#">%s</a>'
     this.constants.html.dropdownCaret = '<span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>'

src/themes/bulma/bootstrap-table-bulma.scss

@@ -7,6 +7,14 @@
  @import './variables.scss';
  @import '../theme.scss';
 
+.box {
+  background-color: #fff;
+  border-radius: 6px;
+  color: #4a4a4a;
+  display: block;
+  padding: 1.25rem;
+}
+
 .bootstrap-table {
   .float-left {
     float: left;

src/themes/foundation/bootstrap-table-foundation.js

@@ -23,8 +23,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationActive = 'current'
     this.constants.classes.buttonActive = 'success'
 
-    this.constants.html.toobarDropdow = ['<ul class="dropdown-pane" id="toolbar-columns-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
-    this.constants.html.toobarDropdowItem = '<li><label class="dropdown-item">%s</label></li>'
+    this.constants.html.toolbarDropdown = ['<ul class="dropdown-pane" id="toolbar-columns-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
+    this.constants.html.toolbarDropdownItem = '<li><label class="dropdown-item">%s</label></li>'
+    this.constants.html.toolbarDropdownSeperator = '<li><hr></li>'
     this.constants.html.pageDropdown = ['<div class="dropdown-pane" id="pagination-list-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
     this.constants.html.pageDropdownItem = '<li class="dropdown-item %s"><a href="#">%s</a></li>'
     this.constants.html.dropdownCaret = '<i class="fa fa-angle-down"></i>'

src/themes/materialize/bootstrap-table-materialize.js

@@ -18,7 +18,8 @@ $.extend($.fn.bootstrapTable.defaults, {
     columns: 'view_list',
     detailOpen: 'add',
     detailClose: 'remove',
-    fullscreen: 'fullscreen'
+    fullscreen: 'fullscreen',
+    sort: 'sort'
   }
 })
 
@@ -28,15 +29,16 @@ $.BootstrapTable = class extends $.BootstrapTable {
   initConstants () {
     super.initConstants()
 
-    this.constants.classes.buttonsGroup = ''
+    this.constants.classes.buttonsGroup = 'button-group'
     this.constants.classes.buttonsDropdown = ''
     this.constants.classes.input = 'input-field'
     this.constants.classes.input = ''
     this.constants.classes.paginationDropdown = ''
     this.constants.classes.buttonActive = 'green'
 
-    this.constants.html.toobarDropdow = ['<ul id="toolbar-columns-id" class="dropdown-content">', '</ul>']
-    this.constants.html.toobarDropdowItem = '<li><label>%s</label></li>'
+    this.constants.html.toolbarDropdown = ['<ul id="toolbar-columns-id" class="dropdown-content">', '</ul>']
+    this.constants.html.toolbarDropdownItem = '<li><label>%s</label></li>'
+    this.constants.html.toolbarDropdownSeperator = '<li class="divider" tabindex="-1"></li>'
     this.constants.html.pageDropdown = ['<ul id="pagination-list-id" class="dropdown-content">', '</ul>']
     this.constants.html.pageDropdownItem = '<li><a class="%s" href="#">%s</a></li>'
     this.constants.html.dropdownCaret = '<i class="material-icons">arrow_drop_down</i>'

src/themes/semantic/bootstrap-table-semantic.js

@@ -21,8 +21,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.inputGroup = 'ui input'
     this.constants.classes.paginationDropdown = 'ui dropdown'
 
-    this.constants.html.toobarDropdow = ['<div class="menu">', '</div>']
-    this.constants.html.toobarDropdowItem = '<label class="item">%s</label>'
+    this.constants.html.toolbarDropdown = ['<div class="menu">', '</div>']
+    this.constants.html.toolbarDropdownItem = '<label class="item">%s</label>'
+    this.constants.html.toolbarDropdownSeperator = '<div class="divider"></div>'
     this.constants.html.pageDropdown = ['<div class="menu">', '</div>']
     this.constants.html.pageDropdownItem = '<a class="item %s" href="#">%s</a>'
     this.constants.html.dropdownCaret = '<i class="dropdown icon"></i>'

tools/check-api.js

@@ -53,8 +53,7 @@ class API {
         console.log(error)
       })
     }
-
-    fs.writeFile(file, outLines.join('## '), () => {})
+    fs.writeFileSync(file, outLines.join('## '))
   }
 }