# Table options []({{ site.repo }}/blob/develop/docs/_i18n/{{ site.lang }}/documentation/table-options.md) --- The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
Name | Attribute | Type | Default | Description |
---|---|---|---|---|
- | data-toggle | String | 'table' | Activate bootstrap table without writing JavaScript. |
classes | data-classes | String | 'table table-hover' | The class name of table. By default, the table is bordered, you can add 'table-no-bordered' to remove table-bordered style. |
sortClass | data-sort-class | String | undefined | The class name of the td elements which are sorted. |
height | data-height | Number | undefined | The height of table. |
undefinedText | data-undefined-text | String | '-' | Defines the default undefined text. |
striped | data-striped | Boolean | false | True to stripe the rows. |
sortName | data-sort-name | String | undefined | Defines which column will be sorted. |
sortOrder | data-sort-order | String | 'asc' | Defines the column sort order, can only be 'asc' or 'desc'. |
sortStable | data-sort-stable | Boolean | false | True to get a stable sorting. We will add _position property to the row. |
iconsPrefix | data-icons-prefix | String | 'glyphicon' | Defines icon set name ('glyphicon' or 'fa' for FontAwesome). By default 'glyphicon' is used. |
iconSize | data-icon-size | String | undefined | Defines icon size:
|
buttonsClass | data-buttons-class | String | 'default' | Defines the Bootstrap class (added after 'btn-') of table buttons: EX: 'primary', 'danger', 'warning'... |
icons | data-icons | Object | { paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down', paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up', refresh: 'glyphicon-refresh icon-refresh', toggle: 'glyphicon-list-alt icon-list-alt', columns: 'glyphicon-th icon-th', detailOpen: 'glyphicon-plus icon-plus', detailClose: 'glyphicon-minus icon-minus' } |
Defines icons used in the toolbar, pagination, and details view. |
columns | - | Array | [] | The table columns config object, see column properties for more details. |
data | - | Array | [] | The data to be loaded. |
dataField | data-data-field | String | 'rows' | Key in incoming json containing rows data list. |
totalField | data-total-field | String | 'total' | Key in incoming json containing "total" data . |
ajax | data-ajax | Function | undefined | A method to replace ajax call. Should implement the same API as jQuery ajax method. |
method | data-method | String | 'get' | The method type to request remote data. |
url | data-url | String | undefined |
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: |
cache | data-cache | Boolean | true | False to disable caching of AJAX requests. |
contentType | data-content-type | String | 'application/json' | The contentType of request remote data. |
dataType | data-data-type | String | 'json' | The type of data that you are expecting back from the server. |
ajaxOptions | data-ajax-options | Object | {} | Additional options for submit ajax request. List of values: http://api.jquery.com/jQuery.ajax. |
queryParams | data-query-params | Function | function(params) { return params; } |
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. |
queryParamsType | data-query-params-type | String | 'limit' | Set 'limit' to send query params width RESTFul type. |
responseHandler | data-response-handler | Function | function(res) { return res; } |
Before load remote data, handler the response data format, the parameters object contains: res: the response data. |
pagination | data-pagination | Boolean | false | True to show a pagination toolbar on table bottom. |
paginationLoop | data-pagination-loop | Boolean | true | True to enable pagination continuous loop mode. |
onlyInfoPagination | data-only-info-pagination | Boolean | false | 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. |
sidePagination | data-side-pagination | String | 'client' |
Defines the side pagination of 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: |
pageNumber | data-page-number | Number | 1 | When set pagination property, initialize the page number. |
pageSize | data-page-size | Number | 10 | When set pagination property, initialize the page size. |
pageList | data-page-list | Array | [10, 25, 50, 100] | When set pagination property, initialize the page size selecting list. If you include the 'All' option, all the records will be shown in your table. |
selectItemName | data-select-item-name | String | 'btSelectItem' | The name of radio or checkbox input. |
smartDisplay | data-smart-display | Boolean | true | True to display pagination or card view smartly. |
escape | data-escape | Boolean | false | Escapes a string for insertion into HTML,
replacing & , < , > ,
" , ` , and ' characters. |
search | data-search | Boolean | false | Enable the search input. |
searchOnEnterKey | data-search-on-enter-key | Boolean | false | The search method will be executed until the Enter key is pressed. |
strictSearch | data-strict-search | Boolean | false | Enable the strict search. |
searchText | data-search-text | String | '' | When set search property, initialize the search text. |
searchTimeOut | data-search-time-out | Number | 500 | Set timeout for search fire. |
trimOnSearch | data-trim-on-search | Boolean | true | True to trim spaces in search field. | showHeader | data-show-header | Boolean | true | False to hide the table header. |
showFooter | data-show-footer | Boolean | false | True to show the summary footer row. |
showColumns | data-show-columns | Boolean | false | True to show the columns drop down list. |
showRefresh | data-show-refresh | Boolean | false | True to show the refresh button. |
showToggle | data-show-toggle | Boolean | false | True to show the toggle button to toggle table / card view. |
showPaginationSwitch | data-show-pagination-switch | Boolean | false | True to show the pagination switch button. |
minimumCountColumns | data-minimum-count-columns | Number | 1 | The minimum number of columns to hide from the columns drop down list. |
idField | data-id-field | String | undefined | Indicate which field is an identity field. |
uniqueId | data-unique-id | String | undefined | Indicate an unique identifier for each row. |
cardView | data-card-view | Boolean | false | True to show card view table, for example mobile view. |
detailView | data-detail-view | Boolean | false | True to show detail view table. |
detailFormatter | data-detail-formatter | Function | function(index, row, element) { return ''; } |
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. |
searchAlign | data-search-align | String | 'right' | Indicate how to align the search input. 'left', 'right' can be used. |
buttonsAlign | data-buttons-align | String | 'right' | Indicate how to align the toolbar buttons. 'left', 'right' can be used. |
toolbarAlign | data-toolbar-align | String | 'left' | Indicate how to align the custom toolbar. 'left', 'right' can be used. |
paginationVAlign | data-pagination-v-align | String | 'bottom' | Indicate how to align the pagination. 'top', 'bottom', 'both' (put the pagination on top and bottom) can be used. |
paginationHAlign | data-pagination-h-align | String | 'right' | Indicate how to align the pagination. 'left', 'right' can be used. |
paginationDetailHAlign | data-pagination-detail-h-align | String | 'left' | Indicate how to align the pagination detail. 'left', 'right' can be used. |
paginationPreText | data-pagination-pre-text | String | '‹' | Indicate the icon or text to be shown in the pagination detail, the previous button. |
paginationNextText | data-pagination-next-text | String | '›' | Indicate the icon or text to be shown in the pagination detail, the next button. |
clickToSelect | data-click-to-select | Boolean | false | True to select checkbox or radiobox when clicking rows. |
singleSelect | data-single-select | Boolean | false | True to allow checkbox selecting only one row. |
toolbar | data-toolbar | String | Node | undefined |
A jQuery selector that indicates the toolbar, for example: #toolbar, .toolbar, or a DOM node. |
checkboxHeader | data-checkbox-header | Boolean | true | False to hide check-all checkbox in header row. |
maintainSelected | data-maintain-selected | Boolean | false | True to maintain selected rows on change page and search. |
sortable | data-sortable | Boolean | true | False to disable sortable of all columns. |
silentSort | data-silent-sort | Boolean | true | Set false to sort the data silently. This options works when the sidePagination option is set to server . |
rowStyle | data-row-style | Function | {} |
The row style formatter function, takes two parameters: row: the row record data. index: the row index. Support classes or css. Example usage: function rowStyle(row, index) { return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; } |
rowAttributes | data-row-attributes | Function | {} |
The row attribute formatter function, takes two parameters: row: the row record data. index: the row index. Support all custom attributes. |
customSearch | data-custom-search | Function | $.noop |
The custom search function is executed instead of built-in search function, takes one parameters: text: the search text. Example usage: function customSearch(text) { //Search logic here. //You must use `this.data` array in order to filter the data. NO use `this.options.data`. } |
customSort | data-custom-sort | Function | $.noop |
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: function customSort(sortName, sortOrder) { //Sort logic here. //You must use `this.data` array in order to sort the data. NO use `this.options.data`. } |
locale | data-locale | String | undefined |
Sets the locale to use (i.e. 'fr-CA' ). Locale files must be pre-loaded.
Allows for fallback locales, if loaded, in the following order:
'en-US'
if no locale files loaded).
|
footerStyle | data-footer-style | Function | {} |
The footer style formatter function, takes two parameters: row: the row record data. index: the row index. Support classes or css. Example usage: function footerStyle(value, row, index) { return { css: { "font-weight": "bold" } }; } |