首页 发现 帮助
登录
githab
/
bootstrap-table
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Merge branch 'develop' into feature/multiselect-filtercontrol

Dennis Hernández 3 年之前
父节点
0e9e512bc4 777b5dd19c
当前提交
6c5beb5055
共有 10 个文件被更改，包括 182 次插入 和 119 次删除
分列视图 显示文件统计
  1. 2 2
      site/_themes/src/App.vue
  2. 5 6
      site/docs/getting-started/introduction.md
  3. 3 4
      site/docs/vuejs/browser.md
  4. 7 6
      site/themes/bootstrap5.md
  5. 8 0
      src/bootstrap-table.js
  6. 5 68
      src/constants/index.js
  7. 39 0
      src/locale/bootstrap-table-nl-NL.js
  8. 0 17
      src/themes/bootstrap-table/bootstrap-table.js
  9. 1 16
      src/themes/materialize/bootstrap-table-materialize.js
  10. 112 0
      src/utils/index.js

+ 2 - 2
site/_themes/src/App.vue
查看文件 

@@ -91,7 +91,7 @@ export default {
 
             name: 'Bootstrap v5',
 
             desc: 'The most popular HTML, CSS, and JavaScript framework.',
 
             img: '/assets/images/bootstrap5.jpg',
 
-            url: '/themes/bootstrap5/',
 
+            url: '/docs/getting-started/introduction/',
 
             demo: 'https://examples.bootstrap-table.com/index.html?bootstrap5',
 
             price: ''
 
           },
 
@@ -99,7 +99,7 @@ export default {
 
             name: 'Bootstrap v4',
 
             desc: 'The most popular HTML, CSS, and JavaScript framework.',
 
             img: '/assets/images/bootstrap4.jpg',
 
-            url: '/docs/getting-started/introduction/',
 
+            url: '/themes/bootstrap4/',
 
             demo: 'https://examples.bootstrap-table.com/',
 
             price: ''
 
           },

+ 5 - 6
site/docs/getting-started/introduction.md
查看文件 

@@ -12,7 +12,7 @@ toc: true
 
 
 ## Quick start
 
 
-Looking to quickly add Bootstrap Table to your <a href="https://getbootstrap.com/" target="_blank">Bootstrap v4</a> project? Use CDN, provided for free by the folks at UNPKG. Using a package manager or need to download the source files? [Head to the downloads page]({{ site.baseurl }}/docs/getting-started/download/).
 
+Looking to quickly add Bootstrap Table to your <a href="https://getbootstrap.com/" target="_blank">Bootstrap v5</a> project? Use CDN, provided for free by the folks at UNPKG. Using a package manager or need to download the source files? [Head to the downloads page]({{ site.baseurl }}/docs/getting-started/download/).
 
 
 ### CSS
 
 
@@ -34,7 +34,7 @@ Place the following `<script>`s near the end of your pages, right before the clo
 
 
 Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors.
 
 
-For Bootstrap v4, we use [Font Awesome](https://fontawesome.com/icons) as the default icons, so need to import Font Awesome link.
 
+For Bootstrap v5, we use [Bootstrap Icons](https://icons.getbootstrap.com/) as the default icons, so need to import Bootstrap Icons link.
 
 
 Put it all together and your pages should look like this:
 
 
@@ -47,8 +47,8 @@ Put it all together and your pages should look like this:
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <title>Hello, Bootstrap Table!</title>
 
 
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
 
     <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.css">
 
   </head>
 
   <body>
 
@@ -75,8 +75,7 @@ Put it all together and your pages should look like this:
 
     </table>
 
 
     <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
 
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 
     <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
 
   </body>
 
 </html>

+ 3 - 4
site/docs/vuejs/browser.md
查看文件 

@@ -68,8 +68,8 @@ In addition to the files that [Quick start](/docs/getting-started/introduction/#
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <title>Hello, Bootstrap Table!</title>
 
 
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
 
     <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.css">
 
   </head>
 
   <body>
 
@@ -78,8 +78,7 @@ In addition to the files that [Quick start](/docs/getting-started/introduction/#
 
     </div>
 
 
     <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
 
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
 
     <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
 
     <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table-vue.min.js"></script>

+ 7 - 6
site/themes/bootstrap5.md
查看文件 

@@ -1,14 +1,14 @@
 
 ---
 
 layout: simple
 
-title: Bootstrap v5
 
-description: A getting started of add Bootstrap Table to Bootstrap v5, how to download and use, basic templates, and more.
 
+title: Bootstrap v4
 
+description: A getting started of add Bootstrap Table to Bootstrap v4, how to download and use, basic templates, and more.
 
 group: themes
 
 toc: true
 
 ---
 
 
 ## Quick start
 
 
-Looking to quickly add Bootstrap Table to your <a href="https://getbootstrap.com/" target="_blank">Bootstrap v5</a> project? Use CDN, provided for free by the folks at UNPKG. Using a package manager or need to download the source files? [Head to the downloads page]({{ site.baseurl }}/docs/getting-started/download/).
 
+Looking to quickly add Bootstrap Table to your <a href="https://getbootstrap.com/" target="_blank">Bootstrap v4</a> project? Use CDN, provided for free by the folks at UNPKG. Using a package manager or need to download the source files? [Head to the downloads page]({{ site.baseurl }}/docs/getting-started/download/).
 
 
 ### CSS
 
 
@@ -40,8 +40,8 @@ Put it all together and your pages should look like this:
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 
     <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.css">
 
 
     <title>Hello, Bootstrap Table!</title>
 
@@ -70,7 +70,8 @@ Put it all together and your pages should look like this:
 
     </table>
 
 
     <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
 
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
     <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
 
   </body>
 
 </html>

+ 8 - 0
src/bootstrap-table.js
查看文件 

@@ -39,6 +39,14 @@ class BootstrapTable {
 
     this.constants.theme = $.fn.bootstrapTable.theme
 
     this.constants.dataToggle = this.constants.html.dataToggle || 'data-toggle'
 
 
+    // init iconsPrefix and icons
 
+    const iconsPrefix = Utils.getIconsPrefix($.fn.bootstrapTable.theme)
 
+    const icons = Utils.getIcons(iconsPrefix)
 
+
 
+    opts.iconsPrefix = opts.iconsPrefix || $.fn.bootstrapTable.defaults.iconsPrefix || iconsPrefix
 
+    opts.icons = Object.assign(icons, $.fn.bootstrapTable.defaults.icons, opts.icons)
 
+
 
+    // init buttons class
 
     const buttonsPrefix = opts.buttonsPrefix ? `${opts.buttonsPrefix}-` : ''
 
 
     this.constants.buttonsClass = [

+ 5 - 68
src/constants/index.js
查看文件 

@@ -1,47 +1,12 @@
 
 /* eslint-disable no-unused-vars */
 
-const VERSION = '1.19.1'
 
-
 
-let bootstrapVersion = 4
 
-
 
-try {
 
-  const rawVersion = $.fn.dropdown.Constructor.VERSION
 
-
 
-  // Only try to parse VERSION if it is defined.
 
-  // It is undefined in older versions of Bootstrap (tested with 3.1.1).
 
-  if (rawVersion !== undefined) {
 
-    bootstrapVersion = parseInt(rawVersion, 10)
 
-  }
 
-} catch (e) {
 
-  // ignore
 
-}
 
+import Utils from '../utils/index.js'
 
 
-try {
 
-  // eslint-disable-next-line no-undef
 
-  const rawVersion = bootstrap.Tooltip.VERSION
 
+const VERSION = '1.19.1'
 
 
-  if (rawVersion !== undefined) {
 
-    bootstrapVersion = parseInt(rawVersion, 10)
 
-  }
 
-} catch (e) {
 
-  // ignore
 
-}
 
+const bootstrapVersion = Utils.getBootstrapVersion()
 
 
 const CONSTANTS = {
 
   3: {
 
-    iconsPrefix: 'glyphicon',
 
-    icons: {
 
-      paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
 
-      paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
 
-      refresh: 'glyphicon-refresh icon-refresh',
 
-      toggleOff: 'glyphicon-list-alt icon-list-alt',
 
-      toggleOn: 'glyphicon-list-alt icon-list-alt',
 
-      columns: 'glyphicon-th icon-th',
 
-      detailOpen: 'glyphicon-plus icon-plus',
 
-      detailClose: 'glyphicon-minus icon-minus',
 
-      fullscreen: 'glyphicon-fullscreen',
 
-      search: 'glyphicon-search',
 
-      clearSearch: 'glyphicon-trash'
 
-    },
 
     classes: {
 
       buttonsPrefix: 'btn',
 
       buttons: 'default',
 
@@ -74,20 +39,6 @@ const CONSTANTS = {
 
     }
 
   },
 
   4: {
 
-    iconsPrefix: 'fa',
 
-    icons: {
 
-      paginationSwitchDown: 'fa-caret-square-down',
 
-      paginationSwitchUp: 'fa-caret-square-up',
 
-      refresh: 'fa-sync',
 
-      toggleOff: 'fa-toggle-off',
 
-      toggleOn: 'fa-toggle-on',
 
-      columns: 'fa-th-list',
 
-      detailOpen: 'fa-plus',
 
-      detailClose: 'fa-minus',
 
-      fullscreen: 'fa-arrows-alt',
 
-      search: 'fa-search',
 
-      clearSearch: 'fa-trash'
 
-    },
 
     classes: {
 
       buttonsPrefix: 'btn',
 
       buttons: 'secondary',
 
@@ -120,20 +71,6 @@ const CONSTANTS = {
 
     }
 
   },
 
   5: {
 
-    iconsPrefix: 'bi',
 
-    icons: {
 
-      paginationSwitchDown: 'bi-caret-down-square',
 
-      paginationSwitchUp: 'bi-caret-up-square',
 
-      refresh: 'bi-arrow-clockwise',
 
-      toggleOff: 'bi-toggle-off',
 
-      toggleOn: 'bi-toggle-on',
 
-      columns: 'bi-list-ul',
 
-      detailOpen: 'bi-plus',
 
-      detailClose: 'bi-dash',
 
-      fullscreen: 'bi-arrows-move',
 
-      search: 'bi-search',
 
-      clearSearch: 'bi-trash'
 
-    },
 
     classes: {
 
       buttonsPrefix: 'btn',
 
       buttons: 'secondary',
 
@@ -300,9 +237,9 @@ const DEFAULTS = {
 
   buttonsOrder: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns'],
 
   buttonsPrefix: CONSTANTS.classes.buttonsPrefix,
 
   buttonsClass: CONSTANTS.classes.buttons,
 
-  icons: CONSTANTS.icons,
 
+  iconsPrefix: undefined, // init in initConstants
 
+  icons: {}, // init in initConstants
 
   iconSize: undefined,
 
-  iconsPrefix: CONSTANTS.iconsPrefix, // glyphicon or fa(font-awesome)
 
   loadingFontSize: 'auto',
 
   loadingTemplate (loadingMessage) {
 
     return `<span class="loading-wrap">

+ 39 - 0
src/locale/bootstrap-table-nl-NL.js
查看文件 

@@ -101,6 +101,45 @@ $.fn.bootstrapTable.locales['nl-NL'] = $.fn.bootstrapTable.locales['nl'] = {
 
   },
 
   formatFilterControlSwitchShow () {
 
     return 'Toon controls'
 
+  },
 
+  formatAddLevel () {
 
+    return 'Niveau toevoegen'
 
+  },
 
+  formatCancel () {
 
+    return 'Annuleren'
 
+  },
 
+  formatColumn () {
 
+    return 'Kolom'
 
+  },
 
+  formatDeleteLevel () {
 
+    return 'Niveau verwijderen'
 
+  },
 
+  formatDuplicateAlertTitle () {
 
+    return 'Duplicaten gevonden!'
 
+  },
 
+  formatDuplicateAlertDescription () {
 
+    return 'Gelieve dubbele kolommen te verwijderen of wijzigen'
 
+  },
 
+  formatMultipleSort () {
 
+    return 'Meervoudige sortering'
 
+  },
 
+  formatOrder () {
 
+    return 'Volgorde'
 
+  },
 
+  formatSort () {
 
+    return 'Sorteren'
 
+  },
 
+  formatSortBy () {
 
+    return 'Sorteren op'
 
+  },
 
+  formatThenBy () {
 
+    return 'vervolgens'
 
+  },
 
+  formatSortOrders () {
 
+    return {
 
+      asc: 'Oplopend',
 
+      desc: 'Aflopend'
 
+    }
 
   }
 
 }

+ 0 - 17
src/themes/bootstrap-table/bootstrap-table.js
查看文件 

@@ -5,23 +5,6 @@
 
 
 $.fn.bootstrapTable.theme = 'bootstrap-table'
 
 
-$.extend($.fn.bootstrapTable.defaults, {
 
-  iconsPrefix: 'icon',
 
-  icons: {
 
-    paginationSwitchDown: 'icon-arrow-up-circle',
 
-    paginationSwitchUp: 'icon-arrow-down-circle',
 
-    refresh: 'icon-refresh-cw',
 
-    toggleOff: 'icon-toggle-right',
 
-    toggleOn: 'icon-toggle-right',
 
-    columns: 'icon-list',
 
-    detailOpen: 'icon-plus',
 
-    detailClose: 'icon-minus',
 
-    fullscreen: 'icon-maximize',
 
-    search: 'icon-search',
 
-    clearSearch: 'icon-trash-2'
 
-  }
 
-})
 
-
 
 $.BootstrapTable = class extends $.BootstrapTable {
 
   init () {
 
     super.init()

+ 1 - 16
src/themes/materialize/bootstrap-table-materialize.js
查看文件 

@@ -7,22 +7,7 @@
 
 $.extend($.fn.bootstrapTable.defaults, {
 
   classes: 'table highlight',
 
   buttonsPrefix: '',
 
-  buttonsClass: 'waves-effect waves-light btn',
 
-  iconsPrefix: 'material-icons',
 
-  icons: {
 
-    paginationSwitchDown: 'grid_on',
 
-    paginationSwitchUp: 'grid_off',
 
-    refresh: 'refresh',
 
-    toggleOff: 'tablet',
 
-    toggleOn: 'tablet_android',
 
-    columns: 'view_list',
 
-    detailOpen: 'add',
 
-    detailClose: 'remove',
 
-    fullscreen: 'fullscreen',
 
-    sort: 'sort',
 
-    search: 'search',
 
-    clearSearch: 'delete'
 
-  }
 
+  buttonsClass: 'waves-effect waves-light btn'
 
 })
 
 
 $.fn.bootstrapTable.theme = 'materialize'

+ 112 - 0
src/utils/index.js
查看文件 

@@ -1,4 +1,116 @@
 
 export default {
 
+  getBootstrapVersion () {
 
+    let bootstrapVersion = 5
 
+
 
+    try {
 
+      const rawVersion = $.fn.dropdown.Constructor.VERSION
 
+
 
+      // Only try to parse VERSION if it is defined.
 
+      // It is undefined in older versions of Bootstrap (tested with 3.1.1).
 
+      if (rawVersion !== undefined) {
 
+        bootstrapVersion = parseInt(rawVersion, 10)
 
+      }
 
+    } catch (e) {
 
+      // ignore
 
+    }
 
+
 
+    try {
 
+      // eslint-disable-next-line no-undef
 
+      const rawVersion = bootstrap.Tooltip.VERSION
 
+
 
+      if (rawVersion !== undefined) {
 
+        bootstrapVersion = parseInt(rawVersion, 10)
 
+      }
 
+    } catch (e) {
 
+      // ignore
 
+    }
 
+
 
+    return bootstrapVersion
 
+  },
 
+
 
+  getIconsPrefix (theme) {
 
+    return {
 
+      bootstrap3: 'glyphicon',
 
+      bootstrap4: 'fa',
 
+      bootstrap5: 'bi',
 
+      'bootstrap-table': 'icon',
 
+      bulma: 'fa',
 
+      foundation: 'fa',
 
+      materialize: 'material-icons',
 
+      semantic: 'fa'
 
+    }[theme] || 'fa'
 
+  },
 
+
 
+  getIcons (prefix) {
 
+    return {
 
+      glyphicon: {
 
+        paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
 
+        paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
 
+        refresh: 'glyphicon-refresh icon-refresh',
 
+        toggleOff: 'glyphicon-list-alt icon-list-alt',
 
+        toggleOn: 'glyphicon-list-alt icon-list-alt',
 
+        columns: 'glyphicon-th icon-th',
 
+        detailOpen: 'glyphicon-plus icon-plus',
 
+        detailClose: 'glyphicon-minus icon-minus',
 
+        fullscreen: 'glyphicon-fullscreen',
 
+        search: 'glyphicon-search',
 
+        clearSearch: 'glyphicon-trash'
 
+      },
 
+      fa: {
 
+        paginationSwitchDown: 'fa-caret-square-down',
 
+        paginationSwitchUp: 'fa-caret-square-up',
 
+        refresh: 'fa-sync',
 
+        toggleOff: 'fa-toggle-off',
 
+        toggleOn: 'fa-toggle-on',
 
+        columns: 'fa-th-list',
 
+        detailOpen: 'fa-plus',
 
+        detailClose: 'fa-minus',
 
+        fullscreen: 'fa-arrows-alt',
 
+        search: 'fa-search',
 
+        clearSearch: 'fa-trash'
 
+      },
 
+      bi: {
 
+        paginationSwitchDown: 'bi-caret-down-square',
 
+        paginationSwitchUp: 'bi-caret-up-square',
 
+        refresh: 'bi-arrow-clockwise',
 
+        toggleOff: 'bi-toggle-off',
 
+        toggleOn: 'bi-toggle-on',
 
+        columns: 'bi-list-ul',
 
+        detailOpen: 'bi-plus',
 
+        detailClose: 'bi-dash',
 
+        fullscreen: 'bi-arrows-move',
 
+        search: 'bi-search',
 
+        clearSearch: 'bi-trash'
 
+      },
 
+      icon: {
 
+        paginationSwitchDown: 'icon-arrow-up-circle',
 
+        paginationSwitchUp: 'icon-arrow-down-circle',
 
+        refresh: 'icon-refresh-cw',
 
+        toggleOff: 'icon-toggle-right',
 
+        toggleOn: 'icon-toggle-right',
 
+        columns: 'icon-list',
 
+        detailOpen: 'icon-plus',
 
+        detailClose: 'icon-minus',
 
+        fullscreen: 'icon-maximize',
 
+        search: 'icon-search',
 
+        clearSearch: 'icon-trash-2'
 
+      },
 
+      'material-icons': {
 
+        paginationSwitchDown: 'grid_on',
 
+        paginationSwitchUp: 'grid_off',
 
+        refresh: 'refresh',
 
+        toggleOff: 'tablet',
 
+        toggleOn: 'tablet_android',
 
+        columns: 'view_list',
 
+        detailOpen: 'add',
 
+        detailClose: 'remove',
 
+        fullscreen: 'fullscreen',
 
+        sort: 'sort',
 
+        search: 'search',
 
+        clearSearch: 'delete'
 
+      }
 
+    }[prefix]
 
+  },
 
 
   getSearchInput (that) {
 
     if (typeof that.options.searchSelector === 'string') {