bootstrap table 分页显示问题 - Steven5007

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