Skip to main content

Bootstrap Table

Getting started

Documentation

Examples

Extensions

Donate

FAQ

GitHub

English

Documentation

The documentation contains Table Properties, Column Properties, Events, Methods, and much more.

If you like bootstrap table:

Questions/Helps:

StackOverflow

SegmentFault

Table options Edit on GitHub

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:

undefined => btn

xs => btn-xs

sm => btn-sm

lg => btn-lg

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:

Without server-side pagination

With server-side pagination

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:

Without server-side pagination

With server-side pagination

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:

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. 'fr' 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).

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" }
};
}

Column options Edit on GitHub

The column options is defined in jQuery.fn.bootstrapTable.columnDefaults.

Name

Attribute

Type

Default

Description

radio | data-radio | Boolean | false | True to show a radio. The radio column has fixed width.
checkbox | data-checkbox | Boolean | false | True to show a checkbox. The checkbox column has fixed width.
field | data-field | String | undefined | The column field name.
title | data-title | String | undefined | The column title text.
titleTooltip | data-title-tooltip | String | undefined | The column title tooltip text. This option also support the title HTML attribute.
class | class / data-class | String | undefined | The column class name.
rowspan | rowspan / data-rowspan | Number | undefined | Indicate how many rows a cell should take up.
colspan | colspan / data-colspan | Number | undefined | Indicate how many columns a cell should take up.
align | data-align | String | undefined | Indicate how to align the column data. 'left', 'right', 'center' can be used.
halign | data-halign | String | undefined | Indicate how to align the table header. 'left', 'right', 'center' can be used.
falign | data-falign | String | undefined | Indicate how to align the table footer. 'left', 'right', 'center' can be used.
valign | data-valign | String | undefined | Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
width | data-width | Number {Pixels or Percentage} | undefined | The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this 'width' might be ignored (use min/max-width via class or such then). Also you can add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, leave as number (or add 'px') to make it use pixels.
sortable | data-sortable | Boolean | false | True to allow the column can be sorted.
order | data-order | String | 'asc' | The default sort order, can only be 'asc' or 'desc'.
visible | data-visible | Boolean | true | False to hide the columns item.
cardVisible | data-card-visible | Boolean | true | False to hide the columns item in card view state.
switchable | data-switchable | Boolean | true | False to disable the switchable of columns item.
clickToSelect | data-click-to-select | Boolean | true | True to select checkbox or radio when the column is clicked.

formatter

data-formatter

Function

undefined

The context (this) is the column Object.
The cell formatter function, take three parameters:
value: the field value.
row: the row record data.
index: the row index.

footerFormatter

data-footer-formatter

Function

undefined

The context (this) is the column Object.
The function, take one parameter:
data: Array of all the data rows.
the function should return a string with the text to show in the footer cell.

events

data-events

Object

undefined

The cell events listener when you use formatter function, take four parameters:
event: the jQuery event.
value: the field value.
row: the row record data.
index: the row index.
Example code: <th .. data-events="operateEvent"> var operateEvents = {'click .like': function (e, value, row, index) {}};

sorter

data-sorter

Function

undefined

The custom field sort function that used to do local sorting, take two parameters:
a: the first field value.
b: the second field value.

sortName | data-sort-name | String | undefined | Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of "html" such as "<b><span style="color:red">abc</span></b>", but a fieldName to sort is "content" with the value of "abc".

cellStyle

data-cell-style

Function

undefined

The cell style formatter function, take three parameters:
value: the field value.
row: the row record data.
index: the row index.
field: the row field.
Support classes or css. Example usage:

function cellStyle(value, row, index, field) {
return {
classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
};
}

searchable | data-searchable | Boolean | true | True to search data for this column.
searchFormatter | data-search-formatter | Boolean | true | True to search use formated data.
escape | data-escape | Boolean | false | Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters.

Events Edit on GitHub

To use event syntax:

Copy

$('#table').bootstrapTable({
onEventName: function (arg1, arg2, ...) {
// ...
}
});

$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {
// ...
});

Option Event

jQuery Event

Parameter

Description

onAll

all.bs.table

name, args

Fires when all events trigger, the parameters contain:
name: the event name,
args: the event data.

onClickRow

click-row.bs.table

row, $element, field

Fires when user click a row, the parameters contain:
row: the record corresponding to the clicked row,
$element: the tr element,
field: the field name corresponding to the clicked cell.

onDblClickRow

dbl-click-row.bs.table

row, $element, field

Fires when user double click a row, the parameters contain:
row: the record corresponding to the clicked row,
$element: the tr element,
field: the field name corresponding to the clicked cell.

onClickCell

click-cell.bs.table

field, value, row, $element

Fires when user click a cell, the parameters contain:
field: the field name corresponding to the clicked cell,
value: the data value corresponding to the clicked cell,
row: the record corresponding to the clicked row,
$element: the td element.

onDblClickCell

dbl-click-cell.bs.table

field, value, row, $element

Fires when user double click a cell, the parameters contain:
field: the field name corresponding to the clicked cell,
value: the data value corresponding to the clicked cell,
row: the record corresponding to the clicked row,
$element: the td element.

onSort

sort.bs.table

name, order

Fires when user sort a column, the parameters contain:
name: the sort column field name
order: the sort column order.

onCheck

check.bs.table

row, $element

Fires when user check a row, the parameters contain:
row: the record corresponding to the clicked row. $element: the DOM element checked.

onUncheck

uncheck.bs.table

row, $element

Fires when user uncheck a row, the parameters contain:
row: the record corresponding to the clicked row. $element: the DOM element unchecked.

onCheckAll

check-all.bs.table

rows

Fires when user check all rows, the parameters contain:
rows: array of records corresponding to newly checked rows.

onUncheckAll

uncheck-all.bs.table

rows

Fires when user uncheck all rows, the parameters contain:
rows: array of records corresponding to previously checked rows.

onCheckSome

check-some.bs.table

rows

Fires when user check some rows, the parameters contain:
rows: array of records corresponding to previously checked rows.

onUncheckSome

uncheck-some.bs.table

rows

Fires when user uncheck some rows, the parameters contain:
rows: array of records corresponding to previously checked rows.

onLoadSuccess | load-success.bs.table | data | Fires when remote data is loaded successfully.
onLoadError | load-error.bs.table | status, res | Fires when some errors occur to load remote data.
onColumnSwitch | column-switch.bs.table | field, checked | Fires when switch the column visible.
onColumnSearch | column-search.bs.table | field, text | Fires when search by column.
onPageChange | page-change.bs.table | number, size | Fires when change the page number or page size.
onSearch | search.bs.table | text | Fires when search the table.
onToggle | toggle.bs.table | cardView | Fires when toggle the view of table.
onPreBody | pre-body.bs.table | data | Fires before the table body is rendered
onPostBody | post-body.bs.table | data | Fires after the table body is rendered and available in the DOM
onPostHeader | post-header.bs.table | none | Fires after the table header is rendered and availble in the DOM
onExpandRow | expand-row.bs.table | index, row, $detail | Fires when click the detail icon to expand the detail view.
onCollapseRow | collapse-row.bs.table | index, row | Fires when click the detail icon to collapse the detail view.
onRefreshOptions | refresh-options.bs.table | options | Fires after refresh the options and before destroy and init the table
onResetView | reset-view.bs.table | | Fires when reset view of the table.
onRefresh | refresh.bs.table | params | Fires after the click the refresh button.

Methods Edit on GitHub

The calling method syntax: $('#table').bootstrapTable('method', parameter);.

Name

Parameter

Description

Example

getOptions | none | Return the options object. |
getSelections | none | Return selected rows, when no record selected, an empty array will return. |
getAllSelections | none | Return all selected rows contain search or filter, when no record selected, an empty array will return. |
showAllColumns | none | Show All the columns. |
hideAllColumns | none | Hide All the columns. |
getData | useCurrentPage | Get the loaded data of table at the moment that this method is called. If you set the useCurrentPage to true the method will return the data in the current page. |
getRowByUniqueId | id | Get data from table, the row that contains the id passed by parameter. |
load | data | Load the data to table, the old rows will be removed. |
append | data | Append the data to table. |
prepend | data | Prepend the data to table. |

remove

params

Remove data from table, the params contains two properties:
field: the field name of remove rows.
values: the array of values for rows which should be removed.

removeAll | - | Remove all data from table. |
removeByUniqueId | id | Remove data from table, the row that contains the id passed by parameter. |

insertRow

params

Insert a new row, the param contains following properties:
index: the row index to insert into.
row: the row data.

updateRow

params

Update the specified row(s), each param contains following properties:
index: the row index to be updated.
row: the new row data.

updateByUniqueId

params

Update the specified row(s), each param contains following properties:
id: a row id where the id should be the uniqueid field assigned to the table.
row: the new row data.

showRow | params | Show the specified row. The param must contain at least one of the following properties: index: the row index. uniqueId: the value of the uniqueId for that row.
hideRow | params | Hide the specified row. The param must contain at least one of the following properties: index: the row index. uniqueId: the value of the uniqueId for that row.
getRowsHidden | boolean | Get all rows hidden and if you pass the show parameter true the rows will be shown again, otherwise, the method only will return the rows hidden.

mergeCells

options

Merge some cells to one cell, the options contains following properties:
index: the row index.
field: the field name.
rowspan: the rowspan count to be merged.
colspan: the colspan count to be merged.

updateCell

params

Update one cell, the params contains following properties:
index: the row index.
field: the field name.
value: the new field value.
To disable table re-initialization you can set {reinit: false}

refresh | params | Refresh the remote server data, you can set {silent: true} to refresh the data silently, and set {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} to change the url (optional), page number (optional) and page size (optional). To supply query params specific to this request, set {query: {foo: 'bar'}}.
refreshOptions | options | Refresh the options
resetSearch | text | Set the search text
showLoading | none | Show loading status.
hideLoading | none | Hide loading status.
checkAll | none | Check all current page rows.
uncheckAll | none | Uncheck all current page rows.
checkInvert | none | Invert check of current page rows. Triggers onCheckSome and onUncheckSome events.
check | index | Check a row, the row index start with 0.
uncheck | index | Uncheck a row, the row index start with 0.

checkBy

params

Check a row by array of values, the params contains:
field: name of the field used to find records
values: array of values for rows to check
Example:
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})

uncheckBy

params

Uncheck a row by array of values, the params contains:
field: name of the field used to find records
values: array of values for rows to uncheck
Example:
$("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})

resetView | params | Reset the bootstrap table view, for example reset the table height.
resetWidth | none | Resizes header and footer to fit current columns width
destroy | none | Destroy the bootstrap table.
showColumn | field | Show the specified column.
hideColumn | field | Hide the specified column.
getHiddenColumns | - | Get hidden columns.
getVisibleColumns | - | Get visible columns.
scrollTo | value | Scroll to the number value position, the unit is 'px', set 'bottom' means scroll to the bottom.
getScrollPosition | none | Get the current scroll position, the unit is 'px'.
filterBy | params | (Can use only in client-side) Filter data in table, e.g. you can filter {age: 10} to show the data only age is equal to 10. You can also filter with an array of values, as in: {age: 10, hairColor: ["blue", "red", "green"]} to find data where age is equal to 10 and hairColor is either blue, red, or green.
selectPage | page | Go to the a specified page.
prevPage | none | Go to previous page.
nextPage | none | Go to next page.
togglePagination | none | Toggle the pagination option.
toggleView | none | Toggle the card/table view.
expandRow | index | Expand the row that has the index passed by parameter if the detail view option is set to True.
collapseRow | index | Collapse the row that has the index passed by parameter if the detail view option is set to True.
expandAllRows | is subtable | Expand all rows if the detail view option is set to True.
collapseAllRows | is subtable | Collapse all rows if the detail view option is set to True.

Localizations Edit on GitHub

Name

Parameter

Default

formatLoadingMessage | - | 'Loading, please wait…'
formatRecordsPerPage | pageNumber | '%s records per page'
formatShowingRows | pageFrom, pageTo, totalRows | 'Showing %s to %s of %s rows'
formatDetailPagination | totalRows | 'Showing %s rows'
formatSearch | - | 'Search'
formatNoMatches | - | 'No matching records found'
formatRefresh | - | 'Refresh'
formatToggle | - | 'Toggle'
formatColumns | - | 'Columns'
formatAllRows | - | 'All'

PS:

We can import all locale files what you need:

Copy

<script src="bootstrap-table-en-US.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
...

And then use JavaScript to switch locale:

Copy

$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']);
// $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
// ...

Or use data attributes to set locale for table:

Copy

<table data-toggle="table" data-locale="en-US">
</table>

Or use JavaScript to set locale for table:

Copy

$('table').bootstrapTable({locale:'en-US'});

Table options

Column options

Events

Methods

Localizations

Back to top

If you like bootstrap table:

Questions/Helps:

StackOverflow

SegmentFault

Designed and built with all the love in the world by @wenzhixin.

Maintained by @wenzhixin with the help of our contributors.

Code licensed under MIT, documentation under CC BY 3.0.

Currently v1.11.1

·

GitHub

·

My website

·

My repos

·

Questions / Helps

·

Issues

·

Releases

·

Email