Table Options
The table options API of Bootstrap Table.
The table options are defined in jQuery.fn.bootstrapTable.defaults
.
-
-
Attribute:
data-toggle
-
Type:
String
-
Detail:
Activate bootstrap table without writing JavaScript.
-
Default:
'table'
-
Example: From HTML
ajax
-
Attribute:
data-ajax
-
Type:
Function
-
Detail:
A method to replace ajax call. Should implement the same API as jQuery ajax method.
-
Default:
undefined
-
Example: Table AJAX
ajaxOptions
-
Attribute:
data-ajax-options
-
Type:
Object
-
Detail:
Additional options for submit ajax request. List of values: jQuery.ajax.
-
Default:
{}
-
Example: AJAX Options
buttons
-
Attribute:
data-buttons
-
Type:
Function
-
Detail:
This option allows creating/adding custom button(s) to the “buttons bar” (top right of the table). These buttons can be sorted with the table option buttonsOrder, the used key/name for the event should be used for that!
The custom button is highly configurable, the following options exists:
text
- Description: This options is used for the showButtonText table option.
- Type:
String
icon
- Description: This option is used for the showButtonIcons table option.
- Type:
String
- Only needs the icon class e.g.fa-users
render
- Description: Set this option to
false
to hide the button by default, the button is visible again when you add the data attributedata-show-button-name="true"
.
- Description: Set this option to
attributes
- Description: This option allows adding additional html attributes e.g.
title
- Type:
Object
- Example:
{title: 'Button title'}
- Description: This option allows adding additional html attributes e.g.
html
- Description: If you don’t want to autogenerate the html, you can use this option to insert your custom html.
The
event
option only works if you custom HTML containsname="button-name"
. If this option is used the following options will be ignored:text
icon
attributes
- Type:
Function|String
- Description: If you don’t want to autogenerate the html, you can use this option to insert your custom html.
The
event
- Description: Should be used if you want to add an event to the button
- Type:
Function|Object|String
The
event
option can be configured in three ways. One event withclick
event:{ 'event': () => { } }
One event with a self-defined event type:
{ 'event': { 'mouseenter': () => { } } }
Multiple events with self-defined event types:
{ 'event': { 'click': () => { }, 'mouseenter': () => { }, 'mouseleave': () => { } } }
Hint: Instead of inline functions, you also can use function names.
A configured custom button could look like this:
{ 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' } } }
-
Default:
{}
-
Example: Buttons
buttonsAlign
-
Attribute:
data-buttons-align
-
Type:
String
-
Detail:
Indicate how to align the toolbar buttons.
'left'
,'right'
can be used. -
Default:
'right'
-
Example: Buttons Align
buttonsClass
-
Attribute:
data-buttons-class
-
Type:
String
-
Detail:
Defines the class (added after
'btn-'
) of table buttons. -
Default:
'secondary'
-
Example: Buttons Class
buttonsOrder
-
Attribute:
data-buttons-order
-
Type:
Array
-
Detail:
Indicate how to custom order the toolbar buttons.
-
Default:
['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']
-
Example: Buttons Order
buttonsPrefix
-
Attribute:
data-buttons-prefix
-
Type:
String
-
Detail:
Defines prefix of table buttons.
-
Default:
'btn'
-
Example: Buttons Prefix
buttonsToolbar
-
Attribute:
data-buttons-toolbar
-
Type:
String/Node
-
Detail:
A jQuery selector that indicates the custom buttons toolbar, for example:
#buttons-toolbar
,.buttons-toolbar
, or a DOM node. -
Default:
undefined
-
Example: Buttons Toolbar
cache
-
Attribute:
data-cache
-
Type:
Boolean
-
Detail:
Set
false
to disable caching of AJAX requests. -
Default:
true
-
Example: Table Cache
cardView
-
Attribute:
data-card-view
-
Type:
Boolean
-
Detail:
Set
true
to show card view table, for example, mobile view. -
Default:
false
-
Example: Card View
checkboxHeader
-
Attribute:
data-checkbox-header
-
Type:
Boolean
-
Detail:
Set
false
to hide the check-all checkbox in the header row. -
Default:
true
-
Example: Checkbox Header
classes
-
Attribute:
data-classes
-
Type:
String
-
Detail:
The class name of table.
'table'
,'table-bordered'
,'table-hover'
,'table-striped'
,'table-dark'
,'table-sm'
and'table-borderless'
can be used. By default, the table is bordered. -
Default:
'table table-bordered table-hover'
-
Example: Table Classes
clickToSelect
-
Attribute:
data-click-to-select
-
Type:
Boolean
-
Detail:
Set
true
to select the checkbox or radio box when clicking rows. -
Default:
false
-
Example: Click To Select
columns
-
Attribute:
-
-
Type:
Array
-
Detail:
The table columns config object. See column properties for more details.
-
Default:
[]
-
Example: Table Columns
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
customSearch
-
Attribute:
data-custom-search
-
Type:
Function
-
Detail:
The custom search function is executed instead of the built-in search function, takes three parameters:
data
: the table data.text
: the search text.filter
: the filter object fromfilterBy
method.
Example usage:
function customSearch(data, text) {
return data.filter(function (row) {
return row.field.indexOf(text) > -1
})
}
-
Default:
undefined
-
Example: Custom Search
customSort
-
Attribute:
data-custom-sort
-
Type:
Function
-
Detail:
The custom sort function is executed instead of the built-in sort function, takes three parameters:
sortName
: the sort name.sortOrder
: the sort order.data
: the rows data.
-
Default:
undefined
-
Example: Custom Order
data
-
Attribute:
data-data
-
Type:
Array | Object
-
Detail:
The data to be loaded.
If in the data has
_<field>_rowspan
or_<field>_colspan
property, then will merge cells auto, for example:$table.bootstrapTable({ data: [ { id: 1, name: 'Item 1', _name_rowspan: 2, price: '$1' }, { id: 2, price: '$2' } ] })
If using this feature, the
data
is required to ensure that the format is correct. -
Default:
[]
-
Example: From Data
dataField
-
Attribute:
data-data-field
-
Type:
String
-
Detail:
Key in incoming JSON containing
'rows'
data list. -
Default:
'rows'
-
Example: Total/Data Field
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
detailFilter
-
Attribute:
data-detail-filter
-
Type:
Function
-
Detail:
Enable expansion per row when
detailView
is set totrue
. Return true, and the row will be enabled for expansion, return false and expansion for the row will be disabled. Default function returns true to allow expansion for all rows. -
Default:
function(index, row) { return true }
-
Example: Detail Filter
detailFormatter
-
Attribute:
data-detail-formatter
-
Type:
Function
-
Detail:
Format your detail view when
detailView
is set totrue
. 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
detailView
-
Attribute:
data-detail-view
-
Type:
Boolean
-
Detail:
Set
true
to show a detailed view table. You can set theuniqueId
option to maintain the detail view state when refreshing the table. -
Default:
false
-
Example: Detail View UniqueId
detailViewAlign
-
Attribute:
data-detail-view-align
-
Type:
String
-
Detail:
Indicate how to align the detail view icon.
'left'
,'right'
can be used. -
Default:
'left'
-
Example: Detail view Align
detailViewByClick
-
Attribute:
data-detail-view-by-click
-
Type:
Boolean
-
Detail:
Set
true
to toggle the detail view when a cell is clicked. -
Default:
false
-
Example: Detail View Icon
detailViewIcon
-
Attribute:
data-detail-view-icon
-
Type:
Boolean
-
Detail:
Set
true
to show the detail view column (plus/minus icon). -
Default:
true
-
Example: Detail View Icon
escape
-
Attribute:
data-escape
-
Type:
Boolean
-
Detail:
Escapes a string for insertion into HTML, replacing &, <, >, “,
, and ' characters. To disable it for the column titles check the
escapeTitle` option. -
Default:
false
-
Example: Table Escape
escapeTitle
-
Attribute:
data-escape-title
-
Type:
Boolean
-
Detail:
Toggles if the
escape
option should be applied to the column titles. -
Default:
true
-
Example: Table Escape title
filterOptions
-
Attribute:
data-filter-options
-
Type:
Boolean
-
Detail:
Define the default filter options of the algorithm,
filterAlgorithm: 'and'
means all given filters must match,filterAlgorithm: 'or'
means one of the given filters must match. -
Default:
{ filterAlgorithm: 'and' }
-
Example: Filter Options
fixedScroll
-
Attribute:
data-fixed-scroll
-
Type:
Boolean
-
Detail:
Set
true
to enable the fixed scrollbar position of the table when loading data. -
Default:
false
-
Example: Fixed Scroll
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 colspan and/or the value of the footer. Only triggered when
data-pagination
istrue
anddata-side-pagination
isserver
.
{
"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
footerStyle
-
Attribute:
data-footer-style
-
Type:
Function
-
Detail:
The footer style formatter function, takes one parameter:
column
: the column object.
Support
classes
orcss
. Example usage:
function footerStyle(column) {
return {
css: { 'font-weight': 'normal' },
classes: 'my-class'
}
}
-
Default:
{}
-
Example: Footer Style
headerStyle
-
Attribute:
data-header-style
-
Type:
Function
-
Detail:
The header style formatter function, takes one parameter:
column
: the column object.
Support
classes
orcss
. Example usage:
function headerStyle(column) {
return {
css: { 'font-weight': 'normal' },
classes: 'my-class'
}
}
-
Default:
{}
-
Example: Header Style
height
-
Attribute:
data-height
-
Type:
Number
-
Detail:
The height of the table, enables a fixed header of the table.
-
Default:
undefined
-
Example: Table Height
icons
-
Attribute:
data-icons
-
Type:
Object
-
Detail:
Defines icons used in the toolbar, pagination, and details view.
-
Default:
{
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'
}
- Example: Table Icons
iconSize
-
Attribute:
data-icon-size
-
Type:
String
-
Detail:
Defines icon size,
undefined
,'lg'
,'sm'
can be used. -
Default:
undefined
-
Example: Icon Size
iconsPrefix
-
Attribute:
data-icons-prefix
-
Type:
String
-
Detail:
Defines icon set name. By default, this option is automatically calculated by the theme.
{ bootstrap3: 'glyphicon', bootstrap4: 'fa', bootstrap5: 'bi', 'bootstrap-table': 'icon', bulma: 'fa', foundation: 'fa', materialize: 'material-icons', semantic: 'fa' }
-
Default:
undefined
- Example: Icons Prefix
idField
-
Attribute:
data-id-field
-
Type:
String
-
Detail:
Indicate which field will be used as checkbox/radio value, its the counterpart to selectItemName.
-
Default:
undefined
- Example: Id Field
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
loadingFontSize
-
Attribute:
data-loading-font-size
-
Type:
String
-
Detail:
To define the font size of the loading text, the default value is
'auto'
, calculated automatically according to the table width, between 12px and 32px. -
Default:
'auto'
-
Example: Loading Font Size
loadingTemplate
-
Attribute:
data-loading-template
-
Type:
Function
-
Detail:
To custom the loading type by yourself. The parameters object contain:
- loadingMessage: the
formatLoadingMessage
locale.
- loadingMessage: the
- Default:
function (loadingMessage) { return '<span class="loading-wrap">' + '<span class="loading-text">' + loadingMessage + '</span>' + '<span class="animation-wrap"><span class="animation-dot"></span></span>' + '</span>' }
- Example: Loading Template
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
maintainMetaData
-
Attribute:
data-maintain-meta-data
-
Type:
Boolean
-
Detail:
Set
true
to maintain the following metadata on the change page and search:- selected rows
- hidden rows
-
Default:
false
-
Example: Maintain Meta Data
method
-
Attribute:
data-method
-
Type:
String
-
Detail:
The method type to request remote data.
-
Default:
'get'
-
Example: Table Method
minimumCountColumns
-
Attribute:
data-minimum-count-columns
-
Type:
Number
-
Detail:
The minimum number of columns to hide from the columns dropdown list.
-
Default:
1
-
Example: Minimum Count Columns
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 shift+click to select a range of rows. -
Default:
false
-
Example: Multiple Select Row
pageList
-
Attribute:
data-page-list
-
Type:
Array
-
Detail:
When setting the pagination property, initialize the page size by selecting the 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
pageNumber
-
Attribute:
data-page-number
-
Type:
Number
-
Detail:
When setting the pagination property, initialize the page number.
-
Default:
1
-
Example: Page Number
pageSize
-
Attribute:
data-page-size
-
Type:
Number
-
Detail:
When setting the pagination property, initialize the page size.
-
Default:
10
-
Example: Page Size
pagination
-
Attribute:
data-pagination
-
Type:
Boolean
-
Detail:
Set
true
to show a pagination toolbar on the table bottom. -
Default:
false
-
Example: Table Pagination
paginationDetailHAlign
-
Attribute:
data-pagination-detail-h-align
-
Type:
String
-
Detail:
Indicate how to align the pagination detail.
'left'
,'right'
can be used. -
Default:
'left'
-
Example: Pagination H Align
paginationHAlign
-
Attribute:
data-pagination-h-align
-
Type:
String
-
Detail:
Indicate how to align the pagination.
'left'
,'right'
can be used. -
Default:
'right'
-
Example: Pagination H Align
paginationLoadMore
-
Attribute:
data-pagination-load-more
-
Type:
Boolean
-
Detail:
Set
true
to enable loading more data through pagination. It is only used in the client-side pagination. In general, to implement the “load more” functionality, it is often necessary to combine it with aresponseHandler
to process the returned data.It is primarily used in scenarios where the total number of pages is unknown. In such cases, it is not possible to display the exact total count or calculate the total number of pages. Instead, a display format such as “100+” can be utilized to indicate the presence of additional items beyond the displayed count. As the user navigates to the last page, more data is loaded, along with an update to the pagination information. This process continues until all data loading is complete.
-
Default:
false
-
Example: Pagination Load More
paginationLoop
-
Attribute:
data-pagination-loop
-
Type:
Boolean
-
Detail:
Set
true
to enable pagination continuous loop mode. -
Default:
true
-
Example: Pagination Loop
paginationNextText
-
Attribute:
data-pagination-next-text
-
Type:
String
-
Detail:
Indicate the icon or text to be shown in the pagination detail, the next button.
-
Default:
'›'
-
Example: Pagination Text
paginationPagesBySide
-
Attribute:
data-pagination-pages-by-side
-
Type:
Number
-
Detail:
The number of pages on each side (right, left) of the current page.
-
Default:
1
-
Example: Pagination Index Number
paginationParts
-
Attribute:
data-pagination-parts
-
Type:
Array
-
Detail:
These options define which parts of the pagination should be visible.
pageInfo
Shows which dataset will be displayed on the current page (e.g.Showing 1 to 10 of 54 rows
).pageInfoShort
Similar topageInfo
, it only displays how many rows the table has (e.g.Showing 54 rows
).pageSize
Shows the dropdown which defines how many rows should be displayed on the page.pageList
Shows the main part of the pagination (The list of the pages).
-
Default:
['pageInfo', 'pageSize', 'pageList']
-
Example: Pagination Parts
paginationPreText
-
Attribute:
data-pagination-pre-text
-
Type:
String
-
Detail:
Indicate the icon or text shown in the pagination detail, the previous button.
-
Default:
'‹'
-
Example: Pagination Text
paginationSuccessivelySize
-
Attribute:
data-pagination-successively-size
-
Type:
Number
-
Detail:
Maximum successive number of pages in a row.
-
Default:
5
-
Example: Pagination Index Number
paginationUseIntermediate
-
Attribute:
data-pagination-use-intermediate
-
Type:
Boolean
-
Detail:
Calculate and show intermediate pages for quick access.
-
Default:
false
-
Example: Pagination Index Number
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
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
queryParamsType
-
Attribute:
data-query-params-type
-
Type:
String
-
Detail:
Set
'limit'
to send query params with RESTFul type. -
Default:
'limit'
-
Example: Query Params Type
regexSearch
-
Attribute:
data-regex-search
-
Type:
Boolean
-
Detail:
Set
true
to enable the regex search. If this option is enabled, you can search with regex, e.g.[47a]$
for all items which end with a4
,7
ora
. The regex can be entered with/[47a]$/gim
or without[47a]$
flags. The default flags aregim
. -
Default:
false
-
Example: Regex Search
rememberOrder
-
Attribute:
data-remember-order
-
Type:
Boolean
-
Detail:
Set
true
to remember the order for each column. -
Default:
false
-
Example: Remember Order
responseHandler
-
Attribute:
data-response-handler
-
Type:
Function
-
Detail:
Before loading remote data, handle the response data format. The parameters object contains:
res
: the response data.jqXHR
: jqXHR object, which is a super set of the XMLHTTPRequest object. For more information, see the jqXHR Type.
-
Default:
function(res) { return res }
-
Example: Response Handler
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
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
search
-
Attribute:
data-search
-
Type:
Boolean
-
Detail:
Enable the search input.
There are three ways to search:
- The value contains the search query (Default). Example: Github contains git.
- The value must be identical to the search query. Example: Github (value) and Github (search query).
- Comparisons (<, >, <=, =<, >=, =>). Example: 4 is larger than 3.
Notes:
- If you want to use a custom search input, use the searchSelector.
- You can also search via regex using the regexSearch option.
- If you want to send searchable params to server-side pagination, use the searchable option.
-
Default:
false
-
Example: Table Search
searchable
-
Attribute:
data-searchable
-
Type:
Boolean
-
Detail:
Set
true
to send searchable params to the server while using server-side pagination. -
Default:
false
-
Example: Searchable
searchAccentNeutralise
-
Attribute:
data-search-accent-neutralise
-
Type:
Boolean
-
Detail:
Set to
true
if you want to use the accent neutralize feature. -
Default:
false
-
Example: Search Accent Neutralise
searchAlign
-
Attribute:
data-search-align
-
Type:
String
-
Detail:
Indicate how to align the search input.
'left'
,'right'
can be used. -
Default:
'right'
-
Example: Search Align
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, e.g., for values with HTML or to use a custom highlight color. -
Default:
'false'
-
Example: Search Highlight
searchOnEnterKey
-
Attribute:
data-search-on-enter-key
-
Type:
Boolean
-
Detail:
The search method will be executed until the Enter key is pressed.
-
Default:
false
-
Example: Search On Enter Key
searchSelector
-
Attribute:
data-search-selector
-
Type:
Boolean|String
-
Detail:
If this option is set (must be a valid dom selector, e.g.
#customSearch
), the found dom element (aninput
element) will be used as table search instead of the built-in search input. -
Default:
false
-
Example: Search Selector
searchText
-
Attribute:
data-search-text
-
Type:
String
-
Detail:
When setting search property, initialize the search text.
-
Default:
''
-
Example: Search Text
searchTimeOut
-
Attribute:
data-search-time-out
-
Type:
Number
-
Detail:
Set timeout for search fire.
-
Default:
500
-
Example: Search Time Out
selectItemName
-
Attribute:
data-select-item-name
-
Type:
String
-
Detail:
The name of the radio or checkbox input.
-
Default:
'btSelectItem'
-
Example: Id Field
serverSort
-
Attribute:
data-server-sort
-
Type:
Boolean
-
Detail:
Set
false
to sort the data on the client-side, only works when thesidePagination
isserver
. -
Default:
true
-
Example: Server Sort
showButtonIcons
-
Attribute:
data-show-button-icons
-
Type:
Boolean
-
Detail:
All buttons will show icons on them.
-
Default:
true
-
Example: show button icons
showButtonText
-
Attribute:
data-show-button-text
-
Type:
Boolean
-
Detail:
All buttons will show text on them.
-
Default:
false
-
Example: show button text
showColumns
-
Attribute:
data-show-columns
-
Type:
Boolean
-
Detail:
Set
true
to show the columns drop down list. We can set theswitchable
column option tofalse
to hide the columns item in the drop down list. The minimum number of selected columns can be controlled with the minimumCountColumns table option. -
Default:
false
-
Example: Basic Columns and Large Columns
showColumnsSearch
-
Attribute:
data-show-columns-search
-
Type:
Boolean
-
Detail:
Set
true
to show a search for the column’s filter. -
Default:
false
-
Example: Columns Search
showColumnsToggleAll
-
Attribute:
data-show-columns-toggle-all
-
Type:
Boolean
-
Detail:
Set
true
to show a toggle all checkbox within the columns option/dropdown. -
Default:
false
-
Example: Columns Toggle All
showExtendedPagination
-
Attribute:
data-show-extended-pagination
-
Type:
Boolean
-
Detail:
Set
true
to show an extended version of pagination (including the count of all rows without filters). If you use pagination on the server side, please usetotalNotFilteredField
to define the count. -
Default:
false
-
Example: Show Extended Pagination
showFooter
-
Attribute:
data-show-footer
-
Type:
Boolean
-
Detail:
Set
true
to show the summary footer row. -
Default:
false
-
Example: Show Footer
showFullscreen
-
Attribute:
data-show-fullscreen
-
Type:
Boolean
-
Detail:
Set
true
to show the fullscreen button. -
Default:
false
-
Example: Show Fullscreen
showHeader
-
Attribute:
data-show-header
-
Type:
Boolean
-
Detail:
Set
false
to hide the table header. -
Default:
true
-
Example: Show Header
showPaginationSwitch
-
Attribute:
data-show-pagination-switch
-
Type:
Boolean
-
Detail:
Set
true
to show the pagination switch button. -
Default:
false
-
Example: Show Pagination Switch
showRefresh
-
Attribute:
data-show-refresh
-
Type:
Boolean
-
Detail:
Set
true
to show the refresh button. -
Default:
false
-
Example: Show Refresh
showSearchButton
-
Attribute:
data-show-search-button
-
Type:
Boolean
-
Detail:
Set
true
to show a search Button behind the search input. The Search will only be executed if the button is pressed (e.g., to prevent traffic or loading time). -
Default:
false
-
Example: Show Search Button
showSearchClearButton
-
Attribute:
data-show-search-clear-button
-
Type:
Boolean
-
Detail:
Set
true
to show a clear Button behind the search input, which will clear the search input (also all filter from filter-control (if enabled)). -
Default:
false
-
Example: Show Search Clear Button
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
sidePagination
-
Attribute:
data-side-pagination
-
Type:
String
-
Detail:
Defines the side pagination of the table, can only be
'client'
or'server'
. Using the'server'
side requires setting the'url'
or'ajax'
option.Note that the required server response format is different depending on whether the
'sidePagination'
option is set to'client'
or'server'
. See the following examples:URL parameters:
When
sidePagination
is set toserver
, the bootstrap table will make calls to theurl
with the following URL parameters:offset
with a value between 0 andtotal
- 1, indicating the first record to include.limit
with a value indicating the number of rows per page.
When implementing server-side pagination, you must implement a JSON view in a format like this example. That view must take the URL parameter values indicated above and return records starting at the
offset
index and returns the number of records indicated bylimit
. For example, if you want records 11-20, your view must obtain theoffset=10
andlimit=10
from the URL string and return records like this example. -
Default:
'client'
-
Example: Client Side Pagination and Server Side Pagination
silentSort
-
Attribute:
data-silent-sort
-
Type:
Boolean
-
Detail:
Set
false
to sort the data with the loading message. This options works when the sidePagination option is set to'server'
. -
Default:
true
-
Example: Silent Sort
singleSelect
-
Attribute:
data-single-select
-
Type:
Boolean
-
Detail:
Set
true
to allow a checkbox selecting only one row. -
Default:
false
-
Example: Single Select
smartDisplay
-
Attribute:
data-smart-display
-
Type:
Boolean
-
Detail:
Set
true
to display pagination or card view smartly. -
Default:
true
-
Example: Smart Display
sortable
-
Attribute:
data-sortable
-
Type:
Boolean
-
Detail:
Set
false
to disable sortable of all columns. -
Default:
true
-
Example: Table Sortable
sortClass
-
Attribute:
data-sort-class
-
Type:
String
-
Detail:
The class name of the
td
elements are sorted. -
Default:
undefined
-
Example: Sort Class
sortEmptyLast
-
Attribute:
data-sort-empty-last
-
Type:
Boolean
-
Detail:
Set
true
to sort<empty string>
,undefined
andnull
as last value. -
Default:
false
-
Example: Sort Empty Last
sortName
-
Attribute:
data-sort-name
-
Type:
String
-
Detail:
Defines which column will be sorted.
-
Default:
undefined
-
Example: Sort Name Order
sortOrder
-
Attribute:
data-sort-order
-
Type:
String
-
Detail:
Defines the column sort order, can only be
undefined
,'asc'
or'desc'
. -
Default:
undefined
-
Example: Sort Name Order
sortReset
-
Attribute:
data-sort-reset
-
Type:
Boolean
-
Detail:
Set
true
to reset the sort on the third click. -
Default:
false
-
Example: Sort Reset
sortResetPage
-
Attribute:
data-sort-reset-page
-
Type:
Boolean
-
Detail:
Set
true
to reset the page number when sorting. -
Default:
false
-
Example: Sort Reset Page
sortStable
-
Attribute:
data-sort-stable
-
Type:
Boolean
-
Detail:
Set
true
to get a stable sorting. We will add'_position'
property to the row. -
Default:
false
-
Example: Sort Stable
strictSearch
-
Attribute:
data-strict-search
-
Type:
Boolean
-
Detail:
Enable the strict search. Disables the comparison checks.
-
Default:
false
-
Example: Strict Search
theadClasses
-
Attribute:
data-thead-classes
-
Type:
String
-
Detail:
The class name of table thead. Bootstrap v4, use the modifier classes
.thead-light
or.thead-dark
to makethead
appear light or dark gray. -
Default:
''
-
Example: Thead Classes
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
toolbarAlign
-
Attribute:
data-toolbar-align
-
Type:
String
-
Detail:
Indicate how to align the custom toolbar.
'left'
,'right'
can be used. -
Default:
'left'
-
Example: Toolbar Align
totalField
-
Attribute:
data-total-field
-
Type:
String
-
Detail:
Key in incoming JSON containing
'total'
data. -
Default:
'total'
-
Example: Total/Data Field
totalNotFiltered
-
Attribute:
data-total-not-filtered
-
Type:
Number
-
Detail:
This property is mainly passed in by the pagination server, which is easy to use.
-
Default:
0
totalNotFilteredField
-
Attribute:
data-total-not-filtered-field
-
Type:
string
-
Detail:
The field from the JSON response will be used for
showExtendedPagination
. -
Default:
totalNotFiltered
-
Example: Total Not Filtered Field
totalRows
-
Attribute:
data-total-rows
-
Type:
Number
-
Detail:
This property is mainly passed in by the pagination server, which is easy to use.
-
Default:
0
trimOnSearch
-
Attribute:
data-trim-on-search
-
Type:
Boolean
-
Detail:
Set
true
to trim spaces in the search field. -
Default:
true
-
Example: Trim On Search
undefinedText
-
Attribute:
data-undefined-text
-
Type:
String
-
Detail:
Defines the default
undefined
text. -
Default:
'-'
-
Example: Undefined Text
uniqueId
-
Attribute:
data-unique-id
-
Type:
String
-
Detail:
Indicate a unique identifier for each row. The Unique id should always be safe for html e.g. alphanumeric, it should not contain chars which can break html e.g.
"
. -
Default:
undefined
-
Example: getRowByUniqueId
url
-
Attribute:
data-url
-
Type:
String
-
Detail:
A URL to request data from remote site.
Note that the required server response format is different depending on whether the
'sidePagination'
option is specified. See the following examples:URL parameters:
When
sidePagination
is set toserver
, the bootstrap table will make calls to theurl
with the following URL parameters:offset
with a value between 0 andtotal
- 1, indicating the first record to include.limit
with a value indicating the number of rows per page.
When implementing server-side pagination, you must implement a JSON view in a format like this example. That view must take the URL parameter values indicated above and return records starting at the
offset
index and returns the number of records indicated bylimit
. For example, if you want records 11-20, your view must obtain theoffset=10
andlimit=10
from the URL string and return records like this example. -
Default:
undefined
-
Example: From URL
-
Error handling
To get loading errors please use onLoadError
virtualScroll
-
Attribute:
data-virtual-scroll
-
Type:
Boolean
-
Detail:
Set
true
to enable virtual scroll to display a virtual, “infinite” list. -
Default:
false
-
Example: Large Data
virtualScrollItemHeight
-
Attribute:
data-virtual-scroll-item-height
-
Type:
Number
-
Detail:
If this option is not defined, we will use the height of the first item by default.
It is important to provide this if the virtual item height is significantly larger than the default height. This dimension is used to help determine how many cells should be created when initialized and to help calculate the height of the scrollable area. This height value can only use
px
units. -
Default:
undefined
visibleSearch
-
Attribute:
data-visible-search
-
Type:
Boolean
-
Detail:
Set
true
to search only in visible column/data. If the data contains other values which are not displayed, they will be ignored while searching. -
Default:
false
-
Example: visible search