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'      '+'<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>' +'      '/*+
            '<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是当前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>

总结

以上所述是小编给大家介绍的bootstrap数据表格实例代码，希望对大家有所帮助