Table options

The table options are defined in jQuery.fn.bootstrapTable.defaults.

</tr </tbody> </table>
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.
theadClasses data-thead-classes String '' 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.
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.
rememberOrder data-remember-order Boolean false Set true remember the order for each column.
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:
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 with 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 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:
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' or 'Unlimited' 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.
showFullscreen data-show-fullscreen Boolean false True to show the fullscreen 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.
detailFilter data-detail-filter Function function(index, row) {
return true;
}		 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.
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.
paginationSuccessivelySize data-pagination-successively-size Number 5 Maximum successive number of pages in a row.
paginationPagesBySide data-pagination-pages-by-side Number 1 The number of pages on each side (right, left) of the current page.
paginationUseIntermediate data-pagination-use-intermediate Boolean false Calculate and show intermediate pages for quick access
clickToSelect data-click-to-select Boolean false True to select checkbox or radiobox when clicking rows.
ignoreClickToSelectOn data-ignore-click-to-select-on Function { return $.inArray(element.tagName, ['A', 'BUTTON']); } 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.
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.
buttonsToolbar data-buttons-toolbar String | Node undefined A jQuery selector that indicates the buttons toolbar, for example:
#buttons-toolbar, .buttons-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:
  1. First tries for the locale as specified,
  2. Then tries the locale with '_' translated to '-' and the region code upper cased,
  3. Then tries the the short locale code (i.e. 'fr' instead of 'fr-CA'),
  4. 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

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

</tbody> </table>
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.
field: the row field.
Example usage:
function formatter(value, row, index, field) {
  if (value === 'foo') {
  return '' + value + '';
  }
  return value;
}
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. </tr>
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.
rowA: the first row.
rowB: the second row.
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 formatted data.
escape data-escape Boolean false Escapes a string for insertion into HTML, replacing &, <, >, ", \`, and ' characters.
showSelectTitle data-show-select-title Boolean false True to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.

Events

To use event syntax:

$('#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 newly 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.
onScrollBody scroll-body.bs.table Fires when table body scroll.

Methods

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

</tbody> </table>
Name Parameter Description Example
getOptions none Return the options object. getOptions
getSelections none Return selected rows, when no record selected, an empty array will return. getSelections
getAllSelections none Return all selected rows contain search or filter, when no record selected, an empty array will return. getAllSelections
showAllColumns none Show All the columns. showAllColumns
hideAllColumns none Hide All the columns. hidAllColumns
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. getData
getRowByUniqueId id Get data from table, the row that contains the id passed by parameter. getRowByUniqueId
load data Load the data to table, the old rows will be removed. load
append data Append the data to table. append
prepend data Prepend the data to table. prepend
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. 		remove
removeAll - Remove all data from table. removeAll
removeByUniqueId id Remove data from table, the row that contains the id passed by parameter. removeByUniqueId
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.
getHiddenRows 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.</td> </tr>
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.
updateCellById params update the cell specified by the id, each param contains following properties:
id: row id where the id should be the uniqueid field assigned to the table.
field: field name of the cell to be updated.
value: new value of the cell.

Localizations

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'
formatFullscreen - 'Fullscreen'

PS:

We can import all locale files what you need:

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

And then use JavaScript to switch locale:

$.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:

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

Or use JavaScript to set locale for table:

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