在用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; }
这样,页面显示正常,分页功能搞定。