首先初始化页面
$(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 href="javascript:void(0)"> <i></i>分配</a>' +' '/*+ '<a href="javascript:void(0)"> <i></i>编辑</a>'*/; }else{ return '<a href="javascript:void(0)"> <i></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> <div> <h5>员工列表</h5> <div> <a> <i></i> </a> </div> </div> <div> <div> <table> </table> </div> </div> </div>
总结
以上所述是小编给大家介绍的BootStrap数据表格实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: