这次用到bootstrapTable分页,只使用前端分页的话,数据量大会特别影响性能,话不多说直接上代码,如果有错误欢迎指正。
前台:
$('#mytab').bootstrapTable({
url: '/manage/getModeldata',
method:"POST",
contentType: "application/x-www-form-urlencoded",
dataType: "json",
json: 'callback',
pageNumber: 1, //初始化加载第一页
toolbar: "#toolbar",//工具按钮用哪个容器
sidePagination: "server",//分页方式,客户端分页client服务端分页server
uniqueId: "ID",
pageSize: "6",
pagination: true, // 是否分页
sortable: true, // 是否启用排序
//showRefresh: true,//刷新按钮
queryParamsType:'', // 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber
queryParames:queryParamsByBegin,// 直接把pageSize,pageNumber,调用queryParamsByBegin函数
columns: [
{
field: 'SerialNumber',
title: '序号',
width: 80,
formatter: function (value, row, index) {
return index+1;
}
},
{field: 'id', title: 'id',align: 'center',visible:false },
{field: 'modelname', title: '名称',align: 'center',width: 80},
{field: 'firstname', title: '一类名称',align: 'center',width: 80},
{field: 'secondname', title: '子类名称',align: 'center',width: 80},
{
title: '操作',
field: 'id',
align: 'center',
valign: 'middle',
formatter: option1
},
{
title: '查看',
field: 'id',
align: 'center',
valign: 'middle',
formatter: option2
}
]
});
function queryParamsByBegin(params){
return{
pageSize: params.pageSize,
pageNumber: params.pageNumber
}
}
function option1(value, row) {
var htm = '<button class="btn btn-primary" id="delOne" ' +
' onclick="delOne(\''+row.id+'\')">删除</button> <button class="btn btn-primary" onclick="modify(\''+row.id+'\')">修改</button>'
return htm;
}
function option2(value, row) {
var htm = '<button class="btn btn-primary" id="seeOne" ' +
' onclick="see(\''+row.id+'\')">查看</button>'
return htm;
}
这里我对后台的请求是getModeldata,参数有pageNumber, pageSize 页数和每页显示的记录数。
此时后台返回的值应是bootstrapTable规定的JSON格式值。
如果使用后台分页则返回的值应是:{total:0,rows:[]} 分别为总条数和数据
如果是前端分页就是基础的格式就可以了
后端:
controller
@ResponseBody
@PostMapping("getModeldata")
public Map<String,Object> getModeldata(Integer pageNumber,Integer pageSize,Model model){
return modelMapService.getAllData(pageNumber,pageSize);
}
service:这里我用的是pagehelper分页插件
@Override
public Map<String,Object> getAllData(Integer pageNumber,Integer pageSize) {
PageHelper.startPage(pageNumber,pageSize);
List<AppleModel> appleModelList=appleModelDao.getAll();
PageInfo<AppleModel> info = new PageInfo<>(appleModelList);
Map<String,Object> map = new HashMap<String,Object>();
map.put("rows", appleModelList);
map.put("total", info.getTotal());
return map;
}
这样就可以了,主要注意一下bootstrapTable所接受的格式