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)" 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是当前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数据表格实例代码网站的支持！

来源：http://blog.csdn.net/wo8451401/article/details/77964354