bootstrap table分页功能分为前端分页和服务端分页两种，前端分页是一次性把数据全部查询到前端，再在前端页面进行分页，当数据量较少时可以使用前端分页，但当数据量较大时，前端分页就不太适用了，一次性查询大量数据耗费大量时间，有时会造成系统崩溃。这时，可以使用服务端分页。服务端分页的原理是根据设置的每页显示数据条数，每次只从数据库中查出这么多数据，这样可以大大减少查询时长，快速响应前端需求。
使用bootstrap table需要引入一些css和js文件，这里不再赘述。
一、前端代码
1.设置表格
<div class="main-wrap">
<div>
<!-- 所有设备查询管理 -->
<div id="prizeToolbar">
<div class="btn-group">
<table id="tb_allEqument" class="table table-hover table-striped table-condensed"></table>
</div>
</div>
</div>
</div>
2。初始化和配置表格
function tableInit() {
$('#tb_allEqument').bootstrapTable({
url: "/hzsh/eomc-jxpj/sheBeiPcct/allEquipment/fenYelist", //请求后台的URL（*）
method: 'POST', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
//------分页信息配置--------
pagination: true, //是否显示分页（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [10, 20, 30, 50], //可供选择的每页的行数（*）
paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
strictSearch: true, //指定全匹配搜索
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: false, //是否启用点击选中行
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: true, //是否显示导出按钮
exportDataType: "all",//导出表格方式（默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据）
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel','xlsx'],//导出文件类型
buttonsAlign:"right", //按钮位置
Icons:'glyphicon-export', //按钮图标
queryParams: function(params) {
var eomcJxpjLHSheBeiFengYeEntity = {
//向服务端传递以下两个参数，服务端获取这两个参数后，加入到sql语句中进行 分页查询
limit:params.limit, // 每页显示数量
offset:params.offset // SQL语句起始索引
}
var temp = {
equCode2:$("#q_equCode").val(),
equName2:$("#q_equName").val(),
equTypeName:$("#q_equType").val() ,
eomcJxpjLHSheBeiFengYeEntity:eomcJxpjLHSheBeiFengYeEntity
}
return JSON.stringify(temp);
},
columns: [{
checkbox: true
}, {
field : 'number',
title : '序号',
align : 'center',
width : 70,
visible : true,
formatter : function(value, row, index) {
return index + 1;
}
}, {
field: 'id',
visible: false
}, {
field: 'equCode2',
title: '设备编号',
sortable: true,
align:'center',
visible: true,
escape: true
}, {
field: 'equName2',
title: '设备名称',
sortable: true,
align:'center',
escape: true
}, {
field: 'equTypeName',
title: '设备类别',
align:'center',
sortable: false,
escape: true
}
],
});
};
二、后端代码
1、实体类
这里创建了两个实体类，一个是数据类，一个是分页信息类
分页信息类：
@Data
public class EomcJxpjLHSheBeiFengYeEntity {
private int limit ;
private int offset;
}
数据类：
@Data
public class EomcJxpjlhSheBeipcctEntity {
private String id;
private String equCode2;
private String equName2;
private String equTypeName;
private String istt;
//分页信息类（这里因为前端传参样式的缘故，所以把分页信息类作为了数据类的一个属性）
private EomcJxpjLHSheBeiFengYeEntity eomcJxpjLHSheBeiFengYeEntity;
}
@Mapper
public interface EomcJxpjlhSheBeipcctMapper{
/**
* sql层分页语句（用的sqlserver数据库，使用top函数）：
* select top linit * from EquList2 where id not in
* (select top offset id from EquList2)
* limit表示每页多少数据，offset表示数据记录索引
* 示例：
* select top 10 * from EquList2 where id not in
* (select top 0 id from EquList2)
* 该语句表示从数据库表中下标索引0（第一条数据）的数据开始取10条数据
*/
@Select("select top ${limit} id,EquCode2,EquName2,EquTypeName,is_tt from EquList2 where id not in\r\n" +
"(select top ${offset} id from EquList2)")
List<EomcJxpjlhSheBeipcctEntity> query(int limit,int offset);
//获取数据库中所有数据记录的条数
@Select("select count(1) from EquList2")
int queryCount();
}
@Controller
@RequestMapping("/hzsh/eomc-jxpj/sheBeiPcct")
public class EomcJxpjlhSheBeipcctController {
@Autowired
private EomcJxpjlhSheBeipcctMapper eomcJxpjlhSheBeipcctMapper;
//前端传递参数为数据实体类
@ResponseBody
@RequestMapping("/allEquipment/fenYelist")
public JSONObject list02(@RequestBody(required = false) EomcJxpjlhSheBeipcctEntity eomcJxpjlhSheBeipcctEntity) {
//获取分页信息类
EomcJxpjLHSheBeiFengYeEntity eomcJxpjLHSheBeiFengYeEntity = eomcJxpjlhSheBeipcctEntity .getEomcJxpjLHSheBeiFengYeEntity();
//每页显示数据条数
int limit = eomcJxpjLHSheBeiFengYeEntity.getLimit();
//数据库查询索引起始值
int offset = eomcJxpjLHSheBeiFengYeEntity.getOffset();
// 查询数据总的数据条数
int total = eomcJxpjlhSheBeipcctMapper.queryCount();
// 按照分页信息查询部分数据
List<EomcJxpjlhSheBeipcctEntity> equList = eomcJxpjlhSheBeipcctMapper.query(limit, offset);
JSONObject res = new JSONObject();
JSONArray resArray = new JSONArray();
//将分页查询出的数据依次添加到JSON数组中
for (EomcJxpjlhSheBeipcctEntity e : equList) {
JSONObject resIndex = new JSONObject();
resIndex.put("equCode2", e.getEquCode2());
resIndex.put("equName2", e.getEquName2());
resIndex.put("equTypeName", e.getEquTypeName());
resArray.add(resIndex);
}
//total为全部数据条数,bootstrap table可自动获取后端传来的total数据
res.put("total", total);
//rows为分页查询出的数据，bootstrap table可自动解析该数据
res.put("rows", resArray);
return res;
}
}
效果如下：
因篇幅问题不能全部显示，请点此查看更多更全内容