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

  • 相关阅读:
    上传文件
    vue 动态数据请求
    Layui——layerjs 用法汇总(持续更新)
    以插入排序为例子带你彻底理解算法中的时间复杂度和各种渐进符号
    flappy pig小游戏源码分析(4)——核心pig模块(未完待续)
    flappy pig小游戏源码分析(3)——解剖util
    flappy pig小游戏源码分析(2)——解剖option
    flappy pig小游戏源码分析(1)——主程序初探
    Express细节探究(1)——app.use(express.static)
    部分常用Express方法详解
  • 原文地址:https://www.cnblogs.com/Steven5007/p/9859894.html
Copyright © 2011-2022 走看看