這篇文章主要介紹bootstrap中Table的操作方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司公司2013年成立，先為杭錦后等服務(wù)建站，杭錦后等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為杭錦后企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

具體內(nèi)容如下

function HQCreatTable(ob) {
  var option = {
    cache: false,//是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
    scrollX: true,
    scrollY:true,
    striped: true,   //使表格帶有條紋 //是否顯示行間隔色
    sidePagination: "client",//分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
    pagination: true,  //在表格底部顯示分頁(yè)工具欄
    pageNumber: 1,  //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
    pageSize: 10,
    pageList: [ 10,15],//可供選擇的每頁(yè)的行數(shù)（*）
    showColumns: false,//是否顯示所有的列
    sortable: true, //是否啟用排序
    
    clickToSelect: true,//是否啟用點(diǎn)擊選中行
    showRefresh: false, //顯示刷新按鈕
    //search: false,//是否顯示右上角的搜索框
    //toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
    uniqueId: "ID", //每一行的唯一標(biāo)識(shí)，一般為主鍵列
    undefinedText: "",
    toolbarAlign: 'left',
    exportDataType: "all", //basic', 'all', 'selected'.
  }
  if (ob.rowStyle) {
    option.rowStyle = ob.rowStyle;//行樣式 是函數(shù)
  }
  //排序
  if (ob.sortOrder) {
    option.sortOrder = ob.sortOrder;
  } else {
    option.sortOrder = "desc";
  }
  if (ob.sortName) {
    option.sortName = ob.sortName;
  }
  if (ob.showExport) {
    option.showExport = ob.showExport;//導(dǎo)出Excel
  }
  if (ob.showFooter) {
    option.showFooter = ob.showFooter;//是否顯示統(tǒng)計(jì)頁(yè)腳
  }
  if (ob.searchAlign) {
    option.searchAlign = ob.searchAlign;
  }
  if (ob.num) {
    option.pageSize = ob.num;//每頁(yè)的記錄行數(shù)（*）
  }
  if (ob.data) {
    option.data = ob.data;
  } else {
    option.data = [];
  }
  if (ob.search) {
    option.search = ob.search;
  }
  if (ob.columns) {
    option.columns = ob.columns;
  }
  if (ob.onClickRow) {
    option.onClickRow = ob.onClickRow;
  }
  if (ob.onDblClickRow) {
    option.onDblClickRow = ob.onDblClickRow;
  }
  if (ob.onDblClickRow) {
    option.onDblClickRow = ob.onDblClickRow;
  }
  if (ob.onCheck) {
    option.onCheck = ob.onCheck;
  }
  if (ob.onAll) {
    option.onAll = ob.onAll;
  }
  if (ob.onLoadSuccess) {
    option.onLoadSuccess = ob.onLoadSuccess;
  }
  if (ob.toolbar) {
    option.toolbar = ob.toolbar;
  }
  if (ob.singleSelect || ob.singleSelect == false) {
    option.singleSelect = ob.singleSelect
  } else {
    option.singleSelect = true;//禁止多選
  }
  if (ob.maintainSelected) {
    option.maintainSelected = ob.maintainSelected;
  } else {
    option.maintainSelected = false;//設(shè)置為 true 在點(diǎn)擊分頁(yè)按鈕或搜索按鈕時(shí)，將記住checkbox的選擇項(xiàng)
  }
  if (ob.detailView) { option.detailView = ob.detailView; }
  if (ob.onExpandRow) {
    option.onExpandRow = ob.onExpandRow;
  }
  if (ob.onEditableSave) {
    option.onEditableSave = ob.onEditableSave;
  }
  $(ob.id).bootstrapTable('destroy');
  $(ob.id).bootstrapTable(option);
  if (ob.data) {
    $(ob.id).bootstrapTable('load', ob.data);
  }
}

前端分頁(yè)的Table配置函數(shù)

 //行根據(jù)數(shù)據(jù)變色
  function rowStyle(row, index) {
    var classes = ['success'];
    var classes1 = ['danger'];
    var classes2 = ['warning'];
    if (row.bed_msg==0) {
      return {
        classes: classes2
      };
    }else{
      if (row.status == 1) {
        return {
          classes: classes1
        };
      } else {
          return {
        classes: classes
        };
      }
    }
    
  }

根據(jù)每行數(shù)據(jù)的一個(gè)字段的值來(lái)改變行的背景色（class好像只能調(diào)用他本來(lái)默認(rèn)的那幾個(gè)，很久之前寫的忘記了是不是這樣的）

formatter: function (value, row, index) {
          // 根據(jù)row.列名  那狀態(tài)確定返回 true/false
          if (row.status == 1) {
            return {
              disabled: true
            };
          }
          
        }

這個(gè)是根據(jù)每行數(shù)據(jù)的一個(gè)字段的值來(lái)是否禁用選擇框（我在之前項(xiàng)目需要做結(jié)算，已結(jié)算的和未結(jié)算的在一起，因此需要這個(gè)），formatter還可以寫別的函數(shù)，比如根據(jù)1，0值改成其對(duì)應(yīng)的值

footerFormatter: function (data) {
             return data.reduce(function (sum, row) {
               return accAdd(sum, row["Selmoney"]);
             }, 0) + "元";
           }

footerFormatter是必須之前的配置Table時(shí)，showFooter屬性為true，否則不會(huì)顯示。我寫這個(gè)是前端分頁(yè)的話是Table所有數(shù)據(jù)的Selmoney值的總和，后端分頁(yè)的話則是當(dāng)頁(yè)數(shù)據(jù)的總和。

以上是“bootstrap中Table的操作方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！