Merge pull request #4386 from wenzhixin/feature/improve-search-button

Improved search button

site/docs/api/table-options.md

@@ -807,7 +807,7 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Default:** `false`
 
-- **Example:** [ShowSearchButton](https://examples.bootstrap-table.com/#options/show-search-button.html)
+- **Example:** [Show Search Button](https://examples.bootstrap-table.com/#options/show-search-button.html)
 
 ## showSearchClearButton
 
@@ -821,7 +821,7 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Default:** `false`
 
-- **Example:** [ShowSearchClearButton](https://examples.bootstrap-table.com/#options/show-search-clear-button.html)
+- **Example:** [Show Search Clear Button](https://examples.bootstrap-table.com/#options/show-search-clear-button.html)
 
 ## trimOnSearch
 

src/bootstrap-table.js

@@ -598,14 +598,13 @@ class BootstrapTable {
     if (o.search) {
       html = []
 
-
       html.push(Utils.sprintf(`
         <div class="${this.constants.classes.pull}-${o.searchAlign} search ${this.constants.classes.inputGroup}">
             %s
         </div>
       `,
       Utils.sprintf(this.constants.html.inputGroup,
-        `<input class="${this.constants.classes.input}${Utils.sprintf(' input-%s', o.iconSize)}" type="text" placeholder="${o.formatSearch()}">`,
+        Utils.sprintf(this.constants.html.searchInput, this.constants.classes.input, Utils.sprintf(' input-%s', o.iconSize), o.formatSearch()),
         (o.showSearchButton ? Utils.sprintf(this.constants.html.searchButton, o.formatSearch(), this.options.iconsPrefix, this.options.icons.search) : '') +
         (o.showSearchClearButton ? Utils.sprintf(this.constants.html.searchClearButton, o.formatClearSearch(), this.options.iconsPrefix, this.options.icons.clearSearch) : ''))
       ))

src/constants/index.js

@@ -53,6 +53,7 @@ const CONSTANTS = {
       paginationItem: '<li class="page-item%s"><a class="page-link" href="#">%s</a></li>',
       icon: '<i class="%s %s"></i>',
       inputGroup: '<div class="input-group">%s<span class="input-group-btn">%s</span></div>',
+      searchInput: '<input class="%s%s" type="text" placeholder="%s">',
       searchButton: '<button class="btn btn-default" type="button" name="search" title="%s"><i class="%s %s"></i></button>',
       searchClearButton: '<button class="btn btn-default" type="button" name="clearSearch" title="%s"><i class="%s %s"></i></button>'
     }
@@ -96,6 +97,7 @@ const CONSTANTS = {
       paginationItem: '<li class="page-item%s"><a class="page-link" href="#">%s</a></li>',
       icon: '<i class="%s %s"></i>',
       inputGroup: '<div class="input-group">%s<div class="input-group-append">%s</div></div>',
+      searchInput: '<input class="%s%s" type="text" placeholder="%s">',
       searchButton: '<button class="btn btn-secondary" type="button" name="search" title="%s"><i class="%s %s"></i></button>',
       searchClearButton: '<button class="btn btn-secondary" type="button" name="clearSearch" title="%s"><i class="%s %s"></i></button>'
     }

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

@@ -30,8 +30,12 @@ $.BootstrapTable = class extends $.BootstrapTable {
     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>'
-    this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>'],
+    this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>']
     this.constants.html.paginationItem = '<li><a class="page-item pagination-link%s" href="#">%s</a></li>'
+    this.constants.html.searchInput = '<p class="control"><input class="%s input-%s" type="text" placeholder="%s"></p>'
+    this.constants.html.inputGroup = '<div class="field has-addons has-addons-right">%s%s</div>'
+    this.constants.html.searchButton = '<p class="control"><button class="button" type="button" name="search" title="%s"><i class="%s %s"></i></button></p>'
+    this.constants.html.searchClearButton = '<p class="control"><button class="button" type="button" name="clearSearch" title="%s"><i class="%s %s"></i></button></p>'
   }
 
   initToolbar () {

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

@@ -28,8 +28,12 @@ $.BootstrapTable = class extends $.BootstrapTable {
     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>'
-    this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>'],
+    this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>']
     this.constants.html.paginationItem = '<li><a class="page-item%s" href="#">%s</a></li>'
+    this.constants.html.inputGroup = '<div class="input-group">%s <div class="input-group-button">%s</div></div>'
+    this.constants.html.searchInput = '<input class="%s input-%s input-group-field" type="text" placeholder="%s">'
+    this.constants.html.searchButton = '<button class="button" type="button" name="search" title="%s"><i class="%s %s"></i></button>'
+    this.constants.html.searchClearButton = '<button class="button" type="button" name="clearSearch" title="%s"><i class="%s %s"></i></button>'
   }
 
   initToolbar () {

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

@@ -40,7 +40,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     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>'
-    this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>'],
+    this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>']
     this.constants.html.paginationItem = '<li class="waves-effect page-item%s"><a href="#">%s</a></li>'
     this.constants.html.icon = '<i class="%s">%s</i>'
   }

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

@@ -26,8 +26,11 @@ $.BootstrapTable = class extends $.BootstrapTable {
     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>'
-    this.constants.html.pagination = ['<div class="ui pagination menu%s">', '</div>'],
+    this.constants.html.pagination = ['<div class="ui pagination menu%s">', '</div>']
     this.constants.html.paginationItem = '<a class="page-item item%s" href="#">%s</a>'
+    this.constants.html.searchButton = '<button class="ui button" type="button" name="search" title="%s"><i class="%s %s"></i></button>'
+    this.constants.html.searchClearButton = '<button class="ui button" type="button" name="clearSearch" title="%s"><i class="%s %s"></i></button>'
+    this.constants.html.inputGroup = '<div class="ui action input">%s%s</div>'
   }
 
   initToolbar () {

tools/check-api.js

@@ -3,6 +3,7 @@ require = require('esm')(module)
 const fs = require('fs')
 const chalk = require('chalk')
 const Constants = require('../src/constants/index.js').default
+let errorSum = 0
 
 class API {
   constructor () {
@@ -16,10 +17,7 @@ class API {
     const content = fs.readFileSync(file).toString()
     const lines = content.split('## ')
     const outLines = lines.slice(0, 1)
-
-    console.log('-------------------------')
-    console.log(`Checking file: ${file}`)
-    console.log('-------------------------')
+    const errors = []
 
     for (const item of lines.slice(1)) {
       md[item.split('\n')[0]] = item
@@ -37,7 +35,7 @@ class API {
             continue
           }
           if (!details[i + 1] || details[i + 1].indexOf(`**${name}:**`) === -1) {
-            console.log(chalk.red(`[${key}] missing '${name}'`))
+            errors.push(chalk.red(`[${key}] missing '${name}'`))
           }
         }
       } else {
@@ -45,6 +43,17 @@ class API {
       }
     }
 
+    errorSum += errors.length
+    if (errors.length > 0) {
+      console.log('-------------------------')
+      console.log(`Checking file: ${file}`)
+      console.log('-------------------------')
+
+      errors.forEach((error) => {
+        console.log(error)
+      })
+    }
+
     fs.writeFile(file, outLines.join('## '), () => {})
   }
 }
@@ -104,3 +113,7 @@ new ColumnOptions()
 new Methods()
 new Events()
 new Localizations()
+
+if (errorSum === 0) {
+  console.log('Good job! Anything up to date!')
+}

tools/check-locale.js

@@ -33,8 +33,6 @@ fs.readdir(`${DIR}`, (err, files) => {
       continue
     }
 
-
-
     const text = fs.readFileSync(DIR + file).toString()
     const obj = readString(readObj(text), text)
     const keys = Object.keys(obj)
@@ -65,5 +63,4 @@ fs.readdir(`${DIR}`, (err, files) => {
   if (errorSum === 0) {
     console.log('Good job! Anything up to date!')
   }
-
 })