Fixed some bugs

* Fixed export cannot work with materialize and foundation themes
* Fixed icon-size bug with pagination
* Fixed page-jump-to input and button bug with icon-size

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

@@ -170,12 +170,6 @@ $.BootstrapTable = class extends $.BootstrapTable {
       return
     }
 
-    if ($.fn.bootstrapTable.theme === 'foundation') {
-      this.$export.find('.dropdown-pane').attr('id', 'toolbar-export-id')
-    } else if ($.fn.bootstrapTable.theme === 'materialize') {
-      this.$export.find('.dropdown-content').attr('id', 'toolbar-export-id')
-    }
-
     if (super.handleToolbar) {
       super.handleToolbar()
     }

src/extensions/page-jump-to/bootstrap-table-page-jump-to.js

@@ -25,18 +25,16 @@ $.BootstrapTable = class extends $.BootstrapTable {
       let $jumpTo = $pageGroup.find('.page-jump-to')
 
       if (!$jumpTo.length) {
-        $jumpTo = $(`
-          <div class="page-jump-to ${this.constants.classes.inputGroup}">
-          <input type="number"
-            class="${this.constants.classes.input}${Utils.sprintf(' input-%s', this.options.iconSize)}"
+        $jumpTo = $(Utils.sprintf(this.constants.html.inputGroup,
+          `<input type="number"
+            class="${this.constants.classes.input}${Utils.sprintf(' %s%s', this.constants.classes.inputPrefix, this.options.iconSize)}"
             value="${this.options.pageNumber}"
             min="1"
-            max="${this.totalPages}">
-          <button class="${this.constants.buttonsClass}"  type="button">
+            max="${this.totalPages}">`,
+          `<button class="${this.constants.buttonsClass}"  type="button">
           ${this.options.formatJumpTo()}
-          </button>
-          </div>
-        `).appendTo($pageGroup)
+          </button>`)
+        ).addClass('page-jump-to').appendTo($pageGroup)
 
         const $input = $jumpTo.find('input')
 

src/themes/_theme.scss

@@ -310,14 +310,10 @@
     }
 
     > .pagination {
+
       ul.pagination {
         margin: 0;
 
-        a {
-          padding: 6px 12px;
-          line-height: 1.428571429;
-        }
-
         li.page-intermediate {
           a {
             &::before {
@@ -350,6 +346,13 @@
     height: calc(100vh);
     overflow-y: scroll;
   }
+
+  &.bootstrap4,
+  &.bootstrap5 {
+    .pagination-lg .page-link {
+      padding: .5rem 1rem;
+    }
+  }
 }
 
 /* calculate scrollbar width */

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

@@ -238,6 +238,8 @@
       }
 
       .page-link {
+        padding: 6px 12px;
+        line-height: 1.428571429;
         color: $color;
         text-decoration: none;
         outline: none;

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

@@ -23,7 +23,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationActive = 'current'
     this.constants.classes.buttonActive = 'success'
 
-    this.constants.html.toolbarDropdown = ['<div class="dropdown-pane" id="toolbar-columns-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
+    this.constants.html.toolbarDropdown = ['<div class="dropdown-pane" data-dropdown><ul class="vertical menu">', '</ul></div>']
     this.constants.html.toolbarDropdownItem = '<li class="dropdown-item-marker"><label class="dropdown-item">%s</label></li>'
     this.constants.html.toolbarDropdownSeparator = '<li><hr></li>'
     this.constants.html.pageDropdown = ['<div class="dropdown-pane" id="pagination-list-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
@@ -43,7 +43,14 @@ $.BootstrapTable = class extends $.BootstrapTable {
   handleToolbar () {
     if (this.$toolbar.find('.dropdown-toggle').length) {
       this.$toolbar.find('.dropdown-toggle').each((i, el) => {
-        $(el).attr('data-toggle', $(el).next().attr('id'))
+        if (!$(el).next().length) {
+          return
+        }
+
+        const id = `toolbar-columns-id${i}`
+
+        $(el).next().attr('id', id)
+        $(el).attr('data-toggle', id)
         const $pane = $(el).next()
           .attr('data-position', 'bottom')
           .attr('data-alignment', 'right')

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

@@ -54,6 +54,11 @@
     .dropup .fa-angle-down:before {
       content: "\f106";
     }
+
+    .page-item {
+      padding: 6px 12px;
+      line-height: 1.428571429;
+    }
   }
 
   .dropdown-pane {

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

@@ -38,7 +38,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationDropdown = ''
     this.constants.classes.buttonActive = 'green'
 
-    this.constants.html.toolbarDropdown = ['<ul id="toolbar-columns-id" class="dropdown-content">', '</ul>']
+    this.constants.html.toolbarDropdown = ['<ul class="dropdown-content">', '</ul>']
     this.constants.html.toolbarDropdownItem = '<li class="dropdown-item-marker"><label>%s</label></li>'
     this.constants.html.toolbarDropdownSeparator = '<li class="divider" tabindex="-1"></li>'
     this.constants.html.pageDropdown = ['<ul id="pagination-list-id" class="dropdown-content">', '</ul>']
@@ -58,7 +58,14 @@ $.BootstrapTable = class extends $.BootstrapTable {
   handleToolbar () {
     if (this.$toolbar.find('.dropdown-toggle').length) {
       this.$toolbar.find('.dropdown-toggle').each((i, el) => {
-        $(el).attr('data-target', $(el).next().attr('id'))
+        if (!$(el).next().length) {
+          return
+        }
+
+        const id = `toolbar-columns-id${i}`
+
+        $(el).next().attr('id', id)
+        $(el).attr('data-target', id)
           .dropdown({
             alignment: 'right',
             constrainWidth: false,

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

@@ -52,5 +52,10 @@
     .pagination li {
       height: 36px;
     }
+
+    .page-item a {
+      padding: 6px 12px;
+      line-height: 1.428571429;
+    }
   }
 }