这次给大家带来bootstrap操作数据表格，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，动态获取数据
表格可以加一个手风琴样式
<p class="ibox float-e-margins">  <p class="ibox-title">   <h5>员工列表</h5>   <p class="ibox-tools">     <a class="collapse-link">      <i class="fa fa-chevron-up"></i>     </a>   </p>  </p>  <p class="ibox-content">   <p class="ibox float-e-margins">     <table id="archives-table" class="table table-hover">     </table>   </p>  </p></p>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
bootstrap教程
以上就是bootstrap操作数据表格（实例代码）的详细内容。