加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

bootstrap table 分页显示问题

发布时间:2020-12-17 20:48:17 所属栏目:安全 来源:网络整理
导读:1.bootstrap-table客户端分页 客户端分页 的数据源可以是后台服务器端传递过来(一次性获取,即获取所有你需要的数据),点击页码不再请求后台,利用页面缓存分页;cache : true,//是否使用缓存,默认为true $(‘#TableId‘ ).bootstrapTable({ url : ‘/adjustQ

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‘,{title: ‘单据编号‘,field: ‘processCode‘,{title: ‘调整组织‘,field: ‘applyOrganization‘,{title: ‘调整部门‘,field: ‘applyDepartment‘,{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,//记录数可选列表
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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读