快捷導(dǎo)航

BootStrap數(shù)據(jù)表格實例代碼

更新時間：2017年09月13日 14:14:17 作者：Beauty_魅影

本文通過實例代碼給大家分享了BootStrap數(shù)據(jù)表格的相關(guān)知識，感興趣的朋友一起看看吧

首先初始化頁面

$(function(){
  $('#archives-table').bootstrapTable({
   url: "/coinSend/list",//數(shù)據(jù)源
   dataField: "rows",//服務(wù)端返回數(shù)據(jù)鍵值 就是說記錄放的鍵值是rows，分頁時使用總記錄數(shù)的鍵值為total
   search: true,//是否搜索
   cache: false,
   striped: true,
   pagination: true,//是否分頁
   sortable: true,          //是否啟用排序
   sortOrder: "asc",          //排序方式
   //pageNumber:1,
   pageSize: 10,//單頁記錄數(shù)
   pageList: [5, 10, 20, 50],//分頁步進值
   sidePagination: "server",//服務(wù)端分頁
   contentType: "application/json",//請求數(shù)據(jù)內(nèi)容格式 默認是 application/json 自己根據(jù)格式自行服務(wù)端處理
   dataType: "json",//期待返回數(shù)據(jù)類型
   method: "post",//請求方式
   searchAlign: "left",//查詢框?qū)R方式
   silent: true,
   queryParamsType: "limit",//查詢參數(shù)組織方式
   queryParams: function getParams(params) {
     var param = {
      pageNum: params.pageNumber,
      pageSize: params.pageSize,
      realName : params.search
     };
     return param;
   },
   responseHandler: function(res) {
     return {
      "total": res.total,//總頁數(shù)
      "rows": res.rows  //數(shù)據(jù)
     };
   },
   searchOnEnterKey: false,//回車搜索
   showRefresh: true,//刷新按鈕
   showColumns: true,//列選擇按鈕
   buttonsAlign: "left",//按鈕對齊方式
   toolbar: "#userToolbarsendCoin",//指定工具欄
   toolbarAlign: "right",//工具欄對齊方式
   columns: [
     /*{
      title: "全選",
      field: "select",
      checkbox: true,
      width: 20,//寬度
      align: "center",//水平
      valign: "middle"http://垂直
     },*/
     {
      title: "ID",//標(biāo)題
      field: "id",//鍵名
      sortable: true,//是否可排序
      order: "desc"http://默認排序方式
     },
     {
      field: "userInfo.userName",
      title: "用戶名",
      sortable: true,
      titleTooltip: "this is name"
     }/*,
     {
      field: "userInfo.id",
      title: "userInfo.id",
     }*/,
     {
      field: "userInfo.realName",
      title: "真實姓名",
      sortable: true,
     },
     {
      field: "userInfo.department",
      title: "所屬部門",
      sortable: true,
     },{
      field: "coinName",
      title: "類型",
      sortable: true,
     },
     {
      field: "amount",
      title: "數(shù)量",
      sortable: true,
      sorter:numSort
     },
     {
      field: "validDateStart",
      title: "有效期起",
      sortable: true,
      //——修改——獲取日期列的值進行轉(zhuǎn)換
      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        var d = time.getDate();//日
        return y+"-"+m+"-"+d
      }
     },
     {
      field: "validDateEnd",
      title: "有效期止",
      sortable: true,
      //——修改——獲取日期列的值進行轉(zhuǎn)換
      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        var d = time.getDate();//日
        return y+"-"+m+"-"+d}
     }
     ,
     {
      field: "userInfo.id",
      title: "操作列",
      formatter:function(value, row, rowIndex){
        var userId =row.userInfo.id;
        var amount =row.amount;
        var validDateStart =row.validDateStart;
        var validDateEnd =row.validDateEnd;
        var realName =row.userInfo.realName;
        console.log(userId);
        console.log(realName);
        console.log(amount);console.log(validDateStart);console.log(validDateEnd);
        if(userId!=null){
         return'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+'<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\',\''+realName+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>分配</a>' +'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'/*+
            '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="editTw(\''+userId+'\',\''+amount+'\',\''+realName+'\',\''+validDateEnd+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>編輯</a>'*/;
        }else{
         return '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\');"> <i class="icon-edit icon-white"></i>分配</a>';
        }
     }
     }
   ],
   onClickRow: function(row, $element) {
     //$element是當(dāng)前tr的jquery對象
     $element.css("background-color", "white");
     /*alert(row.id);
     id = row.id;*/
   },//單擊row事件
   locale: "zh-CN",//中文支持,
   detailView: false, //是否顯示詳情折疊
   detailFormatter: function(index, row, element) {
   var html = '';
   $.each(row, function(key, val){
     html += "<p>" + key + ":" + val + "</p>"
   });
   return html;
  }
})
  /*$('#archives-table').bootstrapTable('hideColumn', 'userInfo.id');*/
  /*$("#searchBtn").click(function() {
   var realName = $("#realName").val();
   $.ajax({
     type: "post",
     url: "/coinSend/list",
     data: {param : param},
     dataType:"json",
     success : function(json) {
      $("#archives-table").bootstrapTable('load', json);//主要是要這種寫法
     }
   });
  });*/
})

請求后臺controller，動態(tài)獲取數(shù)據(jù)

表格可以加一個手風(fēng)琴樣式

<div class="ibox float-e-margins">
  <div class="ibox-title">
   <h5>員工列表</h5>
   <div class="ibox-tools">
     <a class="collapse-link">
      <i class="fa fa-chevron-up"></i>
     </a>
   </div>
  </div>
  <div class="ibox-content">
   <div class="ibox float-e-margins">
     <table id="archives-table" class="table table-hover">
     </table>
   </div>
  </div>
</div>

總結(jié)

以上所述是小編給大家介紹的BootStrap數(shù)據(jù)表格實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: