bootstrap table使用總結
BootstrapTable使用實例
事件event
事件函數的用法：
方法1 $('#table').bootstrapTable({ onEventName: function (arg1, arg2, ...) {// ...} }) var table=$('#user'); table..bootstrapTable({ onAll: function (arg1, arg2, ...) {}, onClickRow: function (arg1, arg2, ...) {}, } 方法2、 $('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {// ...}) $('#table').on('click-row.bs.table', function (e, arg1, arg2, ...) {})
onAll(name,args) 任何事件觸發都會同時觸發該事件（事件名稱|事件數據） all.bs.table
onClickRow(row, $element, field) 當點擊某一行時觸發（出發改事件這一行的數據|tr元素|與單擊的單元格對應的字段名稱） click-row.bs.table
onDblClickRow( row, $element, field) 當雙擊擊某一行時觸發 (參數同上) dbl-click-row.bs.table
onClickCell(field, value, row, $element) 當點擊某一個單元格時觸發(單擊的單元格對應的字段名|該單元格的數據值|對應於單擊行的記錄|td元素) click-cell.bs.table
onDblClickCell(field, value, row, $element) 當雙擊某一個單元格時觸發（參數同上） dbl-click-cell.bs.table
onSort(name, order) 當用戶點擊表頭對某一字段列進行排序時觸發(該列字段名稱|排序列順序) sort.bs.table
onCheck(row, $element) 當用戶選中一行時觸發(對應於單擊行的記錄|選中的DOM元素) check.bs.table
onUncheck(row, $element) 當用戶取消選中一行時觸發 （ 參數同上） uncheck.bs.table
onCheckAll(rows) 當用戶點擊全選框時觸發 (與選中的行對應的數據數組) check-all.bs.table
onUncheckAll(rows) 當用戶點擊全選框取消選擇時觸發（與取消的行對應的表數據數組） uncheck-all.bs.table
onCheckSome(rows) 當用戶選中某些行時觸發 check-some.bs.table
onUncheckSome(rows) 當用戶取消選中某些行時觸發 uncheck-some.bs.table
onLoadSuccess(data) 當遠程數據被加載完成后觸發當服務器發送的格式不和規范在這里修改在返回 load-success.bs.table
onLoadError(status, jqXHR) 當遠程數據被加載出錯后觸發（jqXHR的狀態代碼|XMLHTTPRequest對象） load-error.bs.table
onColumnSwitch(field, checked) 當切換列的顯示狀態（可見或不可見）時觸發（該列字段名|該列的選中狀態） column-switch.bs.table
onPageChange (number, size) 當切換每頁條數時觸發（頁碼，每頁多少條） page-change.bs.table
onSearch( text) 當對表格內容進行搜索時觸發 search.bs.table
onToggle(cardView表的cardView狀態) 當切換表格的顯示視圖時觸發 toggle.bs.table
onPreBody(data渲染數據) 在對表格體進行渲染前觸發 pre-body.bs.table
onPostBody(data) 在表格體渲染完成，並在 DOM 中可見后觸發 post-body.bs.table
onPostHeader(undefined) 在表格列頭渲染完成，並在 DOM 中可見后觸發 post-header.bs.table
onExpandRow(index, row, $detail) 當點擊詳情按鈕展開詳情視圖時觸發 expand-row.bs.table
onCollapseRow(index, row) 當點擊關閉詳情按鈕收起詳情視圖時觸發 collapse-row.bs.table
onRefreshOptions(options) 當刷新表格選項時，在銷毀當前表格並重新初始化新表格之前觸發 refresh-options.bs.table
onResetView(undefind) 當重置表格視圖時觸發 reset-view.bs.table
onRefresh(params) 當點擊刷新按鈕對表格進行刷新時觸發(請求到服務器的附加參數？) refresh.bs.table
onScrollBody( undefined) 當對表格體進行滾動時觸發 scroll-body.bs.table
onColumnSearch() ？？？對列內容進行搜索時觸發
BootStrap Table：事件、方法、多語言
方法：
用法
$('#table').bootstrapTable('method', parameter);
如;
$('#table').bootstrapTable('getOptions');
$('#table').bootstrapTable('getRowByUniqueId',id);
bootstrapTable('getOptions'); 獲取表格的參數
bootstrapTable('getSelections'); 獲取當前被選中的行
bootstrapTable('getAllSelections'); 獲取當前被選中的行數據，包含搜索和過濾前的
bootstrapTable('showAllColumns'); 展示所有列
bootstrapTable('hideAllColumns'); 隱藏所有列
bootstrapTable('removeAll'); 移除表格中的所有數據
bootstrapTable('showLoading'); 顯示數據加載狀態提示
bootstrapTable('hideLoading'); 隱藏數據加載狀態提示
bootstrapTable('checkAll'); 選中當前頁的所有行
bootstrapTable('uncheckAll'); 取消選中當前頁的所有行
bootstrapTable('checkInvert'); 對當前頁內行數據進行反選，會觸發onCheckSome 和 onUncheckSome 事件
bootstrapTable('resetWidth'); 重新設置列頭和列尾的寬度去適應當前列的寬度
bootstrapTable('destroy'); 銷毀表格
bootstrapTable('getHiddenColumns'); 獲取隱藏的列
bootstrapTable('getVisibleColumns'); 獲取可見的列
bootstrapTable('getScrollPosition'); 獲取當前滾動條的位置，單位像素
bootstrapTable('prevPage'); 上一頁
bootstrapTable('nextPage'); 下一頁
bootstrapTable('togglePagination'); 切換分頁參數
bootstrapTable('toggleView'); 切換 card/table 視圖
bootstrapTable('getData',useCurrentPage=true); 獲取當前表格中加載的數據，參數useCurrentPage為true 將返回當前頁內的數據
bootstrapTable('getRowByUniqueId',id); 根據唯一ID獲取行數據
bootstrapTable('load',data); 將新數據加載到表格中 一旦成功加載將替換原數據輸出在html，data的格式為數組形式的json如：data = "[{"a": 1}, {"a": 2}]";JSON.parse(data);bootstrapTable('load',data);
bootstrapTable('append',data); 將新數據加載到表格末尾中 data的格式同load一樣
bootstrapTable('prepend',data); 將新數據插入到表格頭部 data的格式與load一樣
bootstrapTable('remove',field,values); 從表格中移除列名為指定值的數據，包含2個參數field: 列名values: 列名取值數組
bootstrapTable('removeByUniqueId',id); 根據唯一ID移除行數據
bootstrapTable('insertRow',index,row); 插入多個新行到指定位置，每一行包含以下參數 index:要插入到行的索引 row: 要插入的行數據
bootstrapTable('updateByUniqueId',id,row); 根據唯一ID更新行數據每一行 id: 唯一ID row: 新的行數據
bootstrapTable('showRow',index,uniqueId); 顯示指定行，至少需包含兩個任意參數
bootstrapTable('hideRow',row,index); 隱藏指定行，至少需包含以下任意參數 index:行索引
bootstrapTable('getHiddenRows',true); 獲取所有隱藏的行數據，當參數為 true 會將隱藏行進行顯示
bootstrapTable('mergeCells',index,field,rowspan,colspan); 合並多個單元格 index: 行索引 field: 列名稱 rowspan: 合並多少行 colspan: 合並多少列
bootstrapTable('updateCell',index,field,value); 更新一個單元格數據 index: 行索引field: 列名稱value: 新列值 禁止表格重新初始化需添加參數{reinit: false}
bootstrapTable('refresh ',{}); 重新加載遠程數據，可以設置 {silent: true}靜默加載數據，同時設置 {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} 改變數據請求地址和分頁參數，請求參數通過 {query: {foo: 'bar'}} 修改
bootstrapTable('refreshOptions',options); 刷新表格的參數
bootstrapTable('resetSearch',text); 設置搜索內容
bootstrapTable('check',index); 選中某一行，索引從0開始
bootstrapTable('uncheck',index); 取消選中某一行，索引從0開始
bootstrapTable('checkBy',field,{value,...}}); 根據列名選則行數據
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
bootstrapTable('uncheckBy',field,{value,...}}); 根據列名取消選中行數據
bootstrapTable('resetView',{height:200}); 重置表格視圖
bootstrapTable('showColumn',field); 顯示指定列
bootstrapTable('hideColumn',field); 隱藏指定列
bootstrapTable('scrollTo',value); 使滾動條滾動到指定位置，單位像素，'bottom' 滾動條滾動到底
bootstrapTable('filterBy',{}); 在client模式下，對表格數據進行過濾，語法示例如下{age: 10, hairColor: ["blue", "red", "green"]}
bootstrapTable('selectPage',page); 跳轉到指定頁
bootstrapTable('expandRow',index); 當詳細視圖設置為True時，展開指定索引的行的詳細視圖
bootstrapTable('collapseRow',index); 當詳細視圖設置為True時，收起指定索引的行的詳細視圖
bootstrapTable('expandAllRows',true); 當詳細視圖設置為True時，展開所有行的詳細視圖
bootstrapTable('collapseAllRows',true); 當詳細視圖設置為True時，收起所有行的詳細視圖
bootstrapTable('updateCellById',{id:xx,field:xx,value:xx}); 根據唯一ID更新指定單元格
屬性：
var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: '/Home/GetDepartment', //請求后台的URL（*）用於從遠程站點請求數據的URL method: 'get', //請求方式（*） toolbar: '#toolbar', //工具欄按鈕用哪個容器 一個jQuery 選擇器，指明自定義的 buttons toolbar。例如:#buttons-toolbar, .buttons-toolbar 或 DOM 節點 toolbarAlign:'left' //指示如何對齊自定義工具欄。可以使用'left'，'right' buttonsToolbar:'', //一個jQuery選擇器，指示按鈕工具欄，例如：＃buttons-toolbar，.buttons-toolbar或DOM節點 buttonsAlign:'right', //指示如何對齊工具欄按鈕。可以使用'left'，'right'。 buttonsClass:'secondary', //定義表按鈕的Bootstrap類（在'btn-'之后添加） striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） 設置為true以在表格底部顯示分頁工具欄默認false sortable: true, //是否啟用排序 列中也有此變量 sortName:'', //定義要排序的列 沒定義默認都不排列，同sortOrder結合使用，sortOrder沒寫的話列默認遞增（asc） sortOrder: "asc", //定義列排序順序，只能是'asc'或'desc'。 sortStable: false, //如果你把此屬性設為了true）我們將為此行添加'_position'屬性 （別看錯了，是sortStable，sortable在下面）設為true，則和sort部分一樣，區別是：在排序過程中，如果存在相等的元素，則原來的順序不會改變 queryParams: oTableInit.queryParams,//傳遞參數（*） sidePagination: "server", //分頁方式：client客戶端分頁（默認），server服務端分頁（*） silentSort:true,//設置為false以便對加載的消息數據進行排序。當sidePagination選項設置為“server”時，此選項有效。 pageNumber:1, //初始化加載第一頁，默認第一頁 pageSize: 10, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） search: true, //是否顯示表格搜索input，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大 strictSearch: true, //啟用嚴格搜索 showColumns: false, //是否顯示所有的列 設置為true以顯示列下拉列表（一個可以設置顯示想要的列的下拉f按鈕） showRefresh: true, //是否顯示刷新按鈕 默認false minimumCountColumns: 1, //最少允許的列數 要從列下拉列表中隱藏的最小列數 clickToSelect: true, //是否啟用點擊選中行 height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度 idField:'', //表明哪個是字段是標識字段 uniqueId: "ID", //表明每一行的唯一標識字段，一般為主鍵列 showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 設置為true以顯示卡片視圖表，例如mobile視圖（卡片視圖） detailView: false, //設置為true以顯示detail 視圖表（細節視圖） locale:'zh-CN', height:800, //固定表格的高度 classes:'table table-bordered table-hover',//表的類名。可以使用'table'，'table-bordered'，'table-hover'，'table-striped'，'table-dark'，'table-sm'和'table-borderless'。默認情況下，表格是有界的。 theadClasses:'',// 表thead的類名 如使用.thead-light或.thead-dark使theads顯示為淺灰色或深灰色。 rowStyle:function(row,index){// 設置行樣式的函數支持類或css if(index==0){ return{ classes:'warning', css:{'color':'red'} } } }, rowAttributes:function(row,index){},// row屬性formatter函數，支持所有自定義屬性 undefinedText:'-',// 定義默認的未定義文本 sortClass:'',//已排序的td元素的類名 rememberOrder:false,//設置為true以記住每列的順序 data:[],// 要加載的數據 [] or {} contentType:'application/json',//請求遠程數據的contentType，例如：application/x-www-form-urlencoded。 dataType:'json',//您希望服務器返回的數據類型 totalField:'total',//Key in incoming json containing 'total' data. dataField:'rows',//名稱寫自己定義的每列的字段名，也就是key，通過key才能給某行的某列賦value原文：獲取每行數據json內的key onlyInfoPagination:false,//設置為true以僅顯示表中顯示的數據量。它需要將分頁表選項即pagination設置為true paginationLoop:true,//設置為true以啟用分頁連續循環模式 paginationHAlign:'right',//分頁條水平方向的位置，默認right（最右），可選left totalRows:0,//該屬性主要由分頁服務器傳遞，易於使用 paginationDetailHAlign:'left',//如果解譯的話太長，舉個例子，paginationDetail就是“顯示第 1 到第 8 條記錄，總共 15 條記錄 每頁顯示 8 條記錄”，默認left（最左），可選right paginationVAlign:'bottom',//分頁條垂直方向的位置，默認bottom（底部），可選top、both（頂部和底部均有分頁條） paginationPreText:'<',//上一頁的按鈕符號 paginationNextText:'>',//下一頁的按鈕符號 paginationSuccessivelySize:5,//分頁時會有<12345...80>這種格式而5則表示顯示...左邊的的頁數 paginationPagesBySide:1,//...右邊的最大連續頁數如改為2則 <1 2 3 4....79 80> paginationUseIntermediate:false,//計算並顯示中間頁面以便快速訪問 true 會將...替換為計算的中間頁數42 searchOnEnterKey:false,// true時搜索方法將一直執行，直到按下Enter鍵（即按下回車鍵才進行搜索） trimOnSearch:true,//默認true，自動忽略空格 searchAlign:'right',//指定搜索輸入框的方向。可以使用'left'，'right'。 searchTimeOut:500,//設置搜索觸發超時 searchText:'',//設置搜索文本框的默認搜索值 showHeader:true,//設置為false以隱藏表頭 showFooter:false,//設置為true以顯示摘要頁腳行(固定也交 比如顯示總數什么的最合適) showPaginationSwitch:false,//設置為true以顯示分頁組件的切換按鈕 showFullscreen:false,// 設置為true以顯示全屏按鈕 smartDisplay:true,//設置為true以巧妙地顯示分頁或卡片視圖 escape:false,// 轉義字符串以插入HTML，替換 &, <, >, “, `, 和 ‘字符 跳過插入HTML中的字符串，替換掉特殊字符 selectItemName:'btSelectItem',// 設置radio 或者 checkbox的字段名稱 clickToSelect:false,//設置為true時 在點擊列時可以選擇checkbox或radio singleSelect:false,// 默認false，設為true則允許復選框僅選擇一行(不能多選了？) checkboxHeader:true,//設置為false以隱藏標題行中的check-all復選框 即隱藏全選框 maintainSelected:false,// true時點擊分頁按鈕或搜索按鈕時，記住checkbox的選擇項 設為true則保持被選的那一行的狀態 icons:{//定義工具欄，分頁和詳細信息視圖中使用的圖標 paginationSwitchDown: 'fa-caret-square-down', paginationSwitchUp: 'fa-caret-square-up', refresh: 'fa-sync', toggleOff: 'fa-toggle-off', toggleOn: 'fa-toggle-on', columns: 'fa-th-list', detailOpen: 'fa-plus', detailClose: 'fa-minus', fullscreen: 'fa-arrows-alt' }, iconSize:'undefined',// 定義icon圖表的尺寸大小html對應為data-icon-undefined （默認btn）、data-icon-lg 大按鈕的尺寸（btn-lg）...; 這里的值依次為undefined => btnxs => btn-xssm => btn-smlg => btn-lg iconsPrefix:'fa',//定義圖標集名稱（FontAwesome的'glyphicon'或'fa'）。默認情況下，'fa'用於Bootstrap v4 queryParamsType:'limit',//設置'limit'以使用RESTFul類型發送查詢參數。 ajaxOptions:{},//提交ajax請求的其他選項。值列表：jQuery.ajax。 customSort:function(sortName,sortOrder,data){},//自定義排序功能（用來代替自帶的排序功能），需要兩個參數（可以參考前面）： ajax:function(){},// 一種替換ajax調用的方法。應該實現與jQuery ajax方法相同的API queryParams: function(params) { // 請求遠程數據時，您可以通過修改queryParams來發送其他參數即server分頁時，這里的queryParams參數就是提交到服務器端的參數了 return params; //返回給服務器的格式如下{search: "", sort: undefined, order: "asc", offset: 0, limit: 20} //我們可以在這修改請求服務器的參數， //當queryParamsType時limit 參數包含limit、offset、order、search、sort當否則它包含pageSize, pageNumber, searchText, sortName, sortOrder //返回 false則中斷請求（return false） }, responseHandler:function(res) { //服務端響應發送的數據會經過這里由我們處理后再顯示在html 詳細的例子 return res; ajax請求成功后，在發放數據之前可以對數據進行處理，比如修改下數據的值什么的 }, customSearch:function(data,text){// 執行自定義搜索功能替換內置搜索功能，需要兩個參數 return data.filter(function (row) {return row.field.indexOf(text) > -1}) }, footerStyle:function(column){// 頁腳樣式格式化程序函數，只需一個參數 m默認｛｝ return { css: { 'font-weight': 'normal' }, classes: 'my-class' } }, detailFormatter:function(index,row,element){//前提：detailView設為true，啟用了顯示detail view。- 用於格式化細節視圖- 返回一個字符串，通過第三個參數element直接添加到細節視圖的cell（某一格）中，其中，element為目標cell的jQuery element return ''; }, 詳細例子 detailFilter:function(index,row){//當detailView設置為true時，每行啟用擴展。返回true並且將啟用該行以進行擴展，返回false並禁用該行的擴展。默認函數返回true以啟用所有行的擴展。 return true }, ignoreClickToSelectOn:function(element){// 包含一個參數：element: 點擊的元素。返回 true 是點擊事件會被忽略，返回 false 將會自動選中。該選項只有在 clickToSelect 為 true 時才生效。 return $.inArray(element.tagName, ['A', 'BUTTON'] }, columns: [ {checkbox: false}, {radio: false}, { radio: false,//此列轉成radio上面單獨領出來是應為有字段顯示就不需要它呀 checkbox: false,//此列轉成checkbox 單獨拎出來同上 field: 'sex', //設置data-field的值 title: __('Operate'),//設置data-field的值 table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate,//單元格格式函數 this上下文是當前列對象 字段數據經過處理現實在瀏覽器(表格列的按鈕就是在這做的) formatter: function (value, row, index,field){ var color; if(value==1){ color='Green'; }else{ color="red"; } return '<div style="color:'+color+'">'+value+'</div>'; }, titleTooltip:'列標題工具提示文本。此選項還支持標題HTML屬性', class:'定義列的類名', rowspan:1,//指定單元格應占用的行數。 colspan:1,//指定單元格應占用的列數。 align:'center',//指定如何對齊列數據。可以使用'left'，'right'，'center'。 halign:'center',//指定如何對齊表頭。可以使用'left'，'right'，'center'。 falign:'center',//指示如何對齊表格頁腳。可以使用'left'，'right'，'center'。 valign:'middle',//指出如何對齊單元格數據。可以使用'top','middle','bottom' width:'10%',//列的寬度。如果未定義，寬度將自動擴展以適合其內容。格式'100px','10%'，100,如果想表格保持列自適應並且尺寸太小，則可以忽略這項（通過類等使用min / max-width） sortable:false,//設置為true以允許列可以排序。 order:'asc',//默認排序順序，只能是'asc'或'desc'。 visible:true,//設置為false以隱藏列項。 cardVisible:true,//設置為false以隱藏card 視圖狀態中的列項 switchable:true,//設置為false以禁用可切換的列項 clickToSelect:true,//設置為true時 在點擊列時可以選擇checkbox或radio footerFormatter:function(data){},//當前列對象函數該函數應返回一個字符串，其中包含要在頁腳單元格中顯示的文本 events::{},//使用格式化函數時的單元事件監聽器 四個參數event,value,row,index； html可以這么用 <th .. data-events="operateEvent"> sorter:function(a,b,rowA,rowB){},//用於進行本地排序的自定義字段排序函數(第一個字段值，第二個字段值，第一行，第二行) sortName:'',//提供可自定義的排序名稱，而不是標題中的默認排序名稱或列的字段名稱 cellStyle:function(value,row,index,field){},//單元格樣式格式化函數 支持classs和css searchable:true,//設置為true以搜索此列的數據。 searchFormatter:true,//設置為true以搜索使用格式化數據 escape:false,//轉義字符串以插入HTML，替換 &, <, >, “, `, and ‘ 字符。 showSelectTitle:false,//設置為true以使用'radio'或'singleSelect''復選框'選項顯示列的標題。 }, { field:'opreation', tittle:'操作', aligin:'center', formatter:function(value,row,index,field){ return[ '<button type="button" id="btn_edit" class="btn btn-default" data-toggle="modal" data-target="#ModalInfo">修改</button>', '<button id="btn_delete" class="btn btn-warning">刪除</button>' ]; }, events:{ //觸發#btn_edit這個按鈕的點擊事件 'click #btn_edit':function(event,value,row,index){ } //觸發#btn_detele這個按鈕的點擊事件 'click #btn_delete':function(){ //移除當前行的html table.bootstrapTable('remove', { field: 'id', values: [row.id] }); } } } ] }); var operateEvents = { /* 'click .like' 是類名？*/ 'click .like': function (e, value, row, index) {} }
擴展
需要加載：<script src="extensions/accent-neutralise/bootstrap-table-accent-neutralise.js"></script>
重讀詞搜索a->á 這種北歐語系
如搜索Jose 結果José 、jose 都會被搜索出來
需要加載：<script src="extensions/addrbar/bootstrap-table-addrbar.js"></script>
每次更改頁面，排序和搜索操作時，都會更改地址欄的查詢參數。在頁面加載時，此插件將使用地址欄中的查詢參數來發出請求。
template.html?v=56&url=extensions/addrbar-page.html&page=1&limit=10&order=asc&sort=id&search=
搜索框中搜索衣服則URL地址變為
template.html?v=56&url=extensions/addrbar-page.html&page=1&limit=10&order=asc&sort=id&search=衣服
表自動刷新
需要加載：<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
Bootstrap表的表Cookie擴展。一般用來保存表的狀態（其分頁位置，排序狀態，每頁記錄等）
需要加載：<script src="extensions/cookie/bootstrap-table-cookie.js"></script>
此擴展添加了將所選行復制到剪貼板的功能。目前適用於除Safari之外的所有桌面瀏覽器
需加載：<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>
延遲url
使用服務器端處理時，bootstrap-table的默認操作模式是簡單地丟棄表中當前存在的任何數據，並向服務器發出請求以獲取要顯示的第一頁數據。這適用於空表，但如果您已經在純HTML中顯示了第一頁數據，則會浪費資源。因此，您可以使用data-defer-url而不是data-url來指示bootstrap-table不發出初始請求，而是使用頁面上已有的數據
<script src="extensions/defer-url/bootstrap-table-defer-url.js"></script>表的可編輯
<script src="extensions/editable/bootstrap-table-editable.js"></script>表格導出 tableExport.jquery.plugin插件
<script src="extensions/export/bootstrap-table-export.js"></script>表過濾器控制 如果使用datepicker選項，則依賴：bootstrap-datepicker v1.4.0
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>表格分組？？：您必須包含bootstrap-table-group-by.css文件才能獲得適當的樣式
<script src="extensions/group-by-v2/bootstrap-table-group-by.js"></script>依賴：jquery-treetable v3.2.0 ；您必須包含bootstrap-table-group-by.css文件才能獲得合適的樣式
<script src="extensions/group-by/bootstrap-table-group-by.js"></script><script src="extensions/select2-filter/bootstrap-table-i18n-enhance.js"></script>如果為True，則啟用關鍵事件。 關鍵事件列表是：* s：如果啟用了搜索文本框，它將聚焦於搜索文本框。 * r：如果啟用showRefresh選項，它將刷新表。 * t：如果啟用了showToggle選項，它將切換表視圖。 * p：如果啟用了showPaginationSwitch，它將觸發分頁開關。 * left：如果分頁是真的，它將轉到prev page。 *右：如果分頁是真的，它將轉到下一頁
<script src="extensions/key-events/bootstrap-table-key-events.js"></script>表格移動設備顯示增強
<script src="extensions/mobile/bootstrap-table-mobile.js"></script>向工具欄添加一個按鈕，該按鈕隱藏並顯示所有可“切換”的列。
<script src="extensions/multi-column-toggle/bootstrap-table-multi-toggle.js"></script>表格分詞搜索 如用戶輸入526 table 將這個劇分隔並檢索出該表所有列中出現這526或者table的位置
<script src="extensions/multiple-search/bootstrap-table-multiple-search.js"></script>選中表格的多行
<link rel="stylesheet" type="text/css" href="extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.css">
<script src="extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.js"></script>多重排序、表中可出現多個排序
<script src="extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>表格自然排序：
<script src="extensions/natural-sorting/bootstrap-table-natural-sorting.js"></script>
為任何th添加數據排序屬性。 例如
<thdata-sortable="true"data-sorter="alphanum">Price</th>選項 alphanum 自然地排序alpha或數字內容。 這可以在包含文本或數字內容的列中使用。 數字將按預期排序，而不是按ASCII順序排序 numericOnly 提取數字內容並按數字排序。 這可以在包含格式化數字內容的列中使用。 例如 $和將被刪除，然后Numbers將按預期排序 一個alpha排序將這些作為ASCII排序，所以你得到$ 1，$ 100，$ 2，$ 20而不是$ 1，$ 2，$ 20，$ 100。<link rel="stylesheet" href="extensions/page-jumpto/bootstrap-table-jumpto.css"></style>
<script src="extensions/page-jumpto/bootstrap-table-jumpto.js"></script>選項
屬性：showJumpto
類型：Boolean
設置為true以啟用顯示'jump to page'的按鈕？。 可以通過data-show-jumpto HTML屬性定義。
默認值：false
按鈕樣式：可以通過bootstrap-table buttonsClass屬性設置樣式。
在工具欄中添加一個按鈕，以預定義的可配置格式打印表格
<script src="extensions/print/bootstrap-table-print.js"></script>表個列重新排序（即可移動的列插件）
依賴性：dragTable v2.0.14（必須包含css文件），jquery-ui v1.11
<link rel="stylesheet" href=".../dragtable.css">
<script src=".../jquery-ui.js"></script>
<script src=".../jquery.dragtable.js"></script>
<script src="extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>表個行重新排序（即可移動的列插件）
依賴：tablednd v0.9，如果你想要你可以包含bootstrap-table-reorder-rows.css文件來使用默認的dragClass
<link rel="stylesheet" href=".../bootstrap-table-reorder-rows.css">
<script src=".../jquery.tablednd.js"></script>
<script src="extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>可調整表的列大小
已知的問題
設置data-height時，此插件不起作用。
依賴：jquery-resizable-columns v0.2.3
<script src="extensions/resizable/bootstrap-table-resizable.js"></script>
表格select2過濾器
如果使用select2選項，則依賴：Select2 v4.0.0 upper
<script src="extensions/select2-filter/bootstrap-table-select2-filter.js"></script>表引導表的Sticky Header擴展。
這是一個擴展，在滾動時為表提供粘性標題。(固定表頭)
表格工具欄擴展;比如啟用高級搜索
<script src="extensions/toolbar/bootstrap-table-toolbar.js"></script>表Treegrid擴展？？
<script src="extensions/treegrid/bootstrap-table-treegrid.js"></script>/á/g, 'a'