問題: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參數具體屬性要看服務端如何封裝返回結果集,這裏僅作示例