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