bootstraptable控制分页_bootstraptable前后端分页（超级简
单）
前端分页：数据库查询所有的数据，在前端进⾏分页
后端分页：每次只查询当前页⾯加载所需要的那⼏条数据
jquery谁都有，不说了
项⽬结构：TestController命名打错了，请⽆视。。
⼀，前端分页
前端分页⽐较简单，只需要把数据都传到前端，让bootstrap table⾃⼰处理显⽰就⾏了
1.随便建个userinfo数据库
public classUserInfo {privateInteger id;privateString name;privateInteger age;privateString sex;
}public interfaceUserDao {
ListfindAll();
}
select * fromuserinfo@ResourceprivateUserDao ud;//前端分页
@RequestMapping("/index")publicString index(){return "index";
}
@RequestMapping("/findALL")
@ResponseBodypublic ListfindAll(){
List< UserInfo> list =ud.findAll();returnlist;
}
3，页⾯ 我⽤的是thymeleaf模板，模板不同的照⾃⼰模板语法引⼊js即可，只需要声明个table
Title
前端分页
$("#mytable").bootstrapTable({
url:"/findALL", //请求地址
striped : true, //是否显⽰⾏间隔⾊
pageNumber : 1, //初始化加载第⼀页
pagination : true,//是否分页
sidePagination : 'client',//server：服务器端分页|client：前端分页
pageSize : 5,//单页记录数
pageList : [ 5, 10],//可选择单页记录数
showRefresh : true,//刷新按钮
columns : [ {
title :'id',
field :'id',
sortable :true}, {
title :'姓名',
field :'name',
sortable :true}, {
title :'年龄',
field :'age',
sortable :true},{
title :'性别',
field :'sex',
sortable :true}]
})
})
4.完成效果图
⼆，后端分页
1.封装⼀个Page⼯具类
public classPage {private int pageNumber; //每页的条数
private int offset; //数据库查询索引//get，set省略
}
2.复制⼀下UserInfo类重命名People，并继承Page
public class People extendsPage {privateInteger id;privateString name;privateInteger age;privateString sex;//... }
bootstrap项目
3.封装⼀个ReturnData类，作为返回数据实体类，它有两个参数，⼀个表⽰数据集合，⼀个是数据总条数
/*** 返回数据实体类
*@param*/
public class ReturnData {//数据集合
private List rows = new ArrayList();//数据总条数
private inttotal;//...
}
4.dao接⼝，加两个⽅法即可
public interfaceUserDao {//List findAll();
ListgetAll(People people);intgetTatlo();
}
select*from userinfo LIMIT #{offset},#{pageNumber}
select count(1) from userinfo
@ResourceprivateUserDao ud;//后端分页
@RequestMapping("/people")publicString people(){return "people";
}
@RequestMapping("/getAll")
@ResponseBodypublic ReturnDatagetAll(People people){
ReturnData peopleData = new ReturnData();//得到总页数
int totle =ud.getTatlo();
peopleData.setTotal(totle);//得到user数据对象
List plist =ud.getAll(people);
peopleData.setRows(plist);returnpeopleData;
}
7.页⾯；和前端分页⼀样的，只是请求地址和分页⽅式变了⼀下，另外向后台传了两个分页查询参数Title
后端分页
$("#mytable").bootstrapTable({ url:"/getAll", //请求地址
striped : true, //是否显⽰⾏间隔⾊
pageNumber : 1, //初始化加载第⼀页
pagination : true,//是否分页
sidePagination : 'server',//server：服务器端分页|client：前端分页
pageSize : 5,//单页记录数
pageList : [ 5, 10, 20],//可选择单页记录数
showRefresh : true,//刷新按钮
queryParams : function(params) {//上传服务器的参数
var temp ={
offset :params.offset+ 0,//SQL语句起始索引
pageNumber : params.limit //每页显⽰数量
};returntemp;
},columns : [ {
title :'id',
field :'id', sortable :true}, { title :'姓名',
field :'name', sortable :true}, { title :'年龄',
field :'age', sortable :true},{ title :'性别',
field :'sex', sortable :true}] })
})
8.效果图
完事收⼯。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。