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)" 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)" 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)" onclick="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>