首先初始化页面
分页时使用总记录数的键值为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: "真实姓名",},{
field: "userInfo.department",title: "所属部门",{
field: "coinName",title: "类型",{
field: "amount",title: "数量",sorter:numSort
},{
field: "validDateStart",title: "有效期起",//——修改——获取日期列的值进行转换
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: "有效期止",index) {
var time = new Date(value);
var y = time.getFullYear();//年
var m = time.getMonth() + 1;//月
var d = time.getDate();//日
return y+"-"+m+"-"+d}
},title: "操作列",formatter:function(value,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,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);//主要是要这种写法 } }); });*/ })表格可以加一个手风琴样式