table-options.md 20 KB
layout: docs title: Table Options description: The table options API of Bootstrap Table. group: api redirect_from:
- "/docs/api/"
- "/documentation/"
- "/zh-cn/documentation/"
- "/es/documentation/" toc: true ---
The table options are defined in jQuery.fn.bootstrapTable.defaults.
-
Attribute:
data-toggleType:
StringDetail:
Activate bootstrap table without writing JavaScript.
- Default:
'table'
locale
Attribute:
data-localeType:
StringDetail:
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 the short locale code (i.e.
'zh'instead of'fr-CA'), - And finally will use the last locale file loaded (or the default locale if no locales loaded).
If left undfined or an empty string, uses the last locale loaded (or 'en-US' if no locale files loaded).
- Default:
undefined
height
Attribute:
data-heightType:
NumberDetail:
The height of table, enable fixed header of table.
- Default:
undefined
undefinedText
Attribute:
data-undefined-textType:
StringDetail:
Defines the default undefined text.
- Default:
'-'
classes
Attribute:
data-classesType:
StringDetail:
The class name of table. By default, the table is bordered, you can add 'table-no-bordered' to remove table-bordered style.
- Default:
'table table-hover'
theadClasses
Attribute:
data-thead-classesType:
StringDetail:
The class name of table thead. Bootstrap v4, use the modifier classes .thead-light or .thead-dark to make theads appear light or dark gray.
- Default:
''
sortClass
Attribute:
data-sort-classType:
StringDetail:
The class name of the td elements which are sorted.
- Default:
undefined
striped
Attribute:
data-stripedType:
BooleanDetail:
Set true to stripe the rows.
- Default:
false
rowStyle
Attribute:
data-row-styleType:
FunctionDetail:
The row style formatter function, takes two parameters:
row: the row record data.index: the row index.
Support classes or css. Example usage:
{% highlight javascript %} function rowStyle(row, index) {
return {
classes: 'text-nowrap another-class',
css: {color: 'blue', 'font-size': '50px'}
}
} {% endhighlight %}
- Default:
{}
rowAttributes
Attribute:
data-row-attributesType:
FunctionDetail:
The row attribute formatter function, takes two parameters:
row: the row record data.index: the row index.
Support all custom attributes.
- Default:
{}
sortable
Attribute:
data-sortableType:
BooleanDetail:
Set false to disable sortable of all columns.
- Default:
true
silentSort
Attribute:
data-silent-sortType:
BooleanDetail:
Set false to sort the data silently. This options works when the sidePagination option is set to 'server'.
- Default:
true
sortName
Attribute:
data-sort-nameType:
StringDetail:
Defines which column will be sorted.
- Default:
undefined
sortOrder
Attribute:
data-sort-orderType:
StringDetail:
Defines the column sort order, can only be 'asc' or 'desc'.
- Default:
'asc'
sortStable
Attribute:
data-sort-stableType:
BooleanDetail:
Set true to get a stable sorting. We will add '_position' property to the row.
- Default:
false
rememberOrder
Attribute:
data-remember-orderType:
BooleanDetail:
Set true remember the order for each column.
- Default:
false
customSort
Attribute:
data-custom-sortType:
FunctionDetail:
The custom sort function is executed instead of built-in sort function, takes two parameters:
sortName: the sort name.sortOrder: the sort order.
Example usage:
{% highlight javascript %} function customSort(sortName, sortOrder) {
//Sort logic here.
//You must use `this.data` array in order to sort the data. NO use `this.options.data`.
} {% endhighlight %}
- Default:
$.noop
columns
Attribute:
-Type:
ArrayDetail:
The table columns config object, see column properties for more details.
- Default:
[]
data
Attribute:
-Type:
Array | ObjectDetail:
The data to be loaded.
- Default:
[]
totalField
Attribute:
data-total-fieldType:
StringDetail:
Key in incoming json containing 'total' data .
- Default:
'total'
dataField
Attribute:
data-data-fieldType:
StringDetail:
Key in incoming json containing 'rows' data list.
- Default:
'rows'
method
Attribute:
data-methodType:
StringDetail:
The method type to request remote data.
- Default:
'get'
url
Attribute:
data-urlType:
StringDetail:
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:
- Without server-side pagination
Default:
undefined
ajax
Attribute:
data-ajaxType:
FunctionDetail:
A method to replace ajax call. Should implement the same API as jQuery ajax method.
- Default:
undefined
cache
Attribute:
data-cacheType:
BooleanDetail:
Set false to disable caching of AJAX requests.
- Default:
true
contentType
Attribute:
data-content-typeType:
StringDetail:
The contentType of request remote data.
- Default:
'application/json'
dataType
Attribute:
data-data-typeType:
StringDetail:
The type of data that you are expecting back from the server.
- Default:
'json'
ajaxOptions
Attribute:
data-ajax-optionsType:
ObjectDetail:
Additional options for submit ajax request. List of values: jQuery.ajax.
- Default:
{}
queryParams
Attribute:
data-query-paramsType:
FunctionDetail:
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 }
queryParamsType
Attribute:
data-query-params-typeType:
StringDetail:
Set 'limit' to send query params with RESTFul type.
- Default:
'limit'
responseHandler
Attribute:
data-response-handlerType:
FunctionDetail:
Before load remote data, handler the response data format, the parameters object contains:
res: the response data.Default:
function(res) { return res }
pagination
Attribute:
data-paginationType:
BooleanDetail:
Set true to show a pagination toolbar on table bottom.
- Default:
false
onlyInfoPagination
Attribute:
data-only-info-paginationType:
BooleanDetail:
Set true to show only the quantity of the data that is showing in the table. It needs the pagination table options is set to true.
- Default:
false
paginationLoop
Attribute:
data-pagination-loopType:
BooleanDetail:
Set true to enable pagination continuous loop mode.
- Default:
true
sidePagination
Attribute:
data-side-paginationType:
StringDetail:
Defines the side pagination of the table, can only be 'client' or 'server'.
Using 'server' side requires either setting the 'url' or 'ajax' option.
Note that the required server response format is different depending on whether the 'client' or 'server' option is specified. See the following examples:
- Without server-side pagination
Default:
'client'
totalRows
Attribute:
data-total-rowsType:
NumberDetail:
This property is mainly passed in by server side pagination, which is easy to use. It can be set with custom pagination.
- Default:
0
pageNumber
Attribute:
data-page-numberType:
NumberDetail:
When set pagination property, initialize the page number.
- Default:
1
pageSize
Attribute:
data-page-sizeType:
NumberDetail:
When set pagination property, initialize the page size.
- Default:
10
pageList
Attribute:
data-page-listType:
ArrayDetail:
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.
- Default:
[10, 25, 50, 100]
paginationHAlign
Attribute:
data-pagination-h-alignType:
StringDetail:
Indicate how to align the pagination. 'left', 'right' can be used.
- Default:
'right'
paginationVAlign
Attribute:
data-pagination-v-alignType:
StringDetail:
Indicate how to align the pagination. 'top', 'bottom', 'both' (put the pagination on top and bottom) can be used.
- Default:
'bottom'
paginationDetailHAlign
Attribute:
data-pagination-detail-h-alignType:
StringDetail:
Indicate how to align the pagination detail. 'left', 'right' can be used.
- Default:
'left'
paginationPreText
Attribute:
data-pagination-pre-textType:
StringDetail:
Indicate the icon or text to be shown in the pagination detail, the previous button.
- Default:
'‹'
paginationNextText
Attribute:
data-pagination-next-textType:
StringDetail:
Indicate the icon or text to be shown in the pagination detail, the next button.
- Default:
'›'
paginationSuccessivelySize
Attribute:
data-pagination-successively-sizeType:
NumberDetail:
Maximum successive number of pages in a row.
- Default:
5
paginationPagesBySide
Attribute:
data-pagination-pages-by-sideType:
NumberDetail:
The number of pages on each side (right, left) of the current page.
- Default:
1
paginationUseIntermediate
Attribute:
data-pagination-use-intermediateType:
BooleanDetail:
Calculate and show intermediate pages for quick access
- Default:
false
search
Attribute:
data-searchType:
BooleanDetail:
Enable the search input.
- Default:
false
searchOnEnterKey
Attribute:
data-search-on-enter-keyType:
BooleanDetail:
The search method will be executed until the Enter key is pressed.
- Default:
false
strictSearch
Attribute:
data-strict-searchType:
BooleanDetail:
Enable the strict search.
- Default:
false
trimOnSearch
Attribute:
data-trim-on-searchType:
BooleanDetail:
Set true to trim spaces in search field.
- Default:
true
searchAlign
Attribute:
data-search-alignType:
StringDetail:
Indicate how to align the search input. 'left', 'right' can be used.
- Default:
'right'
searchTimeOut
Attribute:
data-search-time-outType:
NumberDetail:
Set timeout for search fire.
- Default:
500
searchText
Attribute:
data-search-textType:
StringDetail:
When set search property, initialize the search text.
- Default:
''
customSearch
Attribute:
data-custom-searchType:
FunctionDetail:
The custom search function is executed instead of built-in search function, takes one parameters:
text: the search text.
Example usage:
{% highlight javascript %} function customSearch(text) {
//Search logic here.
//You must use `this.data` array in order to filter the data. NO use `this.options.data`.
} {% endhighlight %}
- Default:
$.noop
showHeader
Attribute:
data-show-headerType:
BooleanDetail:
Set false to hide the table header.
- Default:
true
showFooter
Attribute:
data-show-footerType:
BooleanDetail:
Set true to show the summary footer row.
- Default:
false
footerStyle
Attribute:
data-footer-styleType:
FunctionDetail:
The footer style formatter function, takes two parameters:
row: the row record data.index: the row index.
Support classes or css. Example usage:
{% highlight javascript %} function footerStyle(value, row, index) {
return {
css: { "font-weight": "bold" }
}
} {% endhighlight %}
- Default:
{}
showColumns
Attribute:
data-show-columnsType:
BooleanDetail:
Set true to show the columns drop down list.
- Default:
false
minimumCountColumns
Attribute:
data-minimum-count-columnsType:
NumberDetail:
The minimum number of columns to hide from the columns drop down list.
- Default:
1
showPaginationSwitch
Attribute:
data-show-pagination-switchType:
BooleanDetail:
Set true to show the pagination switch button.
- Default:
false
showRefresh
Attribute:
data-show-refreshType:
BooleanDetail:
Set true to show the refresh button.
- Default:
false
showToggle
Attribute:
data-show-toggleType:
BooleanDetail:
Set true to show the toggle button to toggle table / card view.
- Default:
false
showFullscreen
Attribute:
data-show-fullscreenType:
BooleanDetail:
Set true to show the fullscreen button.
- Default:
false
smartDisplay
Attribute:
data-smart-displayType:
BooleanDetail:
Set true to display pagination or card view smartly.
- Default:
true
escape
Attribute:
data-escapeType:
BooleanDetail:
Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters.
- Default:
false
idField
Attribute:
data-id-fieldType:
StringDetail:
Indicate which field is an identity field.
- Default:
undefined
uniqueId
Attribute:
data-unique-idType:
StringDetail:
Indicate an unique identifier for each row.
- Default:
undefined
cardView
Attribute:
data-card-viewType:
BooleanDetail:
Set true to show card view table, for example mobile view.
- Default:
false
detailView
Attribute:
data-detail-viewType:
BooleanDetail:
Set true to show detail view table.
- Default:
false
detailFormatter
Attribute:
data-detail-formatterType:
FunctionDetail:
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 '' }
detailFilter
Attribute:
data-detail-filterType:
FunctionDetail:
Enable expansion per row when detailView is set to true. 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 enable expansion for all rows.
- Default:
function(index, row) { return true }
selectItemName
Attribute:
data-select-item-nameType:
StringDetail:
The name of radio or checkbox input.
- Default:
'btSelectItem'
clickToSelect
Attribute:
data-click-to-selectType:
BooleanDetail:
Set true to select checkbox or radiobox when clicking rows.
- Default:
false
ignoreClickToSelectOn
Attribute:
data-ignore-click-to-select-onType:
FunctionDetail:
Takes one parameters:
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 $.inArray(element.tagName, ['A', 'BUTTON']) }
singleSelect
Attribute:
data-single-selectType:
BooleanDetail:
Set true to allow checkbox selecting only one row.
- Default:
false
checkboxHeader
Attribute:
data-checkbox-headerType:
BooleanDetail:
Set false to hide check-all checkbox in header row.
- Default:
true
maintainSelected
Attribute:
data-maintain-selectedType:
BooleanDetail:
Set true to maintain selected rows on change page and search.
- Default:
false
toolbar
Attribute:
data-toolbarType:
String/NodeDetail:
A jQuery selector that indicates the toolbar, for example: #toolbar, .toolbar, or a DOM node.
- Default:
undefined
toolbarAlign
Attribute:
data-toolbar-alignType:
StringDetail:
Indicate how to align the custom toolbar. 'left', 'right' can be used.
- Default:
'left'
buttonsToolbar
Attribute:
data-buttons-toolbarType:
String/NodeDetail:
A jQuery selector that indicates the buttons toolbar, for example: #buttons-toolbar, .buttons-toolbar, or a DOM node.
- Default:
undefined
buttonsAlign
Attribute:
data-buttons-alignType:
StringDetail:
Indicate how to align the toolbar buttons. 'left', 'right' can be used.
- Default:
'right'
buttonsClass
Attribute:
data-buttons-classType:
StringDetail:
Defines the Bootstrap class (added after 'btn-') of table buttons.
- Default:
'secondary'
icons
Attribute:
data-iconsType:
ObjectDetail:
Defines icons used in the toolbar, pagination, and details view.
- Default:
{% highlight html %} {
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',
detailOpen: 'fa-plus',
detailClose: 'fa-minus',
fullscreen: 'fa-arrows-alt'
} {% endhighlight %}
iconSize
Attribute:
data-icon-sizeType:
StringDetail:
Defines icon size: undefined => btnxs => btn-xssm => btn-smlg => btn-lg
- Default:
undefined
iconsPrefix
Attribute:
data-icons-prefixType:
StringDetail:
Defines icon set name ('glyphicon' or 'fa' for FontAwesome). By default 'fa' is used for Bootstrap v4.
- Default:
'fa'