表格參數：

名稱標簽類型默認描述

-	data-toggle	String	‘table’	不用寫 JavaScript 直接啟用表格。
classes	data-classes	String	‘table table-hover’	表格的類名稱。默認情況下，表格是有邊框的，你可以添加 ‘table-no-bordered’ 來刪除表格的邊框樣式。
sortClass	data-sort-class	String	undefined	被排序的td標簽的class名
height	data-height	Number	undefined	定義表格的高度。
undefinedText	data-undefined-text	String	‘-‘	當數據為 undefined 時顯示的字符
striped	data-striped	Boolean	false	設置為?true?會有隔行變色效果
sortName	data-sort-name	String	undefined	定義排序列,通過url方式獲取數據填寫字段名，否則填寫下標
sortOrder	data-sort-order	String	‘asc’	定義排序方式 ‘asc’ 或者 ‘desc’
sortStable	data-sort-stable	Boolean	false	設置為?true?將獲得穩定的排序，我們會添加_position屬性到 row 數據中。
iconsPrefix	data-icons-prefix	String	‘glyphicon’	定義字體庫 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用”fa”時需引用 FontAwesome，并且配合 icons 屬性實現效果 Glyphicon 集成于Bootstrap可免費使用 參考：http://glyphicons.com/ FontAwesome 參考：http://fortawesome.github.io/
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’ }	自定義圖標
columns	-	Array	[]	列配置項,詳情請查看 列參數 表格.
data	-	Array	[]	加載json格式的數據
ajax	data-ajax	Function	undefined	自定義 AJAX 方法,須實現 jQuery AJAX API
method	data-method	String	‘get’	服務器數據的請求方式 ‘get’ or ‘post’
url	data-url	String	undefined	服務器數據的加載地址
cache	data-cache	Boolean	true	設置為?true?禁用 AJAX 數據緩存
contentType	data-content-type	String	‘application/json’	發送到服務器的數據編碼類型
dataType	data-data-type	String	‘json’	服務器返回的數據類型
ajaxOptions	data-ajax-options	Object	{}	提交ajax請求時的附加參數，可用參數列請查看http://api.jquery.com/jQuery.ajax.
queryParams	data-query-params	Function	function(params) { return params; }	請求服務器數據時，你可以通過重寫參數的方式添加一些額外的參數，例如 toolbar 中的參數 如果 queryParamsType = ‘limit’ ,返回參數必須包含 limit, offset, search, sort, order 否則, 需要包含:? pageSize, pageNumber, searchText, sortName, sortOrder.? 返回false將會終止請求
queryParamsType	data-query-params-type	String	‘limit’	設置為 ‘limit’ 則會發送符合 RESTFul 格式的參數.
responseHandler	data-response-handler	Function	function(res) { return res; }	加載服務器數據之前的處理程序，可以用來格式化數據。 參數：res為從服務器請求到的數據。
pagination	data-pagination	Boolean	false	設置為?true?會在表格底部顯示分頁條
paginationLoop	data-pagination-loop	Boolean	true	設置為?true?啟用分頁條無限循環的功能。
onlyInfoPagination	data-only-info-pagination	Boolean	false	設置為?true?只顯示總數據數，而不顯示分頁按鈕。需要 pagination=’True’
sidePagination	data-side-pagination	String	‘client’	設置在哪里進行分頁，可選值為 ‘client’ 或者 ‘server’。設置 ‘server’時，必須設置 服務器數據地址（url）或者重寫ajax方法
pageNumber	data-page-number	Number	1	如果設置了分頁，首頁頁碼
pageSize	data-page-size	Number	10	如果設置了分頁，頁面數據條數
pageList	data-page-list	Array	[10, 25, 50, 100, All]	如果設置了分頁，設置可供選擇的頁面數據條數。設置為All 則顯示所有記錄。
selectItemName	data-select-item-name	String	‘btSelectItem’	radio or checkbox 的字段名
smartDisplay	data-smart-display	Boolean	true	設置為?true可以在分頁和卡片視圖快速切換
escape	data-escape	Boolean	false	轉義HTML字符串，替換?&,?<,?>,?",?`, 和?'字符.
search	data-search	Boolean	false	是否啟用搜索框
searchOnEnterKey	data-search-on-enter-key	Boolean	false	設置為?true時，按回車觸發搜索方法，否則自動觸發搜索方法
strictSearch	data-strict-search	Boolean	false	設置為?true啟用 全匹配搜索，否則為模糊搜索
searchText	data-search-text	String	”	初始化搜索文字
searchTimeOut	data-search-time-out	Number	500	設置搜索超時時間
trimOnSearch	data-trim-on-search	Boolean	true	設置為?true?將允許空字符搜索
showHeader	data-show-header	Boolean	true	是否顯示列頭
showFooter	data-show-footer	Boolean	false	是否顯示列腳
showColumns	data-show-columns	Boolean	false	是否顯示 內容列下拉框
showRefresh	data-show-refresh	Boolean	false	是否顯示 刷新按鈕
showToggle	data-show-toggle	Boolean	false	是否顯示 切換試圖（table/card）按鈕
showPaginationSwitch	data-show-pagination-switch	Boolean	false	是否顯示 數據條數選擇框
minimumCountColumns	data-minimum-count-columns	Number	1	當列數小于此值時，將隱藏內容列下拉框。
idField	data-id-field	String	undefined	指定主鍵列
uniqueId	data-unique-id	String	undefined	為每一行指定唯一的標識符
cardView	data-card-view	Boolean	false	設置為?true將顯示card視圖，適用于移動設備。否則為table試圖，適用于pc
detailView	data-detail-view	Boolean	false	設置為?true?可以顯示詳細頁面模式。
detailFormatter	data-detail-formatter	Function	function(index, row) { return ”; }	格式化詳細頁面模式的視圖。
searchAlign	data-search-align	String	‘right’	指定 搜索框 水平方向的位置。’left’ or ‘right’
buttonsAlign	data-buttons-align	String	‘right’	指定 按鈕 水平方向的位置。’left’ or ‘right’
toolbarAlign	data-toolbar-align	String	‘left’	指定 toolbar 水平方向的位置。’left’ or ‘right’
paginationVAlign	data-pagination-v-align	String	‘bottom’	指定 分頁條 在垂直方向的位置。’top’ or ‘bottom’ or ‘bonth’
paginationHAlign	data-pagination-h-align	String	‘right’	指定 分頁條 在水平方向的位置。’left’ or ‘right’
paginationDetailHAlign	data-pagination-detail-h-align	String	‘left’	指定 分頁詳細信息 在水平方向的位置。’left’ or ‘right’
paginationPreText	data-pagination-pre-text	String	‘<’	指定分頁條中上一頁按鈕的圖標或文字
paginationNextText	data-pagination-next-text	String	‘>’	指定分頁條中下一頁按鈕的圖標或文字
clickToSelect	data-click-to-select	Boolean	false	設置true 將在點擊行時，自動選擇rediobox 和 checkbox
singleSelect	data-single-select	Boolean	false	設置True 將禁止多選
toolbar	data-toolbar	String	undefined	一個jQuery 選擇器，指明自定義的toolbar 例如: #toolbar, .toolbar.
checkboxHeader	data-checkbox-header	Boolean	true	設置false 將在列頭隱藏check-all checkbox .
maintainSelected	data-maintain-selected	Boolean	false	設置為?true?在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項
sortable	data-sortable	Boolean	true	設置為false?將禁止所有列的排序
silentSort	data-silent-sort	Boolean	true	設置為?false?將在點擊分頁按鈕時，自動記住排序項。僅在 sidePagination設置為?server時生效.
rowStyle	data-row-style	Function	function(row,index) { return class; }	自定義行樣式 參數為： row: 行數據 index: 行下標 返回值可以為class或者css
rowAttributes	data-row-attributes	Function	function(row,index) { return attributes; }	自定義行屬性 參數為： row: 行數據 index: 行下標 返回值可以為class或者css 支持所有自定義屬性
customSearch	data-custom-search	Function	$.noop	執行自定義搜索功能而不是內置搜索功能，需要一個參數： text: 搜索文本 如： 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`.}

列參數：

名稱標簽類型默認描述

radio	data-radio	Boolean	false	是否顯示單選radio
checkbox	data-checkbox	Boolean	false	是否顯示多選checkbox
field	data-field	String	undefined	該列映射的data的參數名
title	data-title	String	undefined	該列的表頭名
titleTooltip	data-title-tooltip	String	undefined	該列表頭的title提示文本
class	class / data-class	String	undefined	該列的class
rowspan	rowspan / data-rowspan	Number	undefined	合并單元格時定義合并多少行
colspan	colspan / data-colspan	Number	undefined	合并單元格時定義合并多少列
align	data-align	String	undefined	設置該列數據如何對齊，’left’, ‘right’, ‘center’
halign	data-halign	String	undefined	table header對齊方式， ‘left’, ‘right’, ‘center’
falign	data-falign	String	undefined	table footer對齊方式， ‘left’, ‘right’, ‘center’
valign	data-valign	String	undefined	單元格（cell）對齊方式. ‘top’, ‘middle’, ‘bottom’
width	data-width	Number {Pixels or Percentage}	undefined	列的寬度，可以使用像素或者百分比，不帶單位則默認為px
sortable	data-sortable	Boolean	false	該列是否排序（表頭顯示雙箭頭）
order	data-order	String	‘asc’	該列默認的排序方式， ‘asc’ or ‘desc’.
visible	data-visible	Boolean	true	該列是否可見
cardVisible	data-card-visible	Boolean	true	在card視圖里是否可見
switchable	data-switchable	Boolean	true	列切換是否可見.
clickToSelect	data-click-to-select	Boolean	true	是否選中checkbox或者radio，當該列被選擇時
formatter	data-formatter	Function	undefined	格式化單元格內容，function(value, row, index), value：該cell本來的值，row：該行數據，index：該行序號（從0開始）
footerFormatter	data-footer-formatter	Function	undefined	格式化footer內容，function(rows)，rows：所有行數據
events	data-events	Object	undefined	The cell 的事件監聽，當你使用formatter function的時候,有三個參數: event: the jQuery event. value: 該cell的值 row: 該行的數據 index: 該行的序號
sorter	data-sorter	Function	undefined	自定義字段排序函數，function(a, b)
sortName	data-sort-name	String	undefined	當列中有html等標簽時，只排序實際內容（忽略標簽和樣式），例如字段為：”abc“，則sortName=abc
cellStyle	data-cell-style	Function	undefined	單元格樣式，支持css和classes，function(value, row, index) value: 該cell的值 row: 該行的數據 index: 該行的序號
searchable	data-searchable	Boolean	true	搜索時是否搜索此列
searchFormatter	data-search-formatter	Boolean	true	搜索是否使用格式化后的數據（即顯示在頁面上的數據）

事件：

?

$('#table').bootstrapTable({

onEventName: function (arg1, arg2, ...) {

// ...

}

});

?

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

// ...

});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Option 事件jQuery 事件參數描述

onAll	all.bs.table	name, args	所有的事件都會觸發該事件，參數包括： name：事件名， args：事件的參數。
onClickRow	click-row.bs.table	row, $element	當用戶點擊某一行的時候觸發，參數包括： row：點擊行的數據， $element：tr 元素， field：點擊列的 field 名稱。
onDblClickRow	dbl-click-row.bs.table	row, $element	當用戶雙擊某一行的時候觸發，參數包括： row：點擊行的數據， $element：tr 元素， field：點擊列的 field 名稱。
onClickCell	click-cell.bs.table	field, value, row, $element	當用戶點擊某一列的時候觸發，參數包括： field：點擊列的 field 名稱， value：點擊列的 value 值， row：點擊列的整行數據， $element：td 元素。
onDblClickCell	dbl-click-cell.bs.table	field, value, row, $element	當用戶雙擊某一列的時候觸發，參數包括： field：點擊列的 field 名稱， value：點擊列的 value 值， row：點擊列的整行數據， $element：td 元素。
onSort	sort.bs.table	name, order	當用戶對列進行排序時觸發，參數包含： name: 排序列字段名 order: 排序列的順序
onCheck	check.bs.table	row	當用戶檢查行時觸發，參數包含： row: 與單擊的行對應的記錄. $element: 選中DOM元素.
onUncheck	uncheck.bs.table	row	在用戶取消選中行時觸發，參數包含：? row: 與單擊的行對應的記錄. $element: 取消選中DOM元素.
onCheckAll	check-all.bs.table	rows	當用戶檢查所有行時觸發，參數包含： rows: 與新檢查的行對應的記錄數組
onUncheckAll	uncheck-all.bs.table	rows	當用戶取消選中所有行時觸發，參數包含： rows:與先前檢查的行對應的記錄數組
onCheckSome	check-some.bs.table	rows	當用戶檢查某些行時觸發，參數包含：? rows: 與先前檢查的行對應的記錄數組.
onUncheckSome	uncheck-some.bs.table	rows	當用戶取消選中某些行時觸發，參數包含： rows: 與先前檢查的行對應的記錄數組.
onLoadSuccess	load-success.bs.table	data	在成功加載遠程數據時觸發
onLoadError	load-error.bs.table	status	在加載遠程數據時發生某些錯誤時觸發.
onColumnSwitch	column-switch.bs.table	field, checked	切換列可見時觸發.
onColumnSearch	column-search.bs.table	field, text	在按列搜索時觸發
onPageChange	page-change.bs.table	number, size	更改頁碼或頁面大小時觸發.
onSearch	search.bs.table	text	在搜索表時觸發.
onToggle	toggle.bs.table	cardView	切換表視圖時觸發.
onPreBody	pre-body.bs.table	data	在呈現表體之前觸發
onPostBody	post-body.bs.table	none	在表體表示并在DOM中可用之后觸發
onPostHeader	post-header.bs.table	none	在表頭之后觸發，并在DOM中可用
onExpandRow	expand-row.bs.table	index, row, $detail	當點擊詳細圖標展開詳細頁面的時候觸發。
onCollapseRow	collapse-row.bs.table	index, row	當點擊詳細圖片收起詳細頁面的時候觸發。
onRefreshOptions	refresh-options.bs.table	options	在刷新選項之后和在銷毀和初始化表之前觸發.
onRefresh	refresh.bs.table	params	單擊刷新按鈕后觸發.

方法：

名稱參數描述例子

getOptions	none	返回表格的 Options。	getOptions
getSelections	none	返回所選的行，當沒有選擇任何行的時候返回一個空數組。	getSelections
getAllSelections	none	返回所有選擇的行，包括搜索過濾前的，當沒有選擇任何行的時候返回一個空數組。	getAllSelections
getData	useCurrentPage	或者當前加載的數據。假如設置 useCurrentPage 為 true，則返回當前頁的數據。	getData
getRowByUniqueId	id	根據 uniqueId 獲取行數據。	getRowByUniqueId
load	data	加載數據到表格中，舊數據會被替換。	load
showAllColumns	none	顯示所有列.	showAllColumns
hideAllColumns	none	隱藏所有列.	hidAllColumns
append	data	添加數據到表格在現有數據之后。	append
prepend	data	插入數據到表格在現有數據之前。	prepend
remove	params	從表格中刪除數據，包括兩個參數： field: 需要刪除的行的 field 名稱。 values: 需要刪除的行的值，類型為數組。	remove
removeAll	-	刪除表格所有數據。	removeAll
removeByUniqueId	id	根據 uniqueId 刪除指定的行。	removeByUniqueId
insertRow	params	插入新行，參數包括： index: 要插入的行的 index。 row: 行的數據，Object 對象。	insertRow
updateRow	params	更新指定的行，參數包括： index: 要更新的行的 index。 row: 行的數據，Object 對象。	updateRow
showRow	params	顯示指定的行，參數包括： index: 要更新的行的 index 或者 uniqueId。 isIdField: 指定 index 是否為 uniqueid。	showRow-hideRow
hideRow	params	顯示指定的行，參數包括： index: 要更新的行的 index。 uniqueId: 或者要更新的行的 uniqueid。	showRow-hideRow
getRowsHidden	show	獲取所有行隱藏，如果show參數為true，行將再次顯示，否則，方法 只返回隱藏的行.
mergeCells	options	將某些單元格合并到一個單元格，選項包含以下屬性： index：行索引 field：字段名稱 rowspan：要合并的rowspan數量? colspan：要合并的colspan數量
updateCell	params	更新一個單元格，params包含以下屬性： index：行索引? field：字段名稱 value：新字段值
refresh	params	刷新遠程服務器數據，可以設置?{silent：true}?以靜默方式刷新數據，并設置?{url：newUrl}?更改URL。 要提供特定于此請求的查詢參數，請設置?{query：{foo：’bar’}}
refreshOptions	options	刷新選項
resetSearch	text	設置搜索文本
showLoading	none	顯示加載狀態.
hideLoading	none	隱藏加載狀態
checkAll	none	檢查所有當前頁面行.
uncheckAll	none	取消選中所有當前頁面行
check	index	檢查一行，行索引從0開始.
uncheck	index	取消選中一行，行索引從0開始.
checkBy	params	按值數組檢查一行，參數包含： field：用于查找記錄的字段的名稱 values：要檢查的行的值數組 例:? $(“#table”).bootstrapTable(“checkBy”, {field:”field_name”, values:[“value1”,”value2”,”value3”]})
uncheckBy	params	按值數組取消選中一行，參數包含： field：用于查找記錄的字段的名稱 values：要取消選中的行的值的數組 例:? $(“#table”).bootstrapTable(“uncheckBy”, {field:”field_name”, values:[“value1”,”value2”,”value3”]})
resetView	params	重置引導表視圖，例如重置表高度.
resetWidth	none	調整頁眉和頁腳的大小以適合當前列寬度
destroy	none	銷毀引導表.
showColumn	field	顯示指定的列.
hideColumn	field	隱藏指定的列.
getHiddenColumns	-	獲取隱藏的列。
getVisibleColumns	-	獲取可見列。
scrollTo	value	滾動到指定位置，單位為 px，設置 ‘bottom’ 表示跳到最后。
getScrollPosition	none	獲取當前滾動條的位置，單位為 px。
filterBy	params	（只能用于 client 端）過濾表格數據， 你可以通過過濾{age: 10}來顯示 age 等于 10 的數據。
selectPage	page	跳到指定的頁。
prevPage	none	跳到上一頁。
nextPage	none	跳到下一頁。
togglePagination	none	切換分頁選項。
toggleView	none	切換 card/table 視圖
expandRow	index	如果詳細視圖選項設置為True，請展開具有通過參數傳遞的索引的行.
collapseRow	index	如果詳細視圖選項設置為True，則折疊具有通過參數傳遞的索引的行.
expandAllRows	is subtable	如果詳細視圖選項設置為True，請展開所有行.
collapseAllRows	is subtable	如果詳細信息視圖選項設置為True，則折疊所有行.

總結

以上是生活随笔為你收集整理的BootstrapTable中文文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。