Merge pull request #5216 from wenzhixin/feature/5215

Feature/5215

site/docs/api/column-options.md

@@ -231,7 +231,7 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
   * `value`: If footer data is set, the value of the footer column.
 
   the function should return a string with the text to show in the footer cell.
-  
+
   If you fetch data from a server and tries to set the footer value from the server response, please use the `footerField` Option.
 
 - **Default:** `undefined`
@@ -318,6 +318,20 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
 - **Example:** [Rowspan Colspan](https://examples.bootstrap-table.com/#column-options/rowspan-colspan.html)
 
+## searchable
+
+- **Attribute:** `data-searchable`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `true` to search data for this column.
+
+- **Default:** `true`
+
+- **Example:** [Column Searchable](https://examples.bootstrap-table.com/#column-options/searchable.html)
+
 ## searchFormatter
 
 - **Attribute:** `data-search-formatter`
@@ -332,19 +346,19 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
 - **Example:** [Search Formatter](https://examples.bootstrap-table.com/#column-options/search-formatter.html)
 
-## searchable
+## searchHighlightFormatter
 
-- **Attribute:** `data-searchable`
+- **Attribute:** `data-search-highlight-formatter`
 
-- **Type:** `Boolean`
+- **Type:** `Boolean|Function`
 
 - **Detail:**
 
-  Set `true` to search data for this column.
+  Define a `function` to use a custom highlight formatter for the [search highlight](https://bootstrap-table.com/docs/api/table-options/#searchhighlight) option.
 
 - **Default:** `true`
 
-- **Example:** [Column Searchable](https://examples.bootstrap-table.com/#column-options/searchable.html)
+- **Example:** [Searchable Highlight Formatter](https://examples.bootstrap-table.com/#column-options/search-highlight-formatter.html)
 
 ## showSelectTitle
 
@@ -360,20 +374,6 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
 - **Example:** [Show Select Title](https://examples.bootstrap-table.com/#column-options/show-select-title.html)
 
-## sortName
-
-- **Attribute:** `data-sort-name`
-
-- **Type:** `String`
-
-- **Detail:**
-
-  Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of 'html' such as `<b><span style="color:red">abc</span></b>`, but a fieldName to sort is 'content' with the value of `'abc'`.
-
-- **Default:** `undefined`
-
-- **Example:** [Sort Name Order](https://examples.bootstrap-table.com/#column-options/sort-name-order.html)
-
 ## sortable
 
 - **Attribute:** `data-sortable`
@@ -409,6 +409,20 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
 - **Example:** [Column Sorter](https://examples.bootstrap-table.com/#column-options/sorter.html)
 
+## sortName
+
+- **Attribute:** `data-sort-name`
+
+- **Type:** `String`
+
+- **Detail:**
+
+  Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of 'html' such as `<b><span style="color:red">abc</span></b>`, but a fieldName to sort is 'content' with the value of `'abc'`.
+
+- **Default:** `undefined`
+
+- **Example:** [Sort Name Order](https://examples.bootstrap-table.com/#column-options/sort-name-order.html)
+
 ## switchable
 
 - **Attribute:** `data-switchable`

site/docs/api/localizations.md

@@ -125,6 +125,18 @@ $('#table').bootstrapTable({
 
 - **Default:** `'Refresh'`
 
+## formatSearch
+
+- **Parameter:** `undefined`
+
+- **Default:** `'Search'`
+
+## formatShowingRows
+
+- **Parameter:** `pageFrom, pageTo, totalRows`
+
+- **Default:** `'Showing %s to %s of %s rows'`
+
 ## formatSRPaginationNextText
 
 - **Parameter:** `undefined`
@@ -143,18 +155,6 @@ $('#table').bootstrapTable({
 
 - **Default:** `'previous page'`
 
-## formatSearch
-
-- **Parameter:** `undefined`
-
-- **Default:** `'Search'`
-
-## formatShowingRows
-
-- **Parameter:** `pageFrom, pageTo, totalRows`
-
-- **Default:** `'Showing %s to %s of %s rows'`
-
 ## formatToggle
 
 - **Parameter:** `undefined`

site/docs/api/table-options.md

@@ -452,7 +452,7 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
   Defines the key of the footer Object (From data array or server response json).
   The footer Object can be used to set/define footer colspans and/or the value of the footer.
-  
+
   {% highlight javascript %}
     {
       "rows": [
@@ -543,20 +543,6 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Table Height](https://examples.bootstrap-table.com/#options/table-height.html)
 
-## iconSize
-
-- **Attribute:** `data-icon-size`
-
-- **Type:** `String`
-
-- **Detail:**
-
-  Defines icon size, `undefined`, `'lg'`, `'sm'` can be used.
-
-- **Default:** `undefined`
-
-- **Example:** [Icon Size](https://examples.bootstrap-table.com/#options/icon-size.html)
-
 ## icons
 
 - **Attribute:** `data-icons`
@@ -585,6 +571,20 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Table Icons](https://examples.bootstrap-table.com/#options/table-icons.html)
 
+## iconSize
+
+- **Attribute:** `data-icon-size`
+
+- **Type:** `String`
+
+- **Detail:**
+
+  Defines icon size, `undefined`, `'lg'`, `'sm'` can be used.
+
+- **Default:** `undefined`
+
+- **Example:** [Icon Size](https://examples.bootstrap-table.com/#options/icon-size.html)
+
 ## iconsPrefix
 
 - **Attribute:** `data-icons-prefix`
@@ -1075,7 +1075,7 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Table Search](https://examples.bootstrap-table.com/#options/table-search.html)
 
-### searchAccentNeutralise
+## searchAccentNeutralise
 
 - **Attribute:** `data-search-accent-neutralise`
 
@@ -1103,6 +1103,21 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Search Align](https://examples.bootstrap-table.com/#options/search-align.html)
 
+## searchHighlight
+
+- **Attribute:** `data-search-highlight`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set to `true` to highlight the searched text (using the `<mark>` html tag).
+  You can also define a [custom highlight formatter](https://bootstrap-table.com/docs/api/column-options/#searchhighlightformatter) e.g. for values with html or to use a custom highlight color.
+
+- **Default:** `'false'`
+
+- **Example:** [Search Highlight](https://examples.bootstrap-table.com/#options/search-highlight.html)
+
 ## searchOnEnterKey
 
 - **Attribute:** `data-search-on-enter-key`
@@ -1433,6 +1448,20 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Smart Display](https://examples.bootstrap-table.com/#options/smart-display.html)
 
+## sortable
+
+- **Attribute:** `data-sortable`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `false` to disable sortable of all columns.
+
+- **Default:** `true`
+
+- **Example:** [Table Sortable](https://examples.bootstrap-table.com/#options/table-sortable.html)
+
 ## sortClass
 
 - **Attribute:** `data-sort-class`
@@ -1503,20 +1532,6 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Sort Stable](https://examples.bootstrap-table.com/#options/sort-stable.html)
 
-## sortable
-
-- **Attribute:** `data-sortable`
-
-- **Type:** `Boolean`
-
-- **Detail:**
-
-  Set `false` to disable sortable of all columns.
-
-- **Default:** `true`
-
-- **Example:** [Table Sortable](https://examples.bootstrap-table.com/#options/table-sortable.html)
-
 ## strictSearch
 
 - **Attribute:** `data-strict-search`

src/bootstrap-table.js

@@ -1435,6 +1435,10 @@ class BootstrapTable {
       value = Utils.calculateObjectValue(column,
         this.header.formatters[j], [value_, item, i, field], value_)
 
+      if (this.searchText !== '' && this.options.searchHighlight) {
+        value = Utils.calculateObjectValue(column, column.searchHighlightFormatter, [value, this.searchText], value.replace(new RegExp('(' + this.searchText + ')', 'gim'), '<mark>$1</mark>'))
+      }
+
       if (item[`_${field}_data`] && !Utils.isEmptyObject(item[`_${field}_data`])) {
         for (const [k, v] of Object.entries(item[`_${field}_data`])) {
           // ignore data-index

src/constants/index.js

@@ -232,6 +232,7 @@ const DEFAULTS = {
   paginationPagesBySide: 1, // Number of pages on each side (right, left) of the current page.
   paginationUseIntermediate: false, // Calculate intermediate pages for quick access
   search: false,
+  searchHighlight: false,
   searchOnEnterKey: false,
   strictSearch: false,
   visibleSearch: false,
@@ -490,6 +491,7 @@ const COLUMN_DEFAULTS = {
   footerFormatter: undefined,
   detailFormatter: undefined,
   searchFormatter: true,
+  searchHighlightFormatter: false,
   escape: false,
   events: undefined
 }

tools/check-api.js

@@ -27,7 +27,7 @@ class API {
   }
 
   sortOptions () {
-    this.options.sort()
+    this.options.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
   }
 
   check () {