<div style="margin-top: 10px;">
<table id="list">
</table>
</div>
function init() {
var h = $(window).height() - 100;//高度设置
$("#list").bootstrapTable({
// 对应table标签的id
method: "post",
contentType: "application/x-www-form-urlencoded",
url: window.globalConfig.url + "member/findUserList", // 获取表格数据的url
ajaxOptions: {
headers: {
"token": session.token
}
},
height: h,
queryParams: queryParams, // 参数
queryParamsType: "undefined", // 参数格式,发送标准的RESTFul类型的参数请求
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
pagination: true, // 在表格底部显示分页组件,默认false
showRefresh: false,
singleSelect: false,
clickToSelect: true, // 是否启用点击选中行
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server',
responseHandler: function(res) {
var res = {
rows: res.data,
total: res.count
}
return res;
},
columns: [
{
field: 'selectItem',
checkbox: true, // 显示一个勾选框
align: 'center' // 居中显示
},
{
field: 'id',
title: '主键',
visible: false,
align: 'center', // 左右居中
valign: 'middle' // 上下居中
},
{
field: 'name',
title: '会员名',
align: 'center',
valign: 'middle'
},{
field: 'tel',
title: '手机号',
align: 'center',
valign: 'middle'
},
{
field: 'cardnum',
title: '会员卡号',
align: 'center',
valign: 'middle',
width: 100 //设置宽度
},
{
field: '',
title: '操作',
align: 'center',
valign: 'middle',
formatter: function(value, row, index) {
return "<button class='btn btn-success' οnclick='more(" + JSON.stringify(row).replace(/"/g, '"') +
");'>详情</button>"+
" <button class='btn btn-info' οnclick='edit(" + JSON.stringify(row).replace(/"/g,
'"') + ");'>编辑</button>"
}
}
],
onLoadSuccess: function(data) { // 加载成功时执行
$("#list").find("tr th").css({
"background" : "#eceff4",
"color" : "#333",
});
},
onLoadError: function(data) { // 加载失败时执行
console.log(data)
}
})
}
//条件
function queryParams(pageReqeust) {
var content = $("#content").val();
var store = $("#store").val();
var state = $("#state").val();
if (content) {
pageReqeust.content = content;
}
if (store != -1) {
pageReqeust.store = store;
}
if (state != -1) {
pageReqeust.state = state;
}
return pageReqeust;
}
表格列宽平分,在table标签中设置属性
style="table-layout: fixed;word-break: break-all;"