bootstrapTable后端分页问题

       这次用到bootstrapTable分页，只使用前端分页的话，数据量大会特别影响性能，话不多说直接上代码，如果有错误欢迎指正。

前台：

$('#mytab').bootstrapTable({
        url: '/manage/getModeldata',
        method:"POST",
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        json: 'callback',
        pageNumber: 1, //初始化加载第一页
        toolbar: "#toolbar",//工具按钮用哪个容器
        sidePagination: "server",//分页方式，客户端分页client服务端分页server
        uniqueId: "ID",
        pageSize: "6",
        pagination: true, // 是否分页
        sortable: true, // 是否启用排序
        //showRefresh: true,//刷新按钮
        queryParamsType:'', // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber

        queryParames:queryParamsByBegin,// 直接把pageSize,pageNumber，调用queryParamsByBegin函数

        columns: [
            {
                field: 'SerialNumber',
                title: '序号',
                width: 80,
                formatter: function (value, row, index) {
                    return index+1;
                }
            },
            {field: 'id', title: 'id',align: 'center',visible:false },
            {field: 'modelname', title: '名称',align: 'center',width: 80},
            {field: 'firstname', title: '一类名称',align: 'center',width: 80},
            {field: 'secondname', title: '子类名称',align: 'center',width: 80},
            {
                title: '操作',
                field: 'id',
                align: 'center',
                valign: 'middle',
                formatter: option1

            },
            {
                title: '查看',
                field: 'id',
                align: 'center',
                valign: 'middle',
                formatter: option2

            }

        ]

    });

    function queryParamsByBegin(params){
        return{
            pageSize: params.pageSize,
            pageNumber: params.pageNumber
        }
    }

    function option1(value, row) {
        var htm = '<button class="btn btn-primary" id="delOne" ' +
            ' onclick="delOne(\''+row.id+'\')">删除</button>&nbsp;<button class="btn btn-primary"  onclick="modify(\''+row.id+'\')">修改</button>'
        return htm;
    }
    function option2(value, row) {
        var htm = '<button class="btn btn-primary" id="seeOne" ' +
            ' onclick="see(\''+row.id+'\')">查看</button>'
        return htm;
    }
           

这里我对后台的请求是getModeldata，参数有pageNumber, pageSize  页数和每页显示的记录数。

此时后台返回的值应是bootstrapTable规定的JSON格式值。

如果使用后台分页则返回的值应是:{total:0,rows:[]}  分别为总条数和数据

如果是前端分页就是基础的格式就可以了

后端：

controller

@ResponseBody
    @PostMapping("getModeldata")
    public Map<String,Object> getModeldata(Integer pageNumber,Integer pageSize,Model model){
        return modelMapService.getAllData(pageNumber,pageSize);
    }
           

service：这里我用的是pagehelper分页插件

@Override
    public Map<String,Object> getAllData(Integer pageNumber,Integer pageSize) {

       
        PageHelper.startPage(pageNumber,pageSize);

        List<AppleModel> appleModelList=appleModelDao.getAll();

        PageInfo<AppleModel> info = new PageInfo<>(appleModelList);
        
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("rows", appleModelList);
        map.put("total", info.getTotal());

        return map;
    }
           

这样就可以了，主要注意一下bootstrapTable所接受的格式