The table options is 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. |
| 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 can be sorted. |
| sortOrder | data-sort-order | String | 'asc' | Defines the column sort order, can only be 'asc' or 'desc'. |
| iconsPrefix | data-icons-prefix | String | 'glyphicon' | Defines icon set name ('glyphicon' or 'fa' for FontAwesome). By default 'glyphicon' is used. |
| icons | data-icons | Object | { refresh: 'glyphicon-refresh icon-refresh', toggle: 'glyphicon-list-alt icon-list-alt', columns: 'glyphicon-th icon-th' } |
Defines icons that used for refresh, toggle and columns buttons |
| columns | - | Array | [] | The table columns config object, see column properties for more details. |
| data | - | Array | [] | The data to be loaded. |
| 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. |
| 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. |
| sidePagination | data-side-pagination | String | 'client' | Defines the side pagination of table, can only be 'client' or 'server'. |
| 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, All] | 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. |
| search | data-search | Boolean | false | Enable the search input. |
| 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. |
| showHeader | data-show-header | Boolean | true | False to hide the table header. |
| showFooter | data-show-footer | Boolean | false | If true shows 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 count columns to hide of the columns drop down list. |
| idField | data-id-field | String | undefined | Indicate which field is an identity field. |
| cardView | data-card-view | Boolean | false | True to show card view table, for example mobile view. |
| 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. |
| 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. |
| clickToSelect | data-click-to-select | Boolean | false | True to select checkbox or radiobox when click rows. |
| singleSelect | data-single-select | Boolean | false | True to allow checkbox selecting only one row. |
| toolbar | data-toolbar | String | undefined |
A jQuery selector that indicate the toolbar, for example: #toolbar, .toolbar. |
| 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. |
| keyEvents | data-key-events | Boolean | false | True to enable the key events. For now when the user presses the "S" or "s" key the search button will be focused. |
| stateSave | data-state-save | Boolean | false | True to save the state of a table (its paging position, ordering state, records per page). |
| stateSaveExpire | data-state-save-expire | String | '2h' | You must set this property if stateSave is enable to know when will expire the cookie created. Must use this format: 'number{letter}' like '2h', in the letter position you can use: 's','mi','h','d','m','y', these means: 'seconds', 'minutes', 'hours', 'days', 'months', 'years'. |
| stateSaveIdTable | data-state-save-id-table | String | '' | You must set this property if stateSave is enable to sets an unique cookie with an identifier for each table in your page or project. You must set this property because we need create cookies with an identifier. |
| rowStyle | data-row-style | Function | {} |
The row style formatter function, take two parameters: row: the row record data. index: the row index. Support classes or css. |
| rowAttributes | data-row-attributes | Function | {} |
The row attribute formatter function, take two parameters: row: the row record data. index: the row index. Support all custom attributes. |