在用jqgrid做一个表格展示时,无论数据多少,页面总显示“共1页”,导致无法翻页,看不到全部数据的问题。

困扰一天半,终于解决,网上没怎么看到类似问题,大多数是显示为0页等等其他问题,所以把自己的解决方案记下来方便可能遇到同样问题的人。

因为整体系统是用springMVC搭的,基于annotation,调用了jackson包自动转换数据位json格式,输出到jqgrid页面。

下面是页面jqgrid部分的代码:

 $("#list").jqGrid({
        url: "tradeList",
        datatype: "json",
        mtype: "GET",
        colNames: ["transaction Id", "original Transaction Id", "Trade Date", 
        "transaction Status", "record Status", "Quantity", "transaction Business Code", 
        "operations" ],
        colModel: [
            { name: "transaction Id", index:"transactionId", jsonmap:"transactionId", width: 50 },
            { name: "original Transaction Id", index:"originalTransactionId", jsonmap:"original Transaction Id", width: 70 },
            { name: "Trade Date", index:"tradeDate", jsonmap:"tradeDate", width: 130, 
            formatter:"date", formatoptions: {srcformat: 'u', newformat: 'm/d/Y  H:i:s',}},
            { name: "transaction Status", index:"transactionStatus", jsonmap:"transactionStatus", width: 80 },
            { name: "record Status", index:"recordStatus", jsonmap:"recordStatus", width: 50 },
            { name: "Quantity", index:"quantity", jsonmap:"quantity", width: 80, align: "right" },
            { name: "transaction Business Code", index:"transactionBusinessCode", 
            jsonmap:"transactionBusinessCode", width: 150},
            { name: "operations", index:"operations", jsonmap:"operations", width: 80 },
        ],
        pager: "#pager",
        rowNum: 5,
        rowList: [5,10, 20, 30],
        sortname: 'transaction Id',
        sortorder: 'asc',
        viewrecords: true,
        caption: "Trade",
    }); 
    $("#list").jqGrid('navGrid','#pager');

 controller层传数据过去的方法代码如下:

@RequestMapping(value = "/tradeList", method = RequestMethod.GET)  
	public @ResponseBody List<Trade> getList(){
		return tradeService.readTradeList();
	}

其中在spring annotation基础上,通过@responseBody和导入的jackson包,将返回的数据列表自动转换为json格式,页面收到的response如下(因太长,未列出完整数据):

[{"transactionId":"1","version":0,"originalTransactionId":"1","transactionChannel":null,"transactionManagementSystem":null,"transactionCategory":"Trade","transactionBusinessCode":"Trade Create","recordStatus":"ACTIVE","transactionStatus":"New","transactionTime":1401073087000,"transactionUserEntryTime":null,"transactionDatabaseEntryTime":null,"transactionEntryUserId":null,"remark":null,"tradeId":null,"orderId":null,"businessLineId":null,"primaryAccountId":null,"primaryBrokerId":null,"versusAccountId":null,"versusBrokerId":null,"washAccountId":null,"introducerAccountId":null,"tradeDate":1401073087000,"settlementDate":null,"side":null,"productId":null,"exchangeId":null,"tradingCurrencyId":null,"settlementCurrencyId":null,"quantity":100.00,"price":null,"consideration":null,"clearingEntityId":null,"settlementEntityId":null,"lastSettledDate":null,"settledQuantity":null,"settledAmount":null,"salesId":null,"traderId":null,"locationId":null,"tradeStatus":null,"commissionRate":null,"commission":null,"stampDuty":null,"levy":null,"tradingFee":null,"accruedInterest":null,"gst":null,"iftt":null,"trailerFee":null,"figurationList":[]},
{"transactionId":"10",……]

前台页面接受到了数据,并且按每页5条显示了前5条数据,但是无法翻页查看后面的数据,而pager右边的数据总条数是对的,只有总页数为1,导致无法翻页。

经过各种google以及查看jqgrid的document,终于找到了解决办法。下面说明。

jqgrid接受json数据的格式是这样的:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...  ]}

其中“total”表示总页数,“page”表示当前请求页,“records”为总的记录条数,“rows”对应数据,即上述数据列表,当然“total”“page”等名字可以进行修改,但是需要对应修改jsonReader。

我们的jqgrid页面一直显示总页数为1,即total值未被设置导致,因此只需修改controller层的代码将total等作为response返回给页面即可,修改后的controller代码如下(其中简单地完成了只返回当前请求页面的数据,其实应该放在dao层做比较高效):

@RequestMapping(value = "/tradeList", method = RequestMethod.GET)  
	public @ResponseBody Map list(@RequestParam("rows") int pageSize,
			@RequestParam("page") int pageNo){
		int total;//页面数
		Map rows = new HashMap();
		//暂时一次读入全部数据
		tradeList = tradeService.readTradeList();
		//记录总条数
		int recordNum = tradeList.size();
		//当前页面起止页码数
		int beginNo, endNo;
		beginNo = pageSize*(pageNo-1);
		endNo = beginNo+pageSize-1;
		if(endNo>=recordNum){
			endNo = recordNum-1;
		}
		//endNo = beginNo+pageSize-1>=recordNum?recordNum-1:beginNo+pageSize-1;
		//当前页面请求的tradelist
		List<Trade> tempTradeList = new ArrayList<Trade>();
		for(int i=beginNo; i<=endNo; i++){
			tempTradeList.add(tradeList.get(i));
		}
		
		total = (int) Math.ceil((double)recordNum/pageSize); 
		rows.put("total", String.valueOf(total));
		rows.put("records", String.valueOf(recordNum));
		rows.put("rows", tempTradeList);
		return rows;
	}

这样,页面显示正常,分页功能搞定。