本文通过实例代码给大家分享了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数据表格的详细内容。