通過給每一個(gè)需要切換子內(nèi)容元素設(shè)置對應(yīng)上述錨點(diǎn)的id｛#padding｝,并且不要忘了給外層容器加（tab-content），給子元素容器加class(tab-pane fade in active),有active的就是默認(rèn)選中的。每一個(gè)子內(nèi)容都有一個(gè)table元素，所以這里就是我們需要的table，切換每一個(gè)tab就會(huì)刷新顯示對應(yīng)的table數(shù)據(jù)。這里我們采用動(dòng)態(tài)的生成table的方式加載數(shù)據(jù)。

var $table=$('.table')
function initTable(index){
  $table.bootstrapTable({
  url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index, //請求數(shù)據(jù)地址url
  height: getHeight(), //獲取行高
  striped: true, //設(shè)置為 true 會(huì)有隔行變色效果
  search: true, //為true會(huì)有搜索框
  showRefresh: true, //為true有刷新按鈕
  showColumns: true, //是否顯示 內(nèi)容列下拉框
  minimumCountColumns: 2,//當(dāng)列數(shù)小于此值時(shí)，將隱藏內(nèi)容列下拉框
  clickToSelect: true, //點(diǎn)擊行是checkbox或者rediobox選中
  detailView: true, //設(shè)置為 true 可以顯示詳細(xì)頁面模式。table第一行會(huì)有+號(hào)，點(diǎn)擊會(huì)出現(xiàn)更詳細(xì)的該行信息
  detailFormatter: 'detailFormatter', //格式化詳細(xì)頁面模式的視圖。
  pagination: true, //展示有分頁
  paginationLoop: false, //循環(huán)分頁
  sidePagination: 'server', //設(shè)置在哪里進(jìn)行分頁，可選值為 'client' 或者 'server'。設(shè)置 'server'時(shí)，必須設(shè)置 服務(wù)器數(shù)據(jù)地址（url）或者重寫ajax方法
  silentSort: false, //設(shè)置為 false 將在點(diǎn)擊分頁按鈕時(shí)，自動(dòng)記住排序項(xiàng)。僅在 sidePagination設(shè)置為 server時(shí)生效19   escape: true, //轉(zhuǎn)義HTML字符串，替換 &, <, >, ", `, 和 ' 字符.
  searchOnEnterKey: true, //設(shè)置為 true時(shí)，按回車觸發(fā)搜索方法，否則自動(dòng)觸發(fā)搜索方法
  idField: 'systemId', //指定主鍵
  maintainSelected: true, //設(shè)置為 true 在點(diǎn)擊分頁按鈕或搜索按鈕時(shí)，將記住checkbox的選擇項(xiàng)
  toolbar: '#toolbar', //一個(gè)jQuery 選擇器，指明自定義的toolbar 
  columns: [
    {field: 'complain_reason', title: '舉報(bào)類型',align: 'center'},
    {field: 'nick_name', title: '舉報(bào)人',align: 'center'},
    {field: 'create_time', title: '舉報(bào)時(shí)間',formatter:'timeFormat' },
    {field: 'complain_state', title: '舉報(bào)狀態(tài)',formatter:'stateFormat'}
    {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
   ]
  });
}

以上就是初始化table的函數(shù)，傳index是為了切換時(shí)候請求不同的地址刷新不同的table，因?yàn)樵诿恳粋€(gè)tab切換菜單都有onclick事件函數(shù) freashTable（index）,table的所有用到的配置我都在上述代碼中做了注釋，想看跟詳細(xì)的配置請看官網(wǎng)配置（http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/）。columns配置每一行，field是對應(yīng)的每一列要顯示的字段key值，title對應(yīng)的是每一列的頭部，formatter是格式化每一列的自定義函數(shù),下面只展示時(shí)間格式化函數(shù)代碼：

function timeFormat(value,row,index){
  value = row.modifyTime==null?value:row.modifyTime;
 return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,' ');
 }

對應(yīng)的field為action的那一行就是操作按鈕了，格式化操作按鈕代碼如下：

function actionFormatter(value, row, index) {
 return [
  '　',
  ''
 ].join('');
}

同時(shí)分頁bootstrap已經(jīng)提供了完整的配置（包括每頁顯示的行數(shù)，分頁按鈕，總條數(shù)和總頁數(shù)等等）但是沒有跳轉(zhuǎn)到指定行，所以需要我們自己寫他的樣式定位到相應(yīng)的分頁欄，不過他有相關(guān)的方法提供，

selectPage就是跳到指定頁，我們可以自己系一個(gè)方法：

function goPage(){
  var page=$('#pageNum').val();
  $table.bootstrapTable('selectPage',page)
 }

在用其方法時(shí)候，要$table.bootstrapTable('selectPage',page)使用。

以上是“Bootstrap中Table如何搭建后臺(tái)管理系統(tǒng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！