• 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

  • 相关阅读:
    Apache Commons Fileupload 反序列化漏洞分析
    Linux下安装python3.6
    使用salt-stack指定IP添加系统用户为root的权限
    virt-install创建虚拟机并制作成模板
    virsh console 登录CentOS7系统
    Cobbler本机使用VM装机配置方法
    Cobbler自动化部署
    调用python脚本报错/usr/bin/env: python : No such file or directory
    启动keepalived报错(VI_1): received an invalid passwd!
    rsync+sersync实现数据实时同步
  • 原文地址:https://www.cnblogs.com/Steven5007/p/9859894.html
Copyright © 2020-2023  润新知