您的位置:首页 > 编程语言 > Java开发

EasyUI datagrid SpringMVC JPA 翻页功能实现

2017-07-16 15:14 351 查看
前台JQ

$('#userGrid').datagrid({
title:"用户信息表",
//url : $('#ctx').val()+'/user/getUser',
width: 948,
pagination : true,
rownumbers : true,
loadMsg: '数据正在加载,请耐心的等待...' ,
idField:'userCode',
striped:true,
columns : [ [ {
width : '100',
title : '员工姓名',
field : 'userName',
sortable : true
}, {
width : '100',
title : '员工工号',
field : 'userCode',
sortable : true
},{
width : '60',
title : '状态',
field : 'status',
sortable : true
},{
width : '140',
title : '开始日期',
field : 'startDate'
},{
width : '140',
title : '结束日期',
field : 'endDate',
sortable : true
}, {
width : '140',
title : '类型',
field : 'type',
sortable : true
}, {
width : '100',
title : '创建者',
field : 'creator',
}, {
width : '140',
title : '创建时间',
field : 'createTime',
sortable : true
}] ],
});
// 加载数据
fLoadData(1,10);

// Pagination(分页)对象
var page = $('#userGrid').datagrid('getPager');
if (page) {
$(page).pagination({
onBeforeRefresh : function() {

// alert('before refresh');
},
// 刷新
onRefresh : function(pageNumber, pageSize) {
fLoadData(pageNumber, pageSize);
},
onChangePageSize : function() {
},
// 翻页
onSelectPage : function(pageNumber, pageSize) {
fLoadData(pageNumber, pageSize);
}
});
}
加载数据方法

/**
* 加载数据
*
* @param pageNumber
* @param pageSize
*/
function fLoadData(pageNumber,pageSize){

$.ajax({
type:"GET",
url:$('#ctx').val()+'/user/getUser',
data:{"pageNumber":pageNumber,"pageSize":pageSize},
success:function (data){
$('#userGrid').datagrid('loadData', data.content); //将数据绑定到datagrid
// 分页信息
var pg = $('#userGrid').datagrid('getPager');
if(pg)  {
$(pg).pagination({
total:data.totalElements,
pageNumber:pageNumber,
});
}
}
});
}
后台Java代码
@RequestMapping("/getUser")
@ResponseBody
public Page<User> getUser(HttpServletRequest request, HttpServletResponse response,Pageable pageable) {
int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));
int pageSize = Integer.parseInt(request.getParameter("pageSize"));
pageable = new PageRequest(pageNumber-1,pageSize);
return userService.getUser(pageable);

}


效果展示



点击下一页

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: