首先初始化页面

$(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数据表格实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！