这次给大家带来bootstrap-table实现服务器端的分页功能，bootstrap-table实现服务器端分页的注意事项有哪些，下面就是实战案例，一起来看一下。
最近前端都是用的bootstrap table这个插件，客户端分页的话数据量一多交互不好，所以大数据量的分页都用服务器端，下面开始撸代码
前端
首先看下bootstrap table 默认传的分页参数是什么
offset 从哪个下标开始
limit 每页限制的数量
可能跟我们的默认分页参数不大一样吧，所以决定改造一下,传到后台的参数为
page 第几页 从0开始
size 每页显示的数量
$('#'+ tableid).bootstraptable({
queryparams:function(e) {
varparam = {
size: e.limit,
page: (e.offset / e.limit),//不需要+1
};
returnparam;
},
sidepagination:“server”;
});
后台
@apioperation(value =获取企业列表，支持分页, notes =json方法获取用户列表)
@apiimplicitparams({@apiimplicitparam(name =name, value =企业名称, required =true, datatype =string),
@apiimplicitparam(name =begintime, value =开始时间, required =true, datatype =string) })
@requestmapping(value=/list,method=requestmethod.post)
@responsebody
publicmap<string,object> list(@requestparammap<string,object> map,@requestparam(required =false) string name,@requestparam(required =false) string begintime,@requestparam(required =false) string endtime,@requestparam(required =false) integer deptid){
list list =newarraylist<>();
//当前页数
intpage = map.get(page)==null?0: integer.parseint(map.get(page).tostring());
// 每页行数
intsize = map.get(size) ==null?10: integer.parseint(map.get(size).tostring());
order order =neworder(direction.asc,id);
order order1 =neworder(direction.desc,createtime);
list<order> orders =newarraylist<order>();
orders.add(order1);//先按照createtime 降序排序 然后按照id升序
orders.add(order);
sort sort =newsort(orders);
pageable pageable =newpagerequest(page,size,sort);
page<company> companypages =null;
if(stringkit.isempty(name)){
companypages = companyservice.companydao.findall(pageable);
}else{
companypages = companyservice.companydao.findbynamelike(name,pageable);
}
list<company> companylist = companypages.getcontent();
simpledateformat sdf =newsimpledateformat(yyyy-mm-dd hh:mm:ss);
for(company company:companylist){
map<string,object> maptemp = beankit.describe(company);
maptemp.put(createtime, sdf.format(company.getcreatetime()));
list.add(maptemp);
}
map<string,object> data =newhashmap<string,object>();
data.put(total, companypages.gettotalelements());
data.put(rows, list);
returndata;
}
注意点
bootstrap table接收的参数中必须要有total和rows，total就是总数量，rows是每页的数量
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
angularjs实现图片预览上传
vue使用axios与封装
以上就是bootstrap-table实现服务器端的分页功能的详细内容。