表格参数
表格的参数定义在 jQuery.fn.bootstrapTable.defaults。
名称
-classessortClassheightundefinedTextstripedsortNamesortOrdersortStable
iconsPrefix
iconscolumnsdataajaxmethodurlcachecontentTypedataTypeajaxOptions
queryParams
标签类型
默认
描述
data-toggleString
'table'
不⽤写 JavaScript 直接启⽤表格。
data-String表格的类名称。默认情况下，表格是有边框的，你可以添加 'table-no-classes'table table-hover'bordered' 来删除表格的边框样式。data-sort-class
String
undefined
被排序的td元素的类名。data-heightNumberundefined定义表格的⾼度。
data-undefined-String'-'
当数据为 undefined 时显⽰的字符。textdata-stripedBooleanfalse设置为 true 会有隔⾏变⾊效果。
data-sort-nameStringundefined定义排序列，通过url⽅式获取数据填写字段名，否则填写下标。data-sort-orderString
'asc'
定义排序⽅式，'asc' 或者 'desc'。
data-sort-stable
Booleanfalse
设置为 true 将获得稳定的排序，我们会添加\\_position属性到 row 数据中。定义字体库 ('Glyphicon' or 'fa' for FontAwesome)，使⽤\"fa\"时需引⽤data-icons-FontAwesome，并且配合 icons 属性实现效果。prefix
String
'glyphicon'
Glyphicon 集成于Bootstrap可免费使⽤，参考： FontAwesome 参考：
{
paginationSwitchDown:'glyphicon-collapse-down icon-chevron-down',
paginationSwitchUp:'glyphicon-collapse-upicon-chevron-up', refresh: 'glyphicon-data-iconsObject
refresh icon-refresh'⾃定义图标 toggle: 'glyphicon-list-alt icon-list-alt'
columns: 'glyphicon-thicon-th'
detailOpen: 'glyphicon-plus icon-plus'
detailClose: 'glyphicon-minus icon-minus'}-Array[]列配置项，详情请查看 列参数 表格.-Array
[]
加载json格式的数据。
data-ajaxFunctionundefined⾃定义 AJAX ⽅法，须实现 jQuery AJAX API。data-methodString'get'服务器数据的请求⽅式 'get' 或 'post'。data-urlString
undefined
服务器数据的加载地址。
data-cacheBooleantrue
设置为 false 禁⽤ AJAX 数据缓存。data-content-String
'application/json'发送到服务器的数据编码类型。type
data-data-type
String
'json'服务器返回的数据类型。
data-ajax-optionsObject
{}
提交ajax请求时的附加参数，可⽤参数列请查看.
请求服务器数据时，你可以通过重写参数的⽅式添加⼀些额外的参数，例如data-function(params) {
toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含query-Functionreturn params;
limit, offset, search, sort, order 否则, 需要包含:
params
}
pageSize, pageNumber, searchText, sortName, sortOrder.
名称
params标签类型
}
默认
data-queryParamsTypequery-params-String'limit'
type
data-function(res) {
responseHandlerresponse-Functionreturn res;handler}paginationdata-pagination
Booleanfalsedata-paginationLoop
pagination-Booleantrueloop
data-only-onlyInfoPaginationinfo-Booleanfalse
paginationsidePaginationdata-side-pagination
String
'client'
pageNumberdata-page-number
Number1
pageSizedata-page-size
Number10
pageListdata-page-list
Array
[10, 25, 50, 100, All]data-selectItemNameselect-String
'btSelectItem'
item-name
smartDisplaydata-smart-displayBooleantrue
escapedata-escapeBooleanfalsesearch
data-search
Booleanfalse
data-searchOnEnterKeysearch-on-Booleanfalseenter-key
strictSearchdata-strict-search
Booleanfalse
searchTextdata-search-textString
''
data-searchTimeOutsearch-Number500
time-out
trimOnSearchdata-trim-on-search
Booleantrue
showHeaderdata-show-header
Booleantrue
showFooterdata-show-footer
Booleanfalse
showColumnsdata-show-columns
Booleanfalse
showRefreshdata-show-refresh
Booleanfalse
showToggle
data-show-toggle
Booleanfalse
data-show-showPaginationSwitchpagination-Booleanfalse
switchshowFullscreen
data-show-fullscreen
Booleanfalse
data-minimumCountColumnsminimum-count-Number1
columnsidFielddata-id-fieldStringundefineduniqueId
data-String
undefined
pageSize, pageNumber, searchText, sortName, sortOrder. 返回false将会终⽌请求。
描述
设置为 'limit' 则会发送符合 RESTFul 格式的参数。
加载服务器数据之前的处理程序，可以⽤来格式化数据。参数：res为从服务器请求到的数据。设置为 true 会在表格底部显⽰分页条。设置为 true 启⽤分页条⽆限循环的功能。
设置为 true 只显⽰总数据数，⽽不显⽰分页按钮。需要设置pagination='true'。
设置在哪⾥进⾏分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax⽅法。如果设置了分页，⾸页页码。如果设置了分页，页⾯数据条数。
如果设置了分页，设置可供选择的页⾯数据条数。设置为 All 或者Unlimited，则显⽰所有记录。
radio 或者 checkbox 的字段 name 名。
设置为 true 是程序⾃动判断显⽰分页信息和 card 视图。转义HTML字符串，替换 &, <, >, \", \\`, 和 ' 字符。是否启⽤搜索框。
设置为 true时，按回车触发搜索⽅法，否则⾃动触发搜索⽅法。设置为 true启⽤全匹配搜索，否则为模糊搜索。初始化搜索⽂字。设置搜索超时时间。
设置为 true 将⾃动去掉搜索字符的前后空格。是否显⽰列头。是否显⽰列脚。
是否显⽰内容列下拉框。是否显⽰刷新按钮。
是否显⽰切换视图（table/card）按钮。是否显⽰切换分页按钮。是否显⽰全屏按钮。
最⼩隐藏列的数量。
指定主键列。
对每⼀⾏指定唯⼀标识符。
uniqueIddata-名称
unique-id
标签String
类型
undefined
默认
cardView
data-card-view
Booleanfalse
detailViewdata-detail-view
Booleanfalse
detailFormatter
data-detail-function(index, row) {
formatter
Functionreturn '';
}data-searchAlignsearch-String
'right'
aligndata-buttonsAlignbuttons-String'right'aligndata-toolbarAligntoolbar-String'left'align
data-paginationVAlign
pagination-String'bottom'v-align
data-paginationHAlignpagination-String'right'h-align
data-paginationDetailHAlignpagination-detail-h-String
'left'aligndata-paginationPreText
pagination-String'<'pre-text
data-paginationNextTextpagination-String'>'next-text
clickToSelect
data-click-to-select
Booleanfalse
data-ignoreClickToSelectOnignore-Function{ return
click-to-$.inArray(element.tagName,
select-on['A', 'BUTTON']); }
data-singleSelectsingle-Booleanfalseselecttoolbardata-toolbarString
undefined
data-buttonsToolbar
buttons-String |
toolbar
Node
undefined
data-checkboxHeader
checkbox-Booleantrueheaderdata-maintainSelectedmaintain-Booleanfalseselectedsortabledata-sortable
Booleantrue
silentSort
data-silent-sortBooleantrue
rowStyle
data-row-function(row,index) {
style
Functionreturn class;
}function(row,index) {
rowAttributes
data-row-attributes
Functionreturn attributes;
}
data-
对每⼀⾏指定唯⼀标识符。
描述
设置为 true将显⽰card视图，适⽤于移动设备。否则为table试图，适⽤于pc端。
设置为 true 可以显⽰详细页⾯模式。格式化详细页⾯模式的视图。
指定 搜索框 ⽔平⽅向的位置。'left' 或 'right'。
指定 按钮栏 ⽔平⽅向的位置。'left' 或 'right'。
指定 toolbar ⽔平⽅向的位置。'left' 或 'right'。
指定 分页条 在垂直⽅向的位置。'top'，'bottom' 或 'both'。
指定 分页条 在⽔平⽅向的位置。'left' 或 'right'。
指定 分页详细信息 在⽔平⽅向的位置。'left' 或 'right'。
指定分页条中上⼀页按钮的图标或⽂字。
指定分页条中下⼀页按钮的图标或⽂字。
设置 true 将在点击⾏时，⾃动选择 rediobox 和 checkbox。
包含⼀个参数：
element: 点击的元素。
返回 true 是点击事件会被忽略，返回 false 将会⾃动选中。该选项只有在clickToSelect 为 true 时才⽣效。设置 true 将禁⽌多选。
⼀个jQuery 选择器，指明⾃定义的 toolbar。例如:#toolbar, .toolbar.
⼀个jQuery 选择器，指明⾃定义的 buttons toolbar。例如: #buttons-toolbar, .buttons-toolbar 或 DOM 节点。设置 false 将在列头隐藏全选复选框。
设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项。设置为false 将禁⽌所有列的排序。
设置为 false 将在点击分页按钮时，⾃动记住排序项。仅在 sidePagination设置为 server时⽣效。⾃定义⾏样式 参数为：row: ⾏数据index: ⾏下标
返回值可以为class或者css
⾃定义⾏属性 参数为：row: ⾏数据index: ⾏下标
返回值可以为class或者css ⽀持所有⾃定义属性
⾃定义搜索⽅法来替代内置的搜索功能，它包含⼀个参数： text：搜索⽂字。⽤法⽰例：
名称customSearch
data-标签custom-search
类型$.noopFunction
默认
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
⾃定义排序⽅法来替代内置的搜索功能，它包含⼀个参数：sortName: 排序名。sortOrder: 排序顺序。⽤法⽰例：
function customSort(sortName, sortOrder) { //Sort logic here.
//You must use `this.data` array in order to sort the data. NO use `this.options.data`. }
列参数
The column options is defined in jQuery.fn.bootstrapTable.columnDefaults.
NameradiocheckboxfieldtitletitleTooltipclass
Attribute
Type
Defaultfalsefalse
Description
True to show a radio. The radio column has fixed width.True to show a checkbox. The checkbox column has fixed width.
data-radioBooleandata-Boolean
checkboxdata-fielddata-titledata-title-tooltip
StringStringString
undefinedThe column field name.undefinedThe column title text.
undefinedThe column title tooltip text. This option also support the title HTML attributeundefinedThe column class name.
class /Stringdata-class
rowspan /data-Number
rowspancolspan /data-colspandata-halign
Number
rowspanundefinedIndicate how many rows a cell should take up.
colspanalignhalignfalignvalignwidthsortableordervisiblecardVisibleswitchableclickToSelect
undefinedIndicate how many columns a cell should take up.
undefinedIndicate how to align the column data. 'left', 'right', 'center' can be used.undefinedIndicate how to align the table header. 'left', 'right', 'center' can be used.undefinedIndicate how to align the table footer. 'left', 'right', 'center' can be used.undefinedIndicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
data-alignString
String
data-falignStringdata-valignString
NumberThe width of column. If not defined, the width will auto expand to fit its contents. Also you can
data-width{Pixels orundefinedadd '%' to your number and the bootstrapTable will use the percentage unit, otherwise, you can
Percentage}add or no the 'px' to your number and then the bootstrapTable will use the pixelsdata-sortabledata-visible
Boolean
false'asc'truetruetruetrue
True to allow the column can be sorted.
The default sort order, can only be 'asc' or 'desc'.False to hide the columns item.
False to hide the columns item in card view state.False to disable the switchable of columns item.
True to select checkbox or radiobox when the column is clicked.
data-orderString
Boolean
data-card-Boolean
visible
data-Boolean
switchable
data-click-Boolean
to-selectdata-formatter
formatterFunction
The context (this) is the column Object.
The cell formatter function, take three parameters:
undefinedvalue: the field value.
row: the row record data.index: the row index.
The context (this) is the column Object. The function, take one parameter:
undefined
data: Array of all the data rows.
the function should return a string with the text to show in the footer cell.The cell events listener when you use formatter function, take three parameters: event: the jQuery event.
undefinedvalue: the field value.
row: the row record data.
data-footerFormatterfooter-formatter
Function
events
data-events
Object
NameAttributeType
sorterdata-sorterFunction
Defaultindex: the row index.Description
The custom field sort function that used to do local sorting, take two parameters: a: the first field value.
undefinedb: the second field value.
rowA: the first row.rowB: the second row.
Provide a customizable sort-name, not the default sort-name in the header, or the field name of
undefinedthe column. For example, a column might display the value of fieldName of \"html\" such as \"
abc\The cell style formatter function, take three parameters: value: the field value.row: the row record data.
undefined
index: the row index.field: the row field.
Support classes or css.truetrue
True to search data for this column.
sortName
data-sort-String
name
cellStyle
data-cell-style
Function
searchable
data-Boolean
searchable
Boolean
data-searchFormattersearch-formatterescapeshowSelectTitle
data-escape
True to search use formated data.
Booleanfalsefalse
Escapes a string for insertion into HTML, replacing &, <, >, \True to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.
data-show-Boolean
select-title
事件
Option 事件onAll
jQuery 事件all.bs.table
参数
name, args
描述
所有的事件都会触发该事件，参数包括：name：事件名，args：事件的参数。
当⽤户点击某⼀⾏的时候触发，参数包括：row：点击⾏的数据，$element：tr 元素，
field：点击列的 field 名称。
当⽤户双击某⼀⾏的时候触发，参数包括：row：点击⾏的数据，$element：tr 元素，
field：点击列的 field 名称。
onClickRowclick-row.bs.tablerow, $element
onDblClickRowdbl-click-row.bs.tablerow, $element
onClickCellclick-cell.bs.table
当⽤户点击某⼀列的时候触发，参数包括：field：点击列的 field 名称，
field, value, row, $elementvalue：点击列的 value 值，
row：点击列的整⾏数据，$element：td 元素。当⽤户双击某⼀列的时候触发，参数包括：field：点击列的 field 名称，
field, value, row, $elementvalue：点击列的 value 值，
row：点击列的整⾏数据，$element：td 元素。name, order
当⽤户对某列进⾏排序时触发，参数包括：name：排序列的 filed 名称，order：排序顺序。
当⽤户选择某⼀⾏时触发，参数包含： row：与点击⾏对应的记录， $element：选择的DOM元素。当⽤户反选某⼀⾏时触发，参数包含：row：与点击⾏对应的记录，
$element：选择的DOM元素。当⽤户全选所有的⾏时触发，参数包含：rows：最新选择的所有⾏的数组。当⽤户反选所有的⾏时触发，参数包含：rows：最新选择的所有⾏的数组。当⽤户选择某些⾏时触发，参数包含：rows：相对于之前选择的⾏的数组。当⽤户反选某些⾏时触发，参数包含：rows：相对于之前选择的⾏的数组。
onDblClickCelldbl-click-cell.bs.table
onSortsort.bs.table
onCheckcheck.bs.tablerow
onUncheckonCheckAllonUncheckAllonCheckSome
uncheck.bs.tablecheck-all.bs.tableuncheck-all.bs.tablecheck-some.bs.table
rowrowsrowsrows
onUncheckSomeuncheck-some.bs.tablerows
onLoadSuccessOption 事件onLoadErrorload-success.bs.tablejQuery 事件load-error.bs.tabledata
status
参数
远程数据加载成功时触发成功。描述远程数据加载失败时触发成功。当切换列的时候触发。当搜索列时触发。
当页⾯更改页码或页⾯⼤⼩时触发。当搜索表格时触发。切换表格视图时触发。在表格 body 渲染之前触发。在表格 body 渲染完成后触发。在表格 header 渲染完成后触发。
当点击详细图标展开详细页⾯的时候触发。当点击详细图⽚收起详细页⾯的时候触发。刷新选项之后并在销毁和初始化表之前触发。点击刷新按钮后触发。表格 body 滚动时触发。
onColumnSwitchcolumn-switch.bs.tablefield, checkedonColumnSearchcolumn-search.bs.tablefield, textonPageChangeonSearchonToggleonPreBodyonPostBodyonPostHeaderonExpandRowonCollapseRowonRefreshonScrollBody
page-change.bs.tablesearch.bs.tabletoggle.bs.tablepre-body.bs.tablepost-body.bs.tablepost-header.bs.tableexpand-row.bs.tablecollapse-row.bs.tablerefresh.bs.tablescroll-body.bs.table
number, sizetextcardViewdatanonenone
index, row, $detailindex, rowparams
onRefreshOptionsrefresh-options.bs.tableoptions
⽅法
使⽤⽅法的语法：$('#table').bootstrapTable('method', parameter);。
名称
getOptionsgetSelectionsgetAllSelectionsgetDataload
showAllColumnshideAllColumnsappendprependremoveremoveAll
nonenonenone
参数
返回表格的 Options。
返回所选的⾏，当没有选择任何⾏的时候返回⼀个空数组。
返回所有选择的⾏，包括搜索过滤前的，当没有选择任何⾏的时候返回⼀个空数组。根据 uniqueId 获取⾏数据。
加载数据到表格中，旧数据会被替换。显⽰所有列。隐藏所有列。
添加数据到表格在现有数据之后。插⼊数据到表格在现有数据之前。
从表格中删除数据，包括两个参数： field: 需要删除的⾏的 field 名称，
values: 需要删除的⾏的值，类型为数组。删除表格所有数据。
根据 uniqueId 删除指定的⾏。插⼊新⾏，参数包括：
index: 要插⼊的⾏的 index，row: ⾏的数据，Object 对象。更新指定的⾏，参数包括：index: 要更新的⾏的 index，row: ⾏的数据，Object 对象。
显⽰指定的⾏，参数包括：
index: 要更新的⾏的 index 或者 uniqueId，isIdField: 指定 index 是否为 uniqueid。显⽰指定的⾏，参数包括：index: 要更新的⾏的 index，
uniqueId: 或者要更新的⾏的 uniqueid。
获取所有隐藏的⾏，如果show参数为true，⾏将再次显⽰，否则，只返回隐藏的⾏。将某些单元格合并到⼀个单元格，选项包含以下属性： index: ⾏索引，field: 字段名称，
rowspan: 要合并的rowspan数量，colspan: 要合并的colspan数量。更新⼀个单元格，params包含以下属性：index: ⾏索引。field: 字段名称。value: 新字段值。
刷新远程服务器数据，可以设置{silent: true}以静默⽅式刷新数据，并设置{url: newUrl}更改URL。 要提供特定于此请求的查询参数，请设置{query: {foo: 'bar'}}。刷新选项。设置搜索⽂本。显⽰加载状态。隐藏加载状态。选中当前页⾯所有⾏。
描述
例⼦
getOptionsgetSelectionsgetAllSelectionsgetData
getRowByUniqueIdload
showAllColumnshidAllColumnsappendprependremoveremoveAll
removeByUniqueIdinsertRow
useCurrentPage或者当前加载的数据。假如设置 useCurrentPage 为 true，则返回当前页的数据。datanonenonedatadataparams-
getRowByUniqueIdid
removeByUniqueIdidinsertRow
params
updateRowparamsupdateRowshowRow-hideRowshowRow-hideRow
showRowparams
hideRowgetHiddenRows
paramsshow
mergeCellsoptions
updateCellparams
refreshrefreshOptionsresetSearchshowLoadinghideLoadingcheckAll
paramsoptionstextnonenonenone
名称uncheckAllcheckuncheck
none参数indexindex
取消选中当前页⾯所有⾏。选中某⼀⾏，⾏索引从0开始。取消选中某⼀⾏，⾏索引从0开始。
描述例⼦
checkByparams
按值或数组选中某⾏，参数包含：
field: ⽤于查找记录的字段的名称，values: 要检查的⾏的值数组。例⼦:
$(\"#table\").bootstrapTable(\"checkBy\[\"value1\
按值数组取消选中某⾏，参数包含：field: ⽤于查找记录的字段的名称，values: 要检查的⾏的值数组。例⼦:
$(\"#table\").bootstrapTable(\"uncheckBy\[\"value1\重置引导表视图，例如重置表⾼度。调整页眉和页脚的⼤⼩以适合当前列宽度。销毁表。显⽰指定的列。隐藏指定的列。获取隐藏的列。获取可见列。
滚动到指定位置，单位为 px，设置 'bottom' 表⽰跳到最后。获取当前滚动条的位置，单位为 px。
（只能⽤于 client 端）过滤表格数据， 你可以通过过滤{age: 10}来显⽰ age 等于 10 的数据。
跳到指定的页。跳到上⼀页。跳到下⼀页。切换分页选项。切换 card/table 视图
如果详细视图选项设置为True，可展开索引为 index 的⾏。如果详细视图选项设置为True，可收起索引为 index 的⾏。.如果详细视图选项设置为True，可展开所有⾏。如果详细视图选项设置为True，可收起开所有⾏。
uncheckByparams
resetViewresetWidthdestroyshowColumnhideColumn
paramsnonenonefieldfield
getHiddenColumns-getVisibleColumns-scrollTo
getScrollPositionfilterByselectPageprevPagenextPagetogglePaginationtoggleViewexpandRowcollapseRowexpandAllRowscollapseAllRows
valuenoneparamspagenonenonenonenoneindexindexnonenone
多语⾔
Name
formatLoadingMessage-formatRecordsPerPagepageNumberformatShowingRowsformatSearchformatNoMatchesformatRefreshformatToggleformatColumnsformatAllRowsformatFullscreenPS:
We can import what you need:
...
ParameterDefault
'Loading, please wait…''%s records per page''Showing %s rows''Search'
'No matching records found''Refresh''Toggle''Columns''All''Fullscreen'
pageFrom, pageTo, totalRows'Showing %s to %s of %s rows'-------
formatDetailPaginationtotalRows
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']);// ...
因篇幅问题不能全部显示，请点此查看更多更全内容