第一步创建分页DataGrid
<table id="dg"> <thead> <tr> <th data-options="field:'username',width:100">username</th> <th data-options="field:'password',width:100,editor:'textbox'">password</th> </tr> </thead> </table> <script type="text/javascript"> $(document).ready(function() { $("#dg").datagrid({ title : "用户管理", singleSelect : true, url : '${pageContext.request.contextPath}/manager_userData', toolbar : "#tb", width : "100%", height : "100%", pagination : true, //开启分页 onClickCell : onClickCell, }); $("#dg").datagrid("getPager").pagination({ pageSize : 3, //设置页面大小 pageList : [3, 10, 15, 20], //用户自定义页面大小数组 beforePageText : '第', afterPageText : '共{pages}页', displayMsg : '当前显示 {from} 到 {to} ,共{total}记录', }); }); </script>
DataGrid自带属性
1、pages:共有多少页
2、from:当前页面第一条记录
to:当前页面最后一条记录
3、total:总共多少条记录
4、rows:记录
DataGrid控件会根据后台传过来的JSON数据,自行设置这些属性
{"total":6,"pages":1,"rows":[{"addr":"","code":"","email":"","name":"","password":"aaa","phone":"","sex":"","state":0,"uid":2,"username":"aaa"},{"addr":"","code":"","email":"","name":"","password":"22","phone":"","sex":"","state":0,"uid":3,"username":"22"}]}
第二步后台操作
1、Hibernate获取分页数据(dao)
public List<User> findPagerUser() { Criteria criteria = this.getSession().createCriteria(User.class); criteria.setFirstResult(1); criteria.setMaxResults(2); List<User> list = criteria.list(); if (list != null && list.size() > 0) { return list; } return null; }
2、分页数据封装
import java.util.List; /** * 定义一个分页对象 */ public class Pager { private int page;// 当前页码 private int pageTotal;// 总页码 private int rows;// 每页显示条数 private int rowsTotal;// 总条数 private List<?> list;// 返回的数据集合 public int getPage() { return page; } public void setPage(int page) { this.page = page; } public int getPageTotal() { return pageTotal; } public void setPageTotal(int pageTotal) { this.pageTotal = pageTotal; } public int getRows() { return rows; } public void setRows(int rows) { this.rows = rows; } public int getRowsTotal() { return rowsTotal; } public void setRowsTotal(int rowsTotal) { this.rowsTotal = rowsTotal; } public List<?> getList() { return list; } public void setList(List<?> list) { this.list = list; } @Override public String toString() { return "Pager [list=" + list + ", page=" + page + ", pageTotal=" + pageTotal + ", rows=" + rows + ", rowsTotal=" + rowsTotal + "]"; } }
3、构造JSON数据传给客户端(action)
public String getData() throws IOException { HttpServletResponse response = ServletActionContext.getResponse(); Pager pager = userService.findPagerUser(page, rows); if (pager.getList().size() > 0) { JsonConfig config = new JsonConfig(); config.setExcludes(new String[] { "comments" }); JSONArray json = JSONArray.fromObject(pager.getList(), config); JSONObject jsonObject = new JSONObject(); jsonObject.put("total", pager.getRowsTotal()); jsonObject.put("pages", pager.getPageTotal()); jsonObject.put("rows", json); response.getWriter().append(jsonObject.toString()); } return null; }
JSON参考:JSON入门