EasyUI datagrid SpringMVC JPA 翻页功能实现

前台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);

	}

效果展示

点击下一页