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); }
效果展示
点击下一页
相关文章推荐
- 实例:SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能
- easyui datagrid列实现动态拖拽列功能
- Jquery easyUI—datagrid数据表修改功能实现
- 以较少代码实现DataGrid的排序,翻页,删除等功能 【1】
- EasyUI datagrid实现翻页保持checkbox状态
- EasyUI datagrid实现翻页客户端保存checkbox状态
- easyui-edatagrid.js实现回车键结束编辑功能
- 以较少代码实现DataGrid的排序,翻页,删除等功能【2】
- zclip结合easyui实现复制datagrid每行特定单元格数据的功能
- 一个基于thinkphp 的 easyui datagrid 组件查询功能的实现
- Spring Data Jpa - EasyUi Datagrid 分页简单实现(一)
- easyUI..关于datagrid实现追加一行做统计功能
- easyui-edatagrid.js实现回车键结束编辑功能
- easyui Datagrid+searchbox 实现搜索功能
- 实例:SSH结合Easyui实现Datagrid的批量删除功能
- EasyUI DataGrid 实现单行/多行编辑功能
- easyui的datagrid用js插入数据等编辑功能的实现
- easyui-edatagrid.js实现回车键结束编辑功能的实例
- 实例:SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能.
- EasyUI DataGrid使用formatter属性实现自定义功能