jqgrid接受json數據,分頁總頁數顯示1頁

在用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;
	}

這樣,頁面顯示正常,分頁功能搞定。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章