在用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; }
這樣,頁面顯示正常,分頁功能搞定。