bootstrap table 分頁顯示問題

1.bootstrap-table客戶端分頁

客戶端分頁的數據源可以是后台服務器端傳遞過來（一次性獲取，即獲取所有你需要的數據),點擊頁碼不再請求后台,利用頁面緩存分頁;cache : true, //是否使用緩存，默認為true

$('#TableId').bootstrapTable({
                            url : '/adjustQueryController/getOAbudgetList.json', //請求后台的URL（*）
                            method: 'GET', 
                            sidePagination : "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
                            pagination : true, //是否顯示分頁（*）
                            queryParams : queryParams, //分頁
                            pageSize : 10, //每頁顯示的記錄數
                            pageNumber : 1, //當前第幾頁
                            pageList : [ 10, 25, 50, 100 ], //記錄數可選列表
                            responseHandler: function(data){
                                return data.rows;  //約定rows
                            }, 
                            columns : [
                                 {checkbox : true}, 
                                 {title: '調整類型', field: 'adjustType', align: 'center'},
                                 {title: '申請日期', field: 'applyDate', align: 'center'},
                                 {title: '單據編號', field: 'processCode', align: 'center'},
                                 {title: '調整組織', field: 'applyOrganization', align: 'center'},
                                 {title: '調整部門', field: 'applyDepartment', align: 'center'},
                                 {title: '是否涉及人力', field: 'flag',  align: 'center'}
    ]
});

　　@RequestMapping(value = "/getOAbudgetList", method = { RequestMethod.GET })
    public String getOAbudgetList(HttpServletRequest request, HttpServletResponse response){
        String processCode = request.getParameter("processCode");
        String adjustType = request.getParameter("adjustType");
        String adjOrg = request.getParameter("adjOrg");
        String adjDepart = request.getParameter("adjDepart");
        String adjSubject = request.getParameter("adjSubject");
        List<Map<String, String>> pageList = oaAdjustQueryService.findPageList(processCode,adjustType,adjOrg,adjDepart,adjSubject);
        int total = pageList.size();
        String jsonStr = JSONArray.fromObject(pageList).toString();
        String jsonString="{\"total\":"+total+",\"rows\":"+jsonStr+"}";   //約定rows return jsonString;
    }

2.bootstrap-table服務端分頁

 服務端分頁的數據源是后台服務器端傳遞過來的,每點擊一次頁碼,將page、size發送給后台查詢,返回頁面數據

method: 'POST', 
contentType : "application/x-www-form-urlencoded",   //必須有
sidePagination : "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pagination : true, //是否顯示分頁（*）
queryParams : queryParams, //分頁
pageSize : 10, //每頁顯示的記錄數
pageNumber : 1, //當前第幾頁
pageList : [ 10, 25, 50, 100 ], //記錄數可選列表
queryParams : queryParams, //分頁參數
responseHandler : responseHandler,//響應數據
cache : false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）,區別客戶端分頁

function queryParams(params) {
        var batchId=[[${batchId}]]; //thymeleaf 頁面獲取單個數據
        var str = {
            "page" : this.pageNumber,
            "pageSize" : this.pageSize,  //需要傳遞page、size
            "filter" : {
                "filters" : [{
                    "field" : "budgetBatchId",
                    "value" : batchId
                }]
            }
        };
        var baseData = JSON.stringify(str);
        var param = {
            models : baseData
        }
        return param;
    }

    function responseHandler(res) {  //spring data JPA中findAll()條件查詢分頁返回
            if (res) {
                return {
                    "rows" : res.list,
                    "total" : res.total  
                };
            } else {
                return {
                    "rows" : [],
                    "total" : 0
                };
            }
        };

------------------------

學習鏈接: https://blog.csdn.net/mhmyqn/article/details/25561535