这次给大家带来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' '+' 分配' +' '/*+ ' 编辑'*/; }else{ return ' 分配'; } } } ], 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 += "" + key + ":" + val + "
" }); 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，动态获取数据
表格可以加一个手风琴样式
员工列表
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Bootstrap教程
以上就是BootStrap操作数据表格（实例代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2771510.html
