Recently, the company needs to build an alarm page function, which requires paging. After checking a lot of information, I found that PageHelper is more suitable.
So I wrote a tutorial on using PageHelper from scratch, and also recorded what I did during the busy day.
1. First, you need to add the dependency of PageHelper to the project. Here I use Maven to add
com.github.pagehelper pagehelper 4.1.6
2. Add the configuration of pagehelper in the mybatis configuration file
3. Add a PageBean class to store paging information
public class PageBeanimplements Serializable { private static final long serialVersionUID = 1L; private long total; //总记录数 private List list; //结果集 private int pageNum; //第几页 private int pageSize; //每页记录数 private int pages; // 总页数 private int size; //当前页的数量<=pageSize public PageBean(List list){ if (list instanceof Page){ Page page = (Page ) list; this.pageNum = page.getPageNum(); this.pageSize = page.getPageSize(); this.total = page.getTotal(); this.pages = page.getPages(); this.list = page; this.size = page.size(); } } public long getTotal() { return total; } public void setTotal(long total) { this.total = total; } public List getList() { return list; } public void setList(List list) { this.list = list; } public int getSize() { return size; } public void setSize(int size) { this.size = size; } public int getPageNum() { return pageNum; } public void setPageNum(int pageNum) { this.pageNum = pageNum; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getPages() { return pages; } public void setPages(int pages) { this.pages = pages; } }
The following is the business logic code
4. First start from the mapper.xml file, operate the database sql, check Output the data we need
5. Mapper’s interface method
public ListselectallList(AlarmParamModel model);
##6.service’s interface method
Datagrid selectallList(AlarmParamModel model,int pageNum, int pageSize);7.service implementation class What needs to be noted here is the main logic of paging. pageNum represents the page number, pageSize represents the number displayed on each page, the startPag method is the initial page, the orderBy method is to sort the data by a certain field, here I use the descending order (desc) of occr_time
public Datagrid selectallList(AlarmParamModel model,int pageNum, int pageSize){
PageHelper.startPage(pageNum, pageSize);
PageHelper.orderBy("occur_time desc");
List list = this.alarmMgrMapper.selectallList(model);
PageInfo pageInfo = new PageInfo(list);
Datagrid datagrid = new Datagrid(pageInfo.getTotal(),pageInfo.getList());
return datagrid;
}
8. Notice that I use a Datagrid class here, which is used to transmit data to the front desk, including total (total number) and rows (data) public class Datagrid {
private long total;
private List rows = new ArrayList<>();
public Datagrid() {
super();
}
public Datagrid(long total, List rows) {
super();
this.total = total;
this.rows = rows;
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
}
9. Start writing the controller layer and call the method written before It should be noted here that offset and limit are the page number and each page passed from the front desk The displayed quantity is different from the offset and limit of bootstraptable. The offset represents the offset, that is, if 10 pieces of data are displayed on each page, then the offset represented by the second page in bootstrap is 10, the first page and the third page. They are 0 and 20 respectively. And the offset here refers to the pageNum. @RequestMapping(value = "/AlarmInfo/list", method = {RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public Datagrid alarmInfo(AlarmParamModel model,@RequestParam(value="offset",defaultValue="0",required=false)Integer pageNum,
@RequestParam(value="limit",defaultValue="10",required=false)Integer pageSize)
{
Datagrid datagrid = this.alarmMgrService.selectallList(model,pageNum, pageSize);
return datagrid;
}
10. Now the front-end request can obtain the background data and paginate it. I will post the configuration of my front-end bootstrap table$('#tb_departments').bootstrapTable({
url: 'http://10.1.234.134:8088/api/AlarmInfo/list', //请求后台的URL（*）
method: 'get', //请求方式（*）
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
onlyInfoPagination:true, //设置为 true 只显示总数据数，而不显示分页按钮。需要 pagination='True'
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
checkboxHeader:true, //add
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: true,
detailFormatter:detailFormatter ,
paginationHAlign:"left",
paginationDetailHAlign:"right",
Here I did not use the paging buttons that come with bootstrap. I wrote the button group myself using jq. I will post the button code in the next article. This way the level of customization will be higher~ You can also directly use the paging button of the bootstraptable subband to change the configuration.