最近再使用Bootstrap-table写前端表格，遇到了一些小坑，首先是自己的问题，并不是插件的问题，插件还是很还用的，主要还是公司的网络看不了官方文档。
首先是分页栏的问题：
1.分页栏不显示
解决办法：加入如下的参数
smartDisplay:false
2.分页点击无效，现象是点击第二页还在显示第一页的内容
主要看这个函数（这个函数是点击分页栏1,2,3,4的时候，设置给后台发请求的参数的）
function queryParams(params) {
console.log(params); / //打印一下看看return {
//每页多少条数据
pageSize (这个值要与后端一样): params.limit, 这个值是和前面的pageSize的值是相等的（注意要设置下这个queryParamsType: 'limit'）
//请求第几页
currentPage (这个值要与后端一样): params.offset/params.limit, 这个是页码，笔者的后台是从第0页开始的，如果你的后台是从第1页开始的需要+1
}
}
3.colums的值无法正常显示
这个主要是你的后台返回的key和boot-strapjs的默认值不一样导致的。
笔者的返回值是：
注意看这个AgentList,这个值里面的数据是我们想在table显示的值。
js默认的key是rows，显然我们跟它不一样，我们的key是AgentList，我们需要这么做。
需要设置responseHandler这个参数，并且写上我们自己的数据
responseHandler: function (res) {
//在ajax获取到数据，渲染表格之前，修改数据源return {
total : res.totalElementsNumber, //总页数,前面的key必须为"total"
AgentList : res.AgentList //这个就是我们自定义的数据，必须这么写
};
}
最后贴上我的部分js代码
$(
'#mytab').
bootstrapTable({
method:
'post',
contentType:
"application/x-www-form-urlencoded",
url:
"http://localhost:8087/agent/agentList",
height:
tableHeight(),
striped:
true,
pageNumber:
1,
pagination:
true,
queryParamsType:
'limit',
queryParams: queryParams,
sidePagination:
'server',
pageSize:
10,
pageList: [
5,
10,
20,
30],
showRefresh:
true,
showColumns:
true,
clickToSelect:
true,
toolbarAlign:
'right',
buttonsAlign:
'right',
// toolbar:'#toolbar',//指定工作栏
smartDisplay:
false,
columns: [
{
title:
'全选',
field:
'select',
//复选框
checkbox:
true,
width:
25,
align:
'center',
valign:
'middle'
},
{
title:
'ID',
field:
'id',
// visible:false
},
{
title:
'系统名',
field:
'systemName',
// sortable:true
},
{
title:
'逻辑英文名',
field:
'englishName',
},
{
title:
'版本',
field:
'version'
},
{
title:
'服务器',
field:
'host',
// sortable:true
},
{
title:
'创建时间',
field:
'createDate',
align:
'center',
//列数据格式化
// formatter:operateFormatter
},
{
title:
'最近心跳时间',
field:
'updateDate',
align:
'center',
//列数据格式化
// formatter:operateFormatter
},
{
title:
'状态',
field:
'status',
align:
'center',
//列数据格式化
formatter: operateFormatter
}
],
locale:
'zh-CN',
//中文支持,
responseHandler:
function (
res) {
//在ajax获取到数据，渲染表格之前，修改数据源
return {
total : res.totalElementsNumber,
AgentList : res.AgentList
};
}
})
//三个参数，value代表该列的值
function
operateFormatter(
value,
row,
index) {
if (value
==
404) {
return
'<i class="fa fa-lock" style="color:red"></i>'
}
else
if (value
==
200) {
return
'<i class="fa fa-unlock" style="color:green"></i>'
}
else {
return
'数据错误'
}
}
//请求服务数据时所传参数
function
queryParams(
params) {
console.
log(params);
return {
//每页多少条数据
pageSize: params.limit,
//请求第几页
currentPage: params.offset
/params.limit,
}
}
function
tableHeight() {
return
$(window).
height()
-
280;
}
希望对大家有所帮助