BootstrapTable使用教程

1. 客户端分页和服务端分页

sidePagination

• 属性: data-side-pagination
• 类型: String
• 细节:
  定义表的侧面分页，只能是 ‘client’ 或 'server'。使用 'server' 端需要设置 'url' 或 'ajax' 选项。
  请注意，所需的服务器响应格式不同，具体取决于 'sidePagination' 选项设置为 'client' 还是 'server'。请参见以下示例：
  使用客户端分页
  使用服务端分页
• 默认: 'client'
• 例子: 客户端分页和服务器端分页

2. 表分页

pagination

• 属性: data-pagination
• 类型: Boolean
• 细节:
  设置为true可在表格底部显示分页工具栏。
• 默认: false
• 例子: 表分页

3. 响应处理程序

responseHandler

• 属性: data-response-handler
• 类型: Function
• 细节:
  在加载远程数据之前，处理程序响应数据格式，参数对象包含：
  res: 响应数据。
  jqXHR: jqXHR对象，它是XMLHTTPRequest对象的超集。有关更多信息，请参阅jqXHR类型。
• 默认: function(res) { return res }
• 例子: 响应处理程序

4. clickToSelect

Attribute: data-click-to-select

Type: Boolean

Detail:

Set true to select checkbox or radiobox when clicking rows.

Default: false

Example: Click To Select

5. columns

Attribute: -

Type: Array

Detail:

The table columns config object, see column properties for more details.

Default: []

Example: Table Columns

6. contentType

Attribute: data-content-type

Type: String

Detail:

The contentType of request remote data, for example: application/x-www-form-urlencoded.

Default: ‘application/json’

Example: Content Type

7. dataField

Attribute: data-data-field

Type: String

Detail:

Key in incoming json containing ‘rows’ data list.

Default: ‘rows’

Example: Total/Data Field

8. dataType

Attribute: data-data-type

Type: String

Detail:

The type of data that you are expecting back from the server.

Default: ‘json’

Example: Data Type

9. detailView

Attribute: data-detail-view

Type: Boolean

Detail:

Set true to show detail view table.

Default: false

Example: Detail View

10. detailFormatter

Attribute: data-detail-formatter

Type: Function

Detail:

Format your detail view when detailView is set to true. Return a String and it will be appended into the detail view cell, optionally render the element directly using the third parameter which is a jQuery element of the target cell.

Default: function(index, row, element) { return ‘’ }

Example: Detail View

11. escape

Attribute: data-escape

Type: Boolean

Detail:

Escapes a string for insertion into HTML, replacing &, <, >, “, `, and ‘ characters.

Default: false

Example: Table Escape

12. footerField

Attribute: data-footer-field

Type: String

Detail:

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.

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

Default: footerField

Example: Footer Field

13. footerStyle

Attribute: data-footer-style

Type: Function

Detail:

The footer style formatter function, takes one parameter:

column: the column object.
Support classes or css. Example usage:

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

Default: {}

Example: Footer Style

14. headerStyle

Attribute: data-header-style

Type: Function

Detail:

The header style formatter function, takes one parameter:

column: the column object.
Support classes or css. Example usage:

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

Default: {}

Example: Header Style

15. height

Attribute: data-height

Type: Number

Detail:

The height of table, enable fixed header of table.

Default: undefined

Example: Table Height

16. idField

Attribute: data-id-field

Type: String

Detail:

Indicate which field will be used as checkbox/radiobox value, its the counterpart to selectItemName.

Default: undefined

Example: Id Field

17. selectItemName

Attribute: data-select-item-name

Type: String

Detail:

The name of radio or checkbox input.

Default: ‘btSelectItem’

Example: Id Field

18. ignoreClickToSelectOn

Attribute: data-ignore-click-to-select-on

Type: Function

Detail:

Set the ignore elements clickToSelect on. Takes one parameter:

element: the element clicked on.
Return true if the click should be ignored, false if the click should cause the row to be selected. This option is only relevant if clickToSelect is true.

Default: { return [‘A’, ‘BUTTON’].includes(tagName) }

Example: Ignore Click To Select On

19. loadingFontSize

Attribute: data-loading-font-size

Type: String

Detail:

To define the font size of the loading text, the default value is ‘auto’, it will be calculated automatically according to the table width, between 12px and 32px.

Default: ‘auto’

Example: Loading Font Size

20. locale

Attribute: data-locale

Type: String

Detail:

Sets the locale to use (i.e. ‘zh-CN’). Locale files must be pre-loaded. Allows for fallback locales, if loaded, in the following order:

First tries for the locale as specified,
Then tries the locale with ‘_’ translated to ‘-‘ and the region code upper cased,
Then tries the short locale code (i.e. ‘zh’ instead of ‘zh-CN’),
And finally will use the last locale file loaded (or the default locale if no locales loaded).
If left undefined or an empty string, use the last locale loaded (or ‘en-US’ if no locale files loaded).

Default: undefined

Example: Table Locale

21. method

Attribute: data-method

Type: String

Detail:

The method type to request remote data.

Default: ‘get’

Example: Table Method

22. minimumCountColumns

Attribute: data-minimum-count-columns

Type: Number

Detail:

The minimum number of columns to hide from the columns drop down list.

Default: 1

Example: Minimum Count Columns

23. 多行选择

multipleSelectRow
Attribute: data-multiple-select-row

Type: Boolean

Detail:

Set true to enable the multiple selection row. Can use the ctrl+click to select one row or use shift+click to select a range of rows.

Default: false

Example: Multiple Select Row

24. 每页显示数量

pageList
Attribute: data-page-list

Type: Array

Detail:

When set pagination property, initialize the page size selecting list. If you include the ‘all’ or ‘unlimited’ option, all the records will be shown in your table.

Hint: If the table has lesser rows as the option(s), the options will be hidden automatically, to disable that feature you can set smartDisplay to false

Default: [10, 25, 50, 100]

Example: Page List

25. pageNumber

Attribute: data-page-number

Type: Number

Detail:

When set pagination property, initialize the page number.

Default: 1

Example: Page Number

26. pageSize

Attribute: data-page-size

Type: Number

Detail:

When set pagination property, initialize the page size.

Default: 10

Example: Page Size

27. paginationLoop

Attribute: data-pagination-loop

Type: Boolean

Detail:

Set true to enable pagination continuous loop mode.

Default: true

Example: Pagination Loop

28. paginationVAlign

Attribute: data-pagination-v-align

Type: String

Detail:

Indicate how to vertical align the pagination. ‘top’, ‘bottom’, ‘both’ (put the pagination on top and bottom) can be used.

Default: ‘bottom’

Example: Pagination V Align

29. queryParams

Attribute: data-query-params

Type: Function

Detail:

When requesting remote data, you can send additional parameters by modifying queryParams.

If queryParamsType = ‘limit’, the params object contains: limit, offset, search, sort, order.

Else, it contains: pageSize, pageNumber, searchText, sortName, sortOrder.

Return false to stop request.

Default: function(params) { return params }

Example: Query Params

30. queryParamsType

Attribute: data-query-params-type

Type: String

Detail:

Set ‘limit’ to send query params with RESTFul type.

Default: ‘limit’

Example: Query Params Type

31. rememberOrder

Attribute: data-remember-order

Type: Boolean

Detail:

Set true to remember the order for each column.

Default: false

Example: Remember Order

32. rowAttributes

Attribute: data-row-attributes

Type: Function

Detail:

The row attribute formatter function, takes two parameters:

row: the row record data.
index: the row index.
Support all custom attributes.

Default: {}

Example: Row Attributes

33. rowStyle

Attribute: data-row-style

Type: Function

Detail:

The row style formatter function, takes two parameters:

row: the row record data.
index: the row index.
Support classes or css.

Default: {}

Example: Row Style

34. searchAccentNeutralise

Attribute: data-search-accent-neutralise

Type: Boolean

Detail:

Set to true if you want to use accent neutralise feature.

Default: false

Example: Search Accent Neutralise

35. showColumns

Attribute: data-show-columns

Type: Boolean

Detail:

Set true to show the columns drop down list. We can set the switchable column option to false to hide the columns item in the drop down list.

Default: false

Example: Basic Columns and Large Columns

36. showColumnsSearch

Attribute: data-show-columns-search

Type: Boolean

Detail:

Set true to show a search for the columns filter.

Default: false

Example: Columns Search

37. showColumnsSearch

Attribute: data-show-columns-search

Type: Boolean

Detail:

Set true to show a search for the columns filter.

Default: false

Example: Columns Search

38. showFullscreen

Attribute: data-show-fullscreen

Type: Boolean

Detail:

Set true to show the fullscreen button.

Default: false

Example: Show Fullscreen

39. showPaginationSwitch

Attribute: data-show-pagination-switch

Type: Boolean

Detail:

Set true to show the pagination switch button.

Default: false

Example: Show Pagination Switch

40. showRefresh

Attribute: data-show-refresh

Type: Boolean

Detail:

Set true to show the refresh button.

Default: false

Example: Show Refresh

41. showToggle

Attribute: data-show-toggle

Type: Boolean

Detail:

Set true to show the toggle button to toggle table / card view.

Default: false

Example: Show Toggle

42. singleSelect

Attribute: data-single-select

Type: Boolean

Detail:

Set true to allow checkbox selecting only one row.

Default: false

Example: Single Select

43. toolbar

Attribute: data-toolbar

Type: String/Node

Detail:

A jQuery selector that indicates the toolbar, for example: #toolbar, .toolbar, or a DOM node.

Default: undefined

Example: Custom Toolbar