SpringMVC+JPA+EasyUI 服務端分頁

問題:SpringMVC+JPA支持分頁,easyui也支持服務端分頁,但用JPA封裝的VO同easyui交互時卻不能順利分頁。

方案:通過easyui中datagrid的onSelectPage事件來捕獲分頁,並灌錄數據。


一. 觸發方法JS

function SearchTable(_pageNumber, _pageSize){
	var dg =$('#table');  
	var pager =dg.datagrid('getPager');  
  
	//查詢條件寫在這裏,需附帶頁碼信息
	$.post('${ctx}/action/list', {page:_pageNumber-1,size:_pageSize}, function(data) { 

		$('#table').datagrid('loadData', data.content);
	
		//注意此處從數據庫傳來的data數據有記錄總行數的total列  
		var _total = data.totalElements;  
		pager.pagination({  
			//更新pagination的導航列表各參數  
			total: _total,//總數  
			pageSize: _pageSize,//行數  
			pageNumber: _pageNumber//頁數  
		});  
		   	
	});  
}



二. 定義事件,默認刷新

$(document).ready(function() {
    $('#table').datagrid('getPager').pagination({  
        pageSize: 10, //每頁顯示的記錄條數,默認爲10    
        pageList: [10, 15, 20, 25], //可以設置每頁記錄條數的列表  
        onSelectPage: function(pageNumber, pageSize) {  
        	SearchTable(pageNumber, pageSize);//每次更換頁面時觸發更改   
        }  
    });  
    //默認刷新
    SearchTable(1,10);
});



三. 後臺請求

@ResponseBody
@RequestMapping(value = { "list", "" })
public Page<VO> list(@PageableDefault(value = 15, sort = { "id" }, direction = Sort.Direction.DESC) Pageable pageable, Model model) {
	...
	return vo;
}


data參數具體屬性要看服務端如何封裝返回結果集,這裏僅作示例


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