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所接受的格式

 

 

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值