表格選項

Bootstrap Table 的表格選項 API。

本頁目錄

表格選項定義在 jQuery.fn.bootstrapTable.defaults 中。

注意： 下面的選項名稱（例如 ajax、buttons、cache）是在通過 JavaScript 初始化 Bootstrap Table 時使用的確切屬性名。

例如：

$('#table').bootstrapTable({
  ajax: yourFunction,
  cache: false,
  ...
})

-

屬性: data-toggle
類型: String
詳情:

不需要編寫 JavaScript 即可激活 Bootstrap Table。
默認值: 'table'
示例: From HTML

ajax

屬性: data-ajax
類型: Function
詳情:

替換 AJAX 調用方法。應實現與 jQuery AJAX 方法相同的 API。
默認值: undefined
示例: Table AJAX

ajaxOptions

屬性: data-ajax-options
類型: Object
詳情:

提交 AJAX 請求的額外選項。參考：jQuery.ajax。
默認值: {}
示例: AJAX Options

buttons

屬性: data-buttons
類型: Function
詳情:

允許創建/添加自定義按鈕到按鈕欄（表格右上角）。這些按鈕可以通過表格選項 buttonsOrder 進行排序，應使用事件對應的鍵/名稱進行排序。

自定義按鈕具有高度可配置性，存在以下選項：
- text
  - 描述：此選項用於 showButtonText 表格選項。
  - 類型：String
- icon
  - 描述：此選項用於 showButtonIcons 表格選項。
  - 類型：String - 只需要圖標類，例如 fa-users
- render
  - 描述：將此選項設置為 false 以默認隱藏按鈕，當添加數據屬性 data-show-button-name="true" 時按鈕再次可見。
- attributes
  - 描述：此選項允許添加額外的 html 屬性，例如 title
  - 類型：Object
  - 示例：{title: 'Button title'}
- html
  - 描述：如果您不想自動生成 html，可以使用此選項插入您的自定義 html。 event 選項僅在您的自定義 HTML 包含 name="button-name" 時有效。如果使用此選項，以下選項將被忽略：
    - text
    - icon
    - attributes
  - 類型：Function|String
- event
  - 描述：如果您想向按鈕添加事件，應使用此選項
  - 類型：Function|Object|String
event 選項可以通過三種方式配置。使用 click 事件：
```
{
  'event': () => { }
}
```
使用自定義事件類型的事件：
```
  {
    'event': {
      'mouseenter': () => { }
    }
  }
```
使用自定義事件類型的多個事件：
```
  {
    'event': {
      'click': () => { },
      'mouseenter': () => { },
      'mouseleave': () => { }
    }
  }
```
提示： 除了內聯函數，您也可以使用函數名。

配置的自定義按鈕可能如下所示：
```
{
  btnRemoveEvenRows: {
    'text': 'Remove even Rows',
    'icon': 'fa-trash',
    'event': () => {
      //DO STUFF TO REMOVE EVEN ROWS
    },
    'attributes': {
      'title': 'Remove all rows which has a even id'
    }
  }
}
```
默認值: {}
示例: Buttons

buttonsAlign

屬性: data-buttons-align
類型: String
詳情:

指定工具欄按鈕的對齊方式。可使用 'left'（左對齊）或 'right'（右對齊）。
默認值: 'right'
示例: Buttons Align

buttonsAttributeTitle

屬性: data-buttons-attribute-title
類型: String
詳情:

自定義工具欄按鈕的 title 屬性，主要用於自定義工具欄樣式。
默認值: 'title'
示例: Buttons Attribute Title

buttonsClass

屬性: data-buttons-class
類型: String
詳情:

定義表格按鈕的類（在 'btn-' 後添加）。
默認值: 'secondary'
示例: Buttons Class

buttonsOrder

屬性: data-buttons-order
類型: Array
詳情:

設置工具欄按鈕的自定義排序方式。
默認值: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']
示例: Buttons Order

buttonsPrefix

屬性: data-buttons-prefix
類型: String
詳情:

定義表格按鈕的前綴。
默認值: 'btn'
示例: Buttons Prefix

buttonsToolbar

屬性: data-buttons-toolbar
類型: String/Node
詳情:

指定自定義按鈕工具欄的 jQuery 選擇器，例如：#buttons-toolbar、.buttons-toolbar，或一個 DOM 節點。
默認值: undefined
示例: Buttons Toolbar

cache

屬性: data-cache
類型: Boolean
詳情:

設置為 false 可禁用 AJAX 請求緩存。
默認值: true
示例: Table Cache

cardView

屬性: data-card-view
類型: Boolean
詳情:

設置為 true 可顯示卡片視圖表格（如移動端視圖）。
默認值: false
示例: Card View

checkboxHeader

屬性: data-checkbox-header
類型: Boolean
詳情:

設置為 false 可隱藏標題行中的全選復選框。
默認值: true
示例: Checkbox Header

classes

屬性: data-classes
類型: String
詳情:

表格的類名。可使用 'table'、'table-bordered'、'table-hover'、'table-striped'、'table-dark'、'table-sm' 和 'table-borderless'。默認表格為邊框樣式。
默認值: 'table table-bordered table-hover'
示例: Table Classes

clickToSelect

屬性: data-click-to-select
類型: Boolean
詳情:

設置為 true 可在點擊行時選中復選框或單選框。
默認值: false
示例: Click To Select

columns

屬性: -
類型: Array
詳情:

表格列配置對象。詳情請參閱列選項。
默認值: []
示例: Table Columns

contentType

屬性: data-content-type
類型: String
詳情:

請求遠程數據時的 Content-Type，例如：application/x-www-form-urlencoded。
默認值: 'application/json'
示例: Content Type

customSearch

屬性: data-custom-search
類型: Function
詳情:

自定義搜索函數，將替代內置搜索功能，接受三個參數：
- data：表格數據。
- text：搜索文本。
- filter：來自 filterBy 方法的過濾器對象。
示例用法：
```
function customSearch(data, text) {
  return data.filter(function (row) {
    return row.field.indexOf(text) > -1
  })
}
```
默認值: undefined
示例: Custom Search

customSort

屬性: data-custom-sort
類型: Function
詳情:

自定義排序函數，將替代內置排序功能，接受三個參數：
- sortName：排序名稱。
- sortOrder：排序順序。
- data：行數據。
默認值: undefined
示例: Custom Order

data

屬性: data-data
類型: Array | Object

詳情:

要加載的數據。

如果數據中有 _<field>_rowspan 或 _<field>_colspan 屬性，則將自動合並單元格，例如：

$table.bootstrapTable({
  data: [
    {
      id: 1,
      name: 'Item 1',
      _name_rowspan: 2,
      price: '$1'
    },
    {
      id: 2,
      price: '$2'
    }
  ]
})

如果使用此功能，data 是必需的，以確保格式正確。

默認值: []
示例: From Data

dataField

屬性: data-data-field
類型: String
詳情:

指定傳入 JSON 中包含 'rows' 數據列表的鍵名。
默認值: 'rows'
示例: Total/Data Field

dataType

屬性: data-data-type
類型: String
詳情:

您期望從服務器返回的數據類型。
默認值: 'json'
示例: Data Type

detailFilter

屬性: data-detail-filter
類型: Function
詳情:

當 detailView 設置為 true 時，控制每行的展開功能。返回 true 表示該行可以展開；返回 false 表示該行不可展開。默認函數返回 true，允許所有行展開。
默認值: function(index, row) { return true }
示例: Detail Filter

detailFormatter

屬性: data-detail-formatter
類型: Function
詳情:

當 detailView 設置為 true 時，用於格式化詳情視圖內容。函數可以返回一個字符串，該字符串將被附加到詳情視圖單元格中；也可以使用第三個參數（目標單元格的 jQuery 元素）直接渲染元素。
默認值: function(index, row, element) { return '' }
示例: Detail View

detailView

屬性: data-detail-view
類型: Boolean
詳情:

設置為 true 可顯示詳情視圖表格。可設置 uniqueId 選項以在刷新表格時保持詳情視圖狀態。
默認值: false
示例: Detail View UniqueId

detailViewAlign

屬性: data-detail-view-align
類型: String
詳情:

設置詳情視圖圖標的對齊方式。可使用 'left'（左對齊）或 'right'（右對齊）。
默認值: 'left'
示例: Detail view Align

detailViewByClick

屬性: data-detail-view-by-click
類型: Boolean
詳情:

設置為 true 可在單擊單元格時切換詳情視圖。
默認值: false
示例: Detail View Icon

detailViewIcon

屬性: data-detail-view-icon
類型: Boolean
詳情:

設置為 true 可顯示詳情視圖列（加/減圖標）。
默認值: true
示例: Detail View Icon

escape

屬性: data-escape
類型: Boolean
詳情:

轉義字符串以插入 HTML，替換 &、<、>、"、` 和 ' 字符。如需禁用列標題的轉義，請設置 escapeTitle 選項。
默認值: false
示例: Table Escape

escapeTitle

屬性: data-escape-title
類型: Boolean
詳情:

切換是否應將 escape 選項應用於列標題。
默認值: true
示例: Table Escape title

屬性: data-filter-options
類型: Boolean
詳情:

定義過濾算法的默認選項，filterAlgorithm: 'and' 表示所有過濾器必須匹配，filterAlgorithm: 'or' 表示任一過濾器匹配即可。
默認值: { filterAlgorithm: 'and' }
示例: Filter Options

fixedScroll

屬性: data-fixed-scroll
類型: Boolean
詳情:

設置為 true 可在加載數據時保持表格滾動條位置固定。
默認值: false
示例: Fixed Scroll

footerField

屬性: data-footer-field
類型: String

詳情:

定義頁腳對象的鍵名（來自數據數組或服務器響應 JSON）。頁腳對象可用於設置/定義頁腳 colspan 和頁腳值。僅在 data-pagination 為 true 且 data-side-pagination 為 server 時生效。

  {
    "rows": [
      {
        "id": 0,
        "name": "Item 0",
        "price": "$0",
        "amount": 3
      }
    ],
    "footer": {
      "id": "footer id",
      "_id_colspan": 2,
      "name": "footer name"
    }
  }

默認值: footerField
示例: Footer Field

footerStyle

屬性: data-footer-style
類型: Function

詳情:

頁腳樣式格式化函數，接受一個參數：

column：列對象。

支持 classes 或 css。示例用法：

function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}

默認值: {}
示例: Footer Style

headerStyle

屬性: data-header-style
類型: Function

詳情:

標題樣式格式化函數，接受一個參數：

column：列對象。

支持 classes 或 css。示例用法：

function headerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}

默認值: {}
示例: Header Style

height

屬性: data-height
類型: Number
詳情:

設置表格高度以啟用固定表頭功能。當內容超出設定高度時，表格將顯示垂直滾動條。
默認值: undefined
示例: Table Height

icons

屬性: data-icons
類型: Object
詳情:

定義在工具欄、分頁和詳情視圖中使用的圖標。

默認值:

{
  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',
  fullscreen: 'fa-arrows-alt',
  detailOpen: 'fa-plus',
  detailClose: 'fa-minus'
}

示例: Table Icons

iconSize

屬性: data-icon-size
類型: String
詳情:

定義圖標大小，可使用 undefined、'lg'、'sm'。
默認值: undefined
示例: Icon Size

iconsPrefix

屬性: data-icons-prefix
類型: String

詳情:

定義圖標集名稱。默認情況下，此選項由主題自動計算。

{
  bootstrap3: 'glyphicon',
  bootstrap4: 'fa',
  bootstrap5: 'bi',
  'bootstrap-table': 'icon',
  bulma: 'fa',
  foundation: 'fa',
  materialize: 'material-icons',
  semantic: 'fa'
}

默認值: undefined
示例: Icons Prefix

idField

屬性: data-id-field
類型: String
詳情:

指定用作復選框/單選框值的字段，對應 selectItemName 選項。
默認值: undefined
示例: Id Field

ignoreClickToSelectOn

屬性: data-ignore-click-to-select-on
類型: Function
詳情:

定義哪些元素在點擊時應忽略 clickToSelect 功能。函數接受一個參數：
- element：被點擊的 DOM 元素。
返回 true 表示忽略該元素點擊（不觸發行選擇），返回 false 表示正常處理點擊（觸發行選擇）。此選項僅在 clickToSelect 為 true 時生效。
默認值: { return ['A', 'BUTTON'].includes(tagName) }
示例: Ignore Click To Select On

loadingFontSize

屬性: data-loading-font-size
類型: String
詳情:

定義加載文本的字體大小，默認值為 'auto'，根據表格寬度在 12px 到 32px 之間自動計算。
默認值: 'auto'
示例: Loading Font Size

loadingTemplate

屬性: data-loading-template
類型: Function
詳情:

自定義加載模板。參數對象包含：
- loadingMessage：formatLoadingMessage 本地化文案。

默認值:

function (loadingMessage) {
  return '<span class="loading-wrap">' +
    '<span class="loading-text">' +
    loadingMessage +
    '</span>' +
    '<span class="animation-wrap"><span class="animation-dot"></span></span>' +
    '</span>'
}

示例: Loading Template

locale

屬性: data-locale
類型: String
詳情:

設置表格使用的語言環境（例如 'zh-CN'）。使用此選項前，必須先預加載對應的語言環境文件。

系統支持語言環境後備機制，按以下優先級順序嘗試加載：
- 第一優先級：嘗試加載指定的完整語言環境（如 'zh-CN'）
- 第二優先級：嘗試將下劃線 _ 轉換為連字符 - 並將區域代碼大寫（如 'zh_CN' 轉換為 'zh-CN'）
- 第三優先級：嘗試使用短語言代碼（如從 'zh-CN' 降級為 'zh'）
- 最後備選：使用最後加載的語言環境文件（如果沒有任何語言環境文件被加載，則使用內置的默認語言環境）
注意：如果將此選項設置為 undefined 或空字符串，系統將自動使用最後加載的語言環境（如果沒有加載任何語言環境文件，則默認使用 'en-US'）。
默認值: undefined
示例: Table Locale

maintainMetaData

屬性: data-maintain-meta-data
類型: Boolean
詳情:

設置為 true 可在切換頁面和搜索時保持以下元數據：
- 選中的行
- 隱藏的行
默認值: false
示例: Maintain Meta Data

method

屬性: data-method
類型: String
詳情:

請求遠程數據的方法類型。
默認值: 'get'
示例: Table Method

minimumCountColumns

屬性: data-minimum-count-columns
類型: Number
詳情:

列下拉列表中隱藏的最小列數。
默認值: 1
示例: Minimum Count Columns

multipleSelectRow

屬性: data-multiple-select-row
類型: Boolean
詳情:

設置為 true 可啟用多行選擇功能。啟用後，用戶可通過以下方式選擇多行：
- Ctrl+點擊：選擇或取消選擇單行（保持其他行的選中狀態）
- Shift+點擊：選擇從當前選中行到點擊行之間的所有行（范圍選擇）
- 普通點擊：未按住修飾鍵時，取消其他行的選擇，僅選中當前點擊的行
默認值: false
示例: Multiple Select Row

pageList

屬性: data-page-list
類型: Array
詳情:

設置分頁時，通過選擇列表初始化頁面大小。如果包含 'all' 或 'unlimited' 選項，所有記錄將顯示在表格中。

提示：如果表格行數少於選項數量，選項將自動隱藏。要禁用此功能，可將 smartDisplay 設置為 false
默認值: [10, 25, 50, 100]
示例: Page List

pageNumber

屬性: data-page-number
類型: Number
詳情:

設置分頁屬性時，初始化頁碼。
默認值: 1
示例: Page Number

pageSize

屬性: data-page-size
類型: Number
詳情:

設置分頁屬性時，初始化頁面大小。
默認值: 10
示例: Page Size

pagination

屬性: data-pagination
類型: Boolean
詳情:

設置為 true 可在表格底部顯示分頁工具欄。
默認值: false
示例: Table Pagination

paginationDetailHAlign

屬性: data-pagination-detail-h-align
類型: String
詳情:

設置分頁詳情的對齊方式。可使用 'left'（左對齊）或 'right'（右對齊）。
默認值: 'left'
示例: Pagination H Align

paginationHAlign

屬性: data-pagination-h-align
類型: String
詳情:

設置分頁的對齊方式。可使用 'left'（左對齊）或 'right'（右對齊）。
默認值: 'right'
示例: Pagination H Align

paginationLoadMore

屬性: data-pagination-load-more
類型: Boolean
詳情:

設置為 true 以啟用通過分頁加載更多數據。僅在客戶端分頁中使用。通常，要實現”加載更多”功能，通常需要將其與 responseHandler 結合使用來處理返回的數據。

它主要用於總頁數未知的場景。在這種情況下，無法顯示確切的總數或計算總頁數。相反，可以使用”100+“等顯示格式來表示顯示計數之外存在其他項目。當用戶導航到最後一頁時，會加載更多數據，同時更新分頁信息。此過程持續進行，直到所有數據加載完成。
默認值: false
示例: Pagination Load More

paginationLoop

屬性: data-pagination-loop
類型: Boolean
詳情:

設置為 true 以啟用分頁連續循環模式。
默認值: true
示例: Pagination Loop

paginationNextText

屬性: data-pagination-next-text
類型: String
詳情:

設置分頁詳情中下一頁按鈕顯示的圖標或文本。
默認值: '›'
示例: Pagination Text

paginationPagesBySide

屬性: data-pagination-pages-by-side
類型: Number
詳情:

當前頁面每側（右、左）的頁數。
默認值: 1
示例: Pagination Index Number

paginationParts

屬性: data-pagination-parts
類型: Array
詳情:

這些選項定義分頁的哪些部分應該可見。
- pageInfo 顯示當前頁將顯示哪些數據集（例如 Showing 1 to 10 of 54 rows）。
- pageInfoShort 類似於 pageInfo，它只顯示表格有多少行（例如 Showing 54 rows）。
- pageSize 顯示定義頁面上應顯示多少行的下拉列表。
- pageList 顯示分頁的主要部分（頁面列表）。
默認值: ['pageInfo', 'pageSize', 'pageList']
示例: Pagination Parts

paginationPreText

屬性: data-pagination-pre-text
類型: String
詳情:

設置分頁詳情中上一頁按鈕顯示的圖標或文本。
默認值: '‹'
示例: Pagination Text

paginationSuccessivelySize

屬性: data-pagination-successively-size
類型: Number
詳情:

一行中最大連續頁數。
默認值: 5
示例: Pagination Index Number

paginationUseIntermediate

屬性: data-pagination-use-intermediate
類型: Boolean
詳情:

計算並顯示中間頁面以便快速訪問。
默認值: false
示例: Pagination Index Number

paginationVAlign

屬性: data-pagination-v-align
類型: String
詳情:

設置分頁的垂直對齊方式。可使用 'top'（頂部）、'bottom'（底部）或 'both'（頂部和底部）。
默認值: 'bottom'
示例: Pagination V Align

queryParams

屬性: data-query-params
類型: Function
詳情:

請求遠程數據時，可以通過修改 queryParams 發送附加參數。

如果 queryParamsType = 'limit'，params 對象包含：limit、offset、search、sort、order。

否則，它包含：pageSize、pageNumber、searchText、sortName、sortOrder。

返回 false 以停止請求。
默認值: function(params) { return params }
示例: Query Params

queryParamsType

屬性: data-query-params-type
類型: String
詳情:

設置 'limit' 以發送 RESTFul 類型的查詢參數。
默認值: 'limit'
示例: Query Params Type

regexSearch

屬性: data-regex-search
類型: Boolean
詳情:

設置為 true 以啟用正則表達式搜索。如果啟用此選項，您可以使用正則表達式搜索，例如 [47a]$ 搜索所有以 4、7 或 a 結尾的項目。正則表達式可以使用 /[47a]$/gim 或不帶 [47a]$ 標志輸入。默認標志是 gim。
默認值: false
示例: Regex Search

rememberOrder

屬性: data-remember-order
類型: Boolean
詳情:

設置為 true 以記住每列的順序。
默認值: false
示例: Remember Order

responseHandler

屬性: data-response-handler
類型: Function
詳情:

在加載遠程數據之前，處理響應數據格式。參數對象包含：
- res：響應數據。
- jqXHR：jqXHR 對象，它是 XMLHTTPRequest 對象的超集。有關更多信息，請參閱 jqXHR 類型。
默認值: function(res) { return res }
示例: Response Handler

rowAttributes

屬性: data-row-attributes
類型: Function
詳情:

行屬性格式化函數，接受兩個參數：
- row：行記錄數據。
- index：行索引。
支持所有自定義屬性。
默認值: {}
示例: Row Attributes

rowStyle

屬性: data-row-style
類型: Function
詳情:

行樣式格式化函數，接受兩個參數：
- row：行記錄數據。
- index：行索引。
支持 classes 或 css。
默認值: {}
示例: Row Style

search

屬性: data-search
類型: Boolean
詳情:

啟用搜索輸入。

有三種搜索方式：
- 值包含搜索查詢（默認）。示例：Github 包含 git。
- 值必須與搜索查詢相同。示例：Github（值）和 Github（搜索查詢）。
- 比較（<、>、<=、=<、>=、=>）。示例：4 大於 3。
注意：
- 如果要使用自定義搜索輸入，請使用 searchSelector。
- 您也可以使用 regexSearch 選項通過正則表達式搜索。
- 如果要向服務器端分頁發送可搜索參數，請使用 searchable 選項。
默認值: false
示例: Table Search

searchable

屬性: data-searchable
類型: Boolean
詳情:

設置為 true 以在使用服務器端分頁時向服務器發送可搜索參數。
默認值: false
示例: Searchable

searchAccentNeutralise

屬性: data-search-accent-neutralise
類型: Boolean
詳情:

如果要使用重音中性化功能，請設置為 true。
默認值: false
示例: Search Accent Neutralise

searchAlign

屬性: data-search-align
類型: String
詳情:

設置搜索輸入框的對齊方式。可使用 'left'（左對齊）或 'right'（右對齊）。
默認值: 'right'
示例: Search Align

searchHighlight

屬性: data-search-highlight
類型: Boolean
詳情:

設置為 true 以突出顯示搜索的文本（使用 <mark> HTML 標簽）。您也可以定義自定義高亮格式化程序，例如，對於帶有 HTML 的值或使用自定義高亮顏色。
默認值: 'false'
示例: Search Highlight

searchOnEnterKey

屬性: data-search-on-enter-key
類型: Boolean
詳情:

搜索方法將執行，直到按下 Enter 鍵。
默認值: false
示例: Search On Enter Key

searchSelector

屬性: data-search-selector
類型: Boolean|String
詳情:

如果設置此選項（必須是有效的 dom 選擇器，例如 #customSearch），找到的 dom 元素（一個 input 元素）將用作表格搜索，而不是內置搜索輸入。
默認值: false
示例: Search Selector

searchText

屬性: data-search-text
類型: String
詳情:

設置搜索屬性時，初始化搜索文本。
默認值: ''
示例: Search Text

searchTimeOut

屬性: data-search-time-out
類型: Number
詳情:

設置搜索觸發的超時時間。
默認值: 500
示例: Search Time Out

selectItemName

屬性: data-select-item-name
類型: String
詳情:

單選框或復選框輸入的名稱。
默認值: 'btSelectItem'
示例: Id Field

serverSort

屬性: data-server-sort
類型: Boolean
詳情:

設置為 false 以在客戶端對數據進行排序，僅在 sidePagination 為 server 時有效。
默認值: true
示例: Server Sort

showButtonIcons

屬性: data-show-button-icons
類型: Boolean
詳情:

所有按鈕顯示圖標。
默認值: true
示例: show button icons

showButtonText

屬性: data-show-button-text
類型: Boolean
詳情:

所有按鈕顯示文本。
默認值: false
示例: show button text

showColumns

屬性: data-show-columns
類型: Boolean
詳情:

設置為 true 以顯示列下拉列表。我們可以將 switchable 列選項設置為 false 以隱藏下拉列表中的列項。所選列的最小數量可以通過 minimumCountColumns 表格選項控制。
默認值: false
示例: Basic Columns and Large Columns

showColumnsSearch

屬性: data-show-columns-search
類型: Boolean
詳情:

設置為 true 以顯示列過濾器的搜索。
默認值: false
示例: Columns Search

showColumnsToggleAll

屬性: data-show-columns-toggle-all
類型: Boolean
詳情:

設置為 true 以在列選項/下拉列表中顯示全選復選框。
默認值: false
示例: Columns Toggle All

showExtendedPagination

屬性: data-show-extended-pagination
類型: Boolean
詳情:

設置為 true 以顯示分頁的擴展版本（包括所有無過濾器的行數）。如果在服務器端使用分頁，請使用 totalNotFilteredField 定義計數。
默認值: false
示例: Show Extended Pagination

showFooter

屬性: data-show-footer
類型: Boolean
詳情:

設置為 true 以顯示摘要頁腳行。
默認值: false
示例: Show Footer

showFullscreen

屬性: data-show-fullscreen
類型: Boolean
詳情:

設置為 true 以顯示全屏按鈕。
默認值: false
示例: Show Fullscreen

showHeader

屬性: data-show-header
類型: Boolean
詳情:

設置為 false 以隱藏表格標題。
默認值: true
示例: Show Header

showPaginationSwitch

屬性: data-show-pagination-switch
類型: Boolean
詳情:

設置為 true 以顯示分頁切換按鈕。
默認值: false
示例: Show Pagination Switch

showRefresh

屬性: data-show-refresh
類型: Boolean
詳情:

設置為 true 以顯示刷新按鈕。
默認值: false
示例: Show Refresh

showSearchButton

屬性: data-show-search-button
類型: Boolean
詳情:

設置為 true 以在搜索輸入後顯示搜索按鈕。啟用後，搜索操作僅在用戶點擊搜索按鈕時執行，而不是在輸入時自動觸發。這有助於減少不必要的網絡請求和服務器負載，特別是在處理大量數據或網絡環境較慢的情況下。
默認值: false
示例: Show Search Button

showSearchClearButton

屬性: data-show-search-clear-button
類型: Boolean
詳情:

設置為 true 以在搜索輸入後顯示清除按鈕，該按鈕將清除搜索輸入（也包括過濾器控件中的所有過濾器（如果啟用））。
默認值: false
示例: Show Search Clear Button

showToggle

屬性: data-show-toggle
類型: Boolean
詳情:

設置為 true 以顯示切換按鈕以切換表格/卡片視圖。
默認值: false
示例: Show Toggle

sidePagination

屬性: data-side-pagination
類型: String
詳情:

定義表格的分頁側，只能是 'client' 或 'server'。使用 'server' 側需要設置 'url' 或 'ajax' 選項。

請注意，所需的服務器響應格式根據 'sidePagination' 選項設置為 'client' 還是 'server' 而不同。請參閱以下示例：
- 無服務器端分頁
- 有服務器端分頁
URL 參數：

當 sidePagination 設置為 server 時，bootstrap table 將使用以下 URL 參數調用 url：
- offset 值介於 0 和 total - 1 之間，指定要包含的第一條記錄。
- limit 值指定每頁的行數。
實現服務器端分頁時，您必須實現類似此示例格式的 JSON 視圖。該視圖必須采用上面指定的 URL 參數值，並返回從 offset 索引開始的記錄，以及由 limit 指定的記錄數。例如，如果您想要記錄 11-20，您的視圖必須從 URL 字符串獲取 offset=10 和 limit=10，並返回類似此示例的記錄。
默認值: 'client'
示例: Client Side Pagination and Server Side Pagination

silentSort

屬性: data-silent-sort
類型: Boolean
詳情:

設置為 false 以使用加載消息對數據進行排序。此選項在 sidePagination 選項設置為 'server' 時有效。
默認值: true
示例: Silent Sort

singleSelect

屬性: data-single-select
類型: Boolean
詳情:

設置為 true 以允許復選框僅選擇一行。
默認值: false
示例: Single Select

smartDisplay

屬性: data-smart-display
類型: Boolean
詳情:

設置為 true 以智能顯示分頁或卡片視圖。
默認值: true
示例: Smart Display

sortable

屬性: data-sortable
類型: Boolean
詳情:

設置為 false 以禁用所有列的排序。
默認值: true
示例: Table Sortable

sortClass

屬性: data-sort-class
類型: String
詳情:

已排序的 td 元素的類名。
默認值: undefined
示例: Sort Class

sortEmptyLast

屬性: data-sort-empty-last
類型: Boolean
詳情:

設置為 true 以將 <空字符串>、undefined 和 null 排序為最後一個值。
默認值: false
示例: Sort Empty Last

sortName

屬性: data-sort-name
類型: String
詳情:

指定要排序的列。此屬性字段通常與 sortOrder 一起使用，兩者應結合使用以實現正確的排序功能。
默認值: undefined
示例: Sort Name Order

sortOrder

屬性: data-sort-order
類型: String
詳情:

定義列排序順序，只能是 undefined、'asc' 或 'desc'。此屬性字段通常與 sortName 一起使用，兩者應結合使用以實現正確的排序功能。
默認值: undefined
示例: Sort Name Order

sortReset

屬性: data-sort-reset
類型: Boolean
詳情:

設置為 true 以在第三次點擊時重置排序。
默認值: false
示例: Sort Reset

sortResetPage

屬性: data-sort-reset-page
類型: Boolean
詳情:

設置為 true 以在排序時重置頁碼。
默認值: false
示例: Sort Reset Page

sortStable

屬性: data-sort-stable
類型: Boolean
詳情:

設置為 true 以獲得穩定的排序。我們將向行添加 '_position' 屬性。
默認值: false
示例: Sort Stable

strictSearch

屬性: data-strict-search
類型: Boolean
詳情:

啟用嚴格搜索。禁用比較檢查。
默認值: false
示例: Strict Search

theadClasses

屬性: data-thead-classes
類型: String
詳情:

表格 thead 的類名。Bootstrap 使用修飾符類 .thead-light 或 .thead-dark 使 thead 顯示為淺灰色或深灰色。
默認值: ''
示例: Thead Classes

屬性: data-toolbar
類型: String/Node
詳情:

指定工具欄的 jQuery 選擇器，例如：#toolbar、.toolbar，或一個 DOM 節點。
默認值: undefined
示例: Custom Toolbar

toolbarAlign

屬性: data-toolbar-align
類型: String
詳情:

設置自定義工具欄的對齊方式。可使用 'left'（左對齊）或 'right'（右對齊）。
默認值: 'left'
示例: Toolbar Align

totalField

屬性: data-total-field
類型: String
詳情:

指定傳入 JSON 中包含 'total' 數據列表的鍵名。
默認值: 'total'
示例: Total/Data Field

totalNotFiltered

屬性: data-total-not-filtered
類型: Number
詳情:

此屬性主要由分頁服務器傳入，易於使用。
默認值: 0

totalNotFilteredField

屬性: data-total-not-filtered-field
類型: string
詳情:

JSON 響應中的字段將用於 showExtendedPagination。
默認值: totalNotFiltered
示例: Total Not Filtered Field

totalRows

屬性: data-total-rows
類型: Number
詳情:

此屬性主要由分頁服務器傳入，易於使用。
默認值: 0

trimOnSearch

屬性: data-trim-on-search
類型: Boolean
詳情:

設置為 true 以修剪搜索字段中的空格。
默認值: true
示例: Trim On Search

undefinedText

屬性: data-undefined-text
類型: String
詳情:

定義默認的 undefined 文本。
默認值: '-'
示例: Undefined Text

uniqueId

屬性: data-unique-id
類型: String
詳情:

為每行指定唯一標識符。唯一 ID 應始終對 html 安全，例如字母數字，不應包含可能破壞 html 的字符，例如 "。
默認值: undefined
示例: getRowByUniqueId

url

屬性: data-url
類型: String
詳情:

從遠程站點請求數據的 URL。

請注意，所需的服務器響應格式根據是否指定了 'sidePagination' 選項而不同。請參閱以下示例：
- 無服務器端分頁
- 有服務器端分頁
URL 參數：

當 sidePagination 設置為 server 時，bootstrap table 將使用以下 URL 參數調用 url：
- offset 值介於 0 和 total - 1 之間，指定要包含的第一條記錄。
- limit 值指定每頁的行數。
實現服務器端分頁時，您必須實現類似此示例格式的 JSON 視圖。該視圖必須采用上面指定的 URL 參數值，並返回從 offset 索引開始的記錄，以及由 limit 指定的記錄數。例如，如果您想要記錄 11-20，您的視圖必須從 URL 字符串獲取 offset=10 和 limit=10，並返回類似此示例的記錄。
默認值: undefined
示例: From URL
錯誤處理

要獲取加載錯誤，請使用 onLoadError

virtualScroll

屬性: data-virtual-scroll
類型: Boolean
詳情:

設置為 true 以啟用虛擬滾動來顯示虛擬的”無限”列表。

注意： 目前的實現需要每行具有相同的高度。如果行的高度不同，可能會出現不可預測的錯誤。請確保每行的高度一致，或應用樣式 td { white-space: nowrap; } 來解決此問題。
默認值: false
示例: Large Data

virtualScrollItemHeight

屬性: data-virtual-scroll-item-height
類型: Number
詳情:

如果未定義此選項，默認情況下我們將使用第一項的高度。

如果虛擬項目高度明顯大於默認高度，提供此選項是重要的。此維度用於幫助確定初始化時應創建多少個單元格，並幫助計算可滾動區域的高度。此高度值只能使用 px 單位。
默認值: undefined

visibleSearch

屬性: data-visible-search
類型: Boolean
詳情:

設置為 true 以僅在可見列/數據中搜索。如果數據包含其他未顯示的值，它們在搜索時將被忽略。
默認值: false
示例: visible search

表格選項

-

ajax

ajaxOptions

buttons

buttonsAlign

buttonsAttributeTitle

buttonsClass

buttonsOrder

buttonsPrefix

buttonsToolbar

cache

cardView

checkboxHeader

classes

clickToSelect

columns

contentType

customSearch

customSort

data

dataField

dataType

detailFilter

detailFormatter

detailView

detailViewAlign

detailViewByClick

detailViewIcon

escape

escapeTitle

filterOptions

fixedScroll

footerField

footerStyle

headerStyle

height

icons

iconSize

iconsPrefix

idField

ignoreClickToSelectOn

loadingFontSize

loadingTemplate

locale

maintainMetaData

method

minimumCountColumns

multipleSelectRow

pageList

pageNumber

pageSize

pagination

paginationDetailHAlign

paginationHAlign

paginationLoadMore

paginationLoop

paginationNextText

paginationPagesBySide

paginationParts

paginationPreText

paginationSuccessivelySize

paginationUseIntermediate

paginationVAlign

queryParams

queryParamsType

regexSearch

rememberOrder

responseHandler

rowAttributes

rowStyle

search

searchable

searchAccentNeutralise

searchAlign

searchHighlight

searchOnEnterKey

searchSelector

searchText

searchTimeOut