zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    盒子垂直水平居中
    Sahi (2) —— https/SSL配置(102 Tutorial)
    Sahi (1) —— 快速入门(101 Tutorial)
    组织分析(1)——介绍
    Java Servlet (1) —— Filter过滤请求与响应
    CAS (8) —— Mac下配置CAS到JBoss EAP 6.4(6.x)的Standalone模式(服务端)
    JBoss Wildfly (1) —— 7.2.0.Final编译
    CAS (7) —— Mac下配置CAS 4.x的JPATicketRegistry(服务端)
    CAS (6) —— Nginx代理模式下浏览器访问CAS服务器网络顺序图详解
    CAS (5) —— Nginx代理模式下浏览器访问CAS服务器配置详解
  • 原文地址:https://www.cnblogs.com/Steven5007/p/9859894.html
Copyright © 2011-2022 走看看