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

  • 相关阅读:
    MYSQL触发器的使用
    数据库与信息系统经典例题
    【自考】数据结构第六章查找,期末不挂科指南,第10篇
    hdfs/hbase 程序利用Kerberos认证超过ticket_lifetime期限后异常
    mysql必知必会--MySQL简介
    启用CentOS6.5 64位安装时自带的MySQL数据库服务器
    com.mysql.jdbc.Driver 和 com.mysql.cj.jdbc.Driver的区别 serverTimezone设定
    redis的发布订阅
    使用ClouderaManager管理的HBase的RegionServer无法启动(启动失败)的问题
    mysql 的root 用户无法授权,navicat 远程授权提示1044解决方案
  • 原文地址:https://www.cnblogs.com/Steven5007/p/9859894.html
Copyright © 2011-2022 走看看