jqGrid 后台分页 与 前端分页

先说后端分页，主要是利用sql语句查询时，用游标 offset , limit 来控制。
那么页面js请求，如何将这两个关键参数，映射到controller的modal中呢。

下面是参数映射的核心地方 ， 注意 prmNames 这个参数，定义了 jsGrid 中的参数 映射到controller中modal 的参数名, pageNum和 limit是 我们modal中的 成员变量名，分别对应jqGrid 中的 page 和 rows。而modal 中 offset 可以通过 计算得来 ，比如 offset = (pageNum-1)*limit 。

prmNames : {
            page:"pageNum",  // 页码（第几页）
            rows:"limit",    //每页多少条数据
            order: "order"
        }

这样请求重要的参数就能顺利映射过去。
那么 controller中的 查询结果 怎么回到页面呢， 请看 jsonReader 这个参数，此参数定义了 返回对象的 格式，。
我们的数据应该长这样：
{"data":[{....}, {....}] ,
"currPage": 2 ,
"totalPage": 10,
"totalCount": 231
}
如何构建上面json结构的数据， 相比大家都会，就不废话了。

jsonReader : {
            root: "pager.data",        // 数据列表   
            page: "pager.currPage", // 当前第几页
            total: "pager.totalPage", // 总共多少页
            records: "pager.totalCount"  // 总记录数
 },

完整的js代码块如下：

$("#jqGrid").jqGrid({
        url : 'api/list',
        mtype: 'post',
        datatype : "json",
        colModel : [
            { label: '用户数', name: 'fa', width: 90, sortable: false},
            { label: '话单数量', name: 'dfCnt', width: 100, sortable: false, key: true},
            { label: '金额', name: 'sFee', width: 80, sortable: false,     
                                              formatter:function(value, options, row){
                return value ?  value.toFixed(2) : '-' ;
            }}
        ],
        viewrecords : true,
        height : 385,
        rowNum : 10,
        rowList : [ 10, 30, 50 ],
        rownumbers : false,
        rownumWidth : 25,
        autowidth : true,
        multiselect : false,
        pager: "#jqGridPager",
        footerrow:true, //加这个标识
        jsonReader : {
            root: "pager.list",
            userdata:"sumData",
            page: "pager.currPage",
            total: "pager.totalPage",
            records: "pager.totalCount"
        },
        prmNames : {
            page:"pageNum", 
            rows:"limit", 
            order: "order"
        }   
});

后端controller代码：

// controller 方法代码块，仅供参考
@PostMapping("/list")
@ResponseBody
public Response_2 list(CubeBill cubeBill)
{
        //查询记录总数
       Integer count = cubeBillService.countCubeBills(cubeBill);    
    //查询分页详情
        List list = cubeBillService.collectCubeBillPage(cubeBill);
        // 封装 data ，currPage，totalPage， totalCount 的模型对象
        PageVO pager = new PageVO(list, count, cubeBill.getLimit(), 
                                                               cubeBill.getPageNum());   
        Response_2 res = Response_2.getNew().success("pager", pager);
        res.put("sumData", sumCB);
        return res;
}

// 这里是定义的返回类型 Response_2的内容
public class Response_2 extends HashMap {

    private Response_2() { }
    
    public static Response_2 getNew(){
        return new Response_2();
    }
    
    public Response_2 success(String message) {
        this.put("status", "0");
        this.put("message", message);
        return this;
    }
    
    public Response_2 success(String key, Object value) {
        this.put(key, value);
        return this;
    }
    
    public Response_2 fail() {
        this.put("status", "1");
        this.put("message", "系统错误");
        return this;
    }
    
    public Response_2 fail(String message) {
        this.put("status", "1");
        this.put("message", message);
        return this;
    }
    
    public Response_2 fail(String key, Object value) {
        this.put("status", "1");
        this.put(key, value);
        return this;
    }
}

对 jqGrid 中的参数感兴趣的可以看这里
http://blog.mn886.net/jqGrid/ ，这里面有详细的初始化参数解释。

============================分割线====下面是前端分页==============
上面后端分页，适用于 查询的结果集比较大的情况， 对于单次查询耗时较长，且结果集不是特别大的，习惯用一次全部查出，前端分页。

可以貌似 jqGrid 对于这种情况，支持不是特别好，找了好久没找到解决办法，目前是这样解决的。
1.将datatype设置为 'local'， datatype: 'local',
2.重写onPaging方法，这个方法是 翻页事件 触发函数。
3.将jsonReader改成localReader , 这一步，我单独抽成了一个方法

[图片上传中...(image.png-8d12f5-1544754871061-0)]

重写入下，：

 onPaging:function(pageBtn){ //翻页实现 

            var records = $("#jqGrid").getGridParam('records');//获取返回的记录数
            var page = $("#jqGrid").getGridParam('page');//获取返回的当前页
            var rowNum = $("#jqGrid").getGridParam('rowNum'); //获取显示配置记录数量
            var total = Math.ceil(records/rowNum); //$("#jqGrid").getGridParam('total');//获取总页数         
            if(pageBtn==="next" && page1){
                page = parseInt(page)-1;
            }
            if(pageBtn==="last"){
                page = total;
            }
            if(pageBtn==="first"){
                page = 1;
            }
            //这里的 loadLoalData( );是自定义的一个js方法。重复利用
            loadLocalData(page);
        }

loadLocalData()方法

function loadLocalData(page){// page参数，显示 第几页
    var rowNum = $("#jqGrid").getGridParam('rowNum'); //获取显示配置记录数量          
    var mydata = {};
              mydata.rows = vm.q.savedData;
          mydata.page = page;
          mydata.records = mydata.rows.length;
          mydata.total = Math.ceil(mydata.records/rowNum);

          if(!mydata.rows || mydata.rows.length ==0 ){
              $("#jqGrid").jqGrid("clearGridData");
          } 
            
         $("#jqGrid").jqGrid("setGridParam", {
            data: mydata.rows,
            localReader:{              
                rows:function(object){ return mydata.rows ;},
                page:function(object){ return mydata.page ;},
                total:function(object){ return mydata.total ;},
                records:function(object){ return mydata.records ;},
                    repeatitems : false 
                }
        }).trigger("reloadGrid");
}

完整 的 js 代码块大致这样，如下：

$("#jqGrid").jqGrid({
        datatype: 'local',
        colModel : [            
            { label: '用户数', name: 'fa', width: 90, sortable: false},
            { label: '话单数量', name: 'dfCnt', width: 100, sortable: false, key: true},
            { label: '金额', name: 'sFee', width: 80, sortable: false, formatter:function(value, options, row){
                return value ?  value.toFixed(2) : '-' ;
            }}
        ],
        viewrecords : true,
        height : 385,
        rowNum : 10,
        rowList : [ 10, 30, 50 ],       
        autowidth : true,       
        pager: "#jqGridPager",

        onPaging:function(pageBtn){ //翻页实现 
            console.log(pageBtn);
            var records = $("#jqGrid").getGridParam('records');//获取返回的记录数
            var page = $("#jqGrid").getGridParam('page');//获取返回的当前页
            var rowNum = $("#jqGrid").getGridParam('rowNum'); //获取显示配置记录数量
            var total = Math.ceil(records/rowNum); //$("#jqGrid").getGridParam('total');//获取总页数         
            if(pageBtn==="next" && page1){
                page = parseInt(page)-1;
            }
            if(pageBtn==="last"){
                page = total;
            }
            if(pageBtn==="first"){
                page = 1;
            }
            
            loadLocalData(page);
        }    
});

不知道是否表达清楚了，欢迎大家一起讨论jqGrid的用法。