Merge pull request #7422 from wenzhixin/feature/buttons-attribute-title

Added buttonsAttributeTitle option

site/docs/api/table-options.md

@@ -155,6 +155,20 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Buttons Align](https://examples.bootstrap-table.com/#options/buttons-align.html)
 
+## buttonsAttributeTitle
+
+- **Attribute:** `data-buttons-attribute-title`
+
+- **Type:** `String`
+
+- **Detail:**
+
+  Customize the title attribute of the toolbar buttons, which is mainly used to customize the toolbar style.
+
+- **Default:** `'title'`
+
+- **Example:** [Buttons Attribute Title](https://examples.bootstrap-table.com/#options/buttons-attribute-title.html)
+
 ## buttonsClass
 
 - **Attribute:** `data-buttons-class`

src/bootstrap-table.js

@@ -677,7 +677,7 @@ class BootstrapTable {
 
           html.push(`<div class="keep-open ${this.constants.classes.buttonsDropdown}">
             <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" ${this.constants.dataToggle}="dropdown"
-            aria-label="${opts.formatColumns()}" title="${opts.formatColumns()}">
+            aria-label="${opts.formatColumns()}" ${opts.buttonsAttributeTitle}="${opts.formatColumns()}">
             ${opts.showButtonIcons ? Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, opts.icons.columns) : ''}
             ${opts.showButtonText ? opts.formatColumns() : ''}
             ${this.constants.html.dropdownCaret}
@@ -763,7 +763,11 @@ class BootstrapTable {
             if (attributeName === 'class') {
               continue
             }
-            buttonHtml += ` ${attributeName}="${value}"`
+
+            const attribute = attributeName === 'title' ?
+              this.options.buttonsAttributeTitle : attributeName
+
+            buttonHtml += ` ${attribute}="${value}"`
           }
         }
 
@@ -3235,12 +3239,13 @@ class BootstrapTable {
     this.initHeader()
 
     const icon = this.options.showButtonIcons ? this.options.cardView ? this.options.icons.toggleOn : this.options.icons.toggleOff : ''
-    const text = this.options.showButtonText ? this.options.cardView ? this.options.formatToggleOff() : this.options.formatToggleOn() : ''
+    const text = this.options.cardView ? this.options.formatToggleOff() : this.options.formatToggleOn()
 
     this.$toolbar.find('button[name="toggle"]')
-      .html(`${Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix, icon)} ${text}`)
+      .html(`${Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix,
+        icon)} ${this.options.showButtonText ? text : ''}`)
       .attr('aria-label', text)
-      .attr('title', text)
+      .attr(this.options.buttonsAttributeTitle, text)
 
     this.initBody()
     this.trigger('toggle', this.options.cardView)

src/constants/index.js

@@ -242,6 +242,7 @@ const DEFAULTS = {
   toolbarAlign: 'left',
   buttonsToolbar: undefined,
   buttonsAlign: 'right',
+  buttonsAttributeTitle: 'title',
   buttonsOrder: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns'],
   buttonsPrefix: CONSTANTS.classes.buttonsPrefix,
   buttonsClass: CONSTANTS.classes.buttons,

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

@@ -207,7 +207,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
         const footerData = {}
         const footerHtml = []
 
-        $.each($footerRow.children(), (index, footerCell) => {
+        $footerRow.children().forEach((footerCell, index) => {
           const footerCellHtml = $(footerCell).children('.th-inner').first().html()
 
           footerData[this.columns[index].field] = footerCellHtml === ' ' ? null : footerCellHtml
@@ -219,7 +219,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
         this.$body.append(this.$body.children().last()[0].outerHTML)
         const $lastTableRow = this.$body.children().last()
 
-        $.each($lastTableRow.children(), (index, lastTableRowCell) => {
+        $lastTableRow.children().forEach((lastTableRowCell, index) => {
           $(lastTableRowCell).html(footerHtml[index])
         })
       }

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

@@ -197,7 +197,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initSearch () {
     const that = this
-    const filterPartial = $.isEmptyObject(that.filterColumnsPartial) ? null : that.filterColumnsPartial
+    const filterPartial = Utils.isEmptyObject(that.filterColumnsPartial) ? null : that.filterColumnsPartial
 
     super.initSearch()
 
@@ -493,7 +493,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
       this._filterControlValuesLoaded = true
     }
 
-    if ($.isEmptyObject(this.filterColumnsPartial)) {
+    if (Utils.isEmptyObject(this.filterColumnsPartial)) {
       this.filterColumnsPartial = {}
     }
 

src/extensions/filter-control/utils.js

@@ -409,7 +409,7 @@ export function createControls (that, header) {
 
     // Filtering by default when it is set.
     if (column.filterControl && '' !== column.filterDefault && 'undefined' !== typeof column.filterDefault) {
-      if ($.isEmptyObject(that.filterColumnsPartial)) {
+      if (Utils.isEmptyObject(that.filterColumnsPartial)) {
         that.filterColumnsPartial = {}
       }