springboot-bootstrapTable+PageHelper+mybatis服务端分页

需求描述+结构介绍

根据领导要求，翻出2020年的项目代码，给它加个分页。

项目在前端使用BootstrapTable展示数据，后端使用PageHelper和mybatis，需要采用服务端分页的做法。

最终效果：

前端

(function ($){
	$.extend({
		tableUtil:{
			init: function(options){
				$.tableUtil._option = options;
                $('#tablelist').bootstrapTable({
                    url: options.url,
                    method: 'post',                      //请求方式（*）
                    toolbar: '#toolbar',                //工具按钮用哪个容器
                    cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    contentType: "application/x-www-form-urlencoded",       
                    ...
					// 以下与分页相关，重要
					queryParamsType: '',
                    pagination: true,                   //是否显示分页（*）
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                       //初始化加载第一页，默认第一页
                    pageSize: 10,                       //每页的记录行数（*）
                    pageList: [10, 20, 30, 50, 100],        //可供选择的每页的行数（*）
                    //queryParams: $.tableUtil.queryParams,  // 传参
                    ...
                    columns: options.columns,
			},
		},
	});
})(jQuery)

服务端分页的时候，如果只需要传递pageNumber和pageSize，那没必要写queryParams。那个只适用于需要额外传参，比如查询的时候。

这个options是定制的，我单独写在不同的模板中了，比如某个模板的内容为：

</script>
    $(function () {
        var options = {
            url: "/resources/list",
            columns: [{
                checkbox: true
            }, {
            	field: 'No.',
            	title: '编号',
            	formatter: function (value, row, index) {
            		// index+1是每页前面的标号是1~pagesize+1
            		//return index + 1;
            		//获取每页显示的数量
                    var pageSize = $('#tablelist').bootstrapTable('getOptions').pageSize;
                    //获取当前是第几页
                    var pageNumber = $('#tablelist').bootstrapTable('getOptions').pageNumber;
                    //返回序号，注意index是从0开始的，所以要加上1
                    return pageSize * (pageNumber - 1) + index + 1;
            	}
            }, {
                field: 'name',
                title: '资源名',
                editable: true
            },
			...
			],
            modalName: "资源"
        }
        //1.初始化Table
        $.tableUtil.init(options);
    });
</script>

注意编号的写法。

后端

controller

@RequiresPermissions("resources")
@PostMapping("/list")
public PageResult getAll(ResourceConditionVO vo, @RequestParam(value = "pageNumber",defaultValue = "1")Integer pageNumber, @RequestParam(value = "pageSize",defaultValue = "100")Integer pageSize) {
    vo.setPageSize(pageSize);
    vo.setPageNumber(pageNumber);
	PageInfo<Resources> pageInfo = resourcesService.findPageBreakByCondition(vo);
    return new PageResult(pageInfo.getTotal(), pageInfo.getList());;
}

controller此时可以接收到前端传回的参数。ResourceConditionVO和PageResult的定义在后面。

service

public PageInfo<Resources> findPageBreakByCondition(ResourceConditionVO vo) {
    PageHelper.startPage(vo.getPageNumber(), vo.getPageSize());
    // 这里的mapper不再赘述。mapper里不需要写limit之类的，pageHelper会自动分页，改写sql
    List<SysResources> sysResources = resourceMapper.findPageBreakByCondition(vo);
    PageInfo bean = new PageInfo<SysResources>(sysResources);
    return bean;
}

注意，只有紧跟在PageHelper.startPage方法后的第一个Mybatis的查询（Select）方法会被分页。

entity

ResourceConditionVO的内容非常简单：

@Data
@EqualsAndHashCode(callSuper = false)
public class ResourceConditionVO extends BaseConditionVO {
    private String type;
}

BaseConditionVO则包含pageNumber和pageSize属性，以及其他跟订单相关的属性。

@Data
@EqualsAndHashCode(callSuper = false)
public class BaseConditionVO {
    public final static int DEFAULT_PAGE_SIZE = 10;
    public final static int DEFAULT_PAGE_NUMBER = 1;
    public int pageNumber = 1;
    public int pageSize = 10;
    ...

    public int getPageSize() {
        return pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE;
    }
    
    public void setPageSize(Integer pageSize) {
    	this.pageSize = pageSize;
    }
    
    public int getPageNumber() {
    	return pageNumber > 0 ? pageNumber : DEFAULT_PAGE_NUMBER;
    }
    
    public void setPageNumber(Integer pageNumber) {
    	this.pageNumber = pageNumber;
    }
}

PageResult

@Data
@EqualsAndHashCode(callSuper = false)
public class PageResult {
    private Long total;
    private List rows;

    public PageResult(Long total, List rows) {
        this.total = total;
        this.rows = rows;
    }

    public PageResult() {
    }
}