BootStrap數據表格，

首先初始化頁面

$(function(){

   $('#archives-table').bootstrapTable({
      url: "/coinSend/list",//數據源
      dataField: "rows",//服務端返回數據鍵值 就是說記錄放的鍵值是rows，分頁時使用總記錄數的鍵值爲total
      search: true,//是否搜索
      cache: false,
      striped: true,
      pagination: true,//是否分頁
      sortable: true,                    //是否啓用排序
      sortOrder: "asc",                   //排序方式
      //pageNumber:1,
      pageSize: 10,//單頁記錄數
      pageList: [5, 10, 20, 50],//分頁步進值
      sidePagination: "server",//服務端分頁
      contentType: "application/json",//請求數據內容格式 默認是 application/json 自己根據格式自行服務端處理
      dataType: "json",//期待返回數據類型
      method: "post",//請求方式
      searchAlign: "left",//查詢框對齊方式
      silent: true,
      queryParamsType: "limit",//查詢參數組織方式
      queryParams: function getParams(params) {
         var param = {
            pageNum: params.pageNumber,
            pageSize: params.pageSize,
            realName : params.search
         };
         return param;
      },
      responseHandler: function(res) {
         return {
            "total": res.total,//總頁數
            "rows": res.rows   //數據
         };
      },
      searchOnEnterKey: false,//回車搜索
      showRefresh: true,//刷新按鈕
      showColumns: true,//列選擇按鈕
      buttonsAlign: "left",//按鈕對齊方式
      toolbar: "#userToolbarsendCoin",//指定工具欄
      toolbarAlign: "right",//工具欄對齊方式
      columns: [
         /*{
            title: "全選",
            field: "select",
            checkbox: true,
            width: 20,//寬度
            align: "center",//水平
            valign: "middle"//垂直
         },*/
         {
            title: "ID",//標題
            field: "id",//鍵名
            sortable: true,//是否可排序
            order: "desc"//默認排序方式
         },
         {
            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: "數量",
            sortable: true,
            sorter:numSort
         },
         {
            field: "validDateStart",
            title: "有效期起",
            sortable: true,
            //——修改——獲取日期列的值進行轉換
            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,
            //——修改——獲取日期列的值進行轉換
            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)" οnclick="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)" οnclick="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)" οnclick="sendCoin(\''+userId+'\');"> <i class="icon-edit icon-white"></i>分配</a>';
               }
         }
         }
      ],
      onClickRow: function(row, $element) {
         //$element是當前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，動態獲取數據

表格可以加一個手風琴樣式

<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>