第一步创建分页DataGrid

  1. <table id="dg">
  2. <thead>
  3. <tr>
  4. <th data-options="field:'username',width:100">username</th>
  5. <th data-options="field:'password',width:100,editor:'textbox'">password</th>
  6. </tr>
  7. </thead>
  8. </table>
  9. <script type="text/javascript">
  10. $(document).ready(function() {
  11. $("#dg").datagrid({
  12. title : "用户管理",
  13. singleSelect : true,
  14. url : '${pageContext.request.contextPath}/manager_userData',
  15. toolbar : "#tb",
  16. width : "100%",
  17. height : "100%",
  18. pagination : true,  //开启分页
  19. onClickCell : onClickCell,
  20. });
  21. $("#dg").datagrid("getPager").pagination({
  22. pageSize : 3,    //设置页面大小
  23. pageList : [3, 10, 15, 20],   //用户自定义页面大小数组 
  24. beforePageText : '第',
  25. afterPageText : '共{pages}页',
  26. displayMsg : '当前显示 {from} 到 {to} ,共{total}记录',
  27. });
  28. });
  29. </script>

 DataGrid自带属性

  1、pages:共有多少页

  2、from:当前页面第一条记录

    to:当前页面最后一条记录

  3、total:总共多少条记录

  4、rows:记录

  DataGrid控件会根据后台传过来的JSON数据,自行设置这些属性

  1. {"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)

  1. public List<User> findPagerUser() {
  2. Criteria criteria = this.getSession().createCriteria(User.class);
  3. criteria.setFirstResult(1);
  4. criteria.setMaxResults(2);
  5. List<User> list = criteria.list();
  6. if (list != null && list.size() > 0) {
  7. return list;
  8. }
  9. return null;
  10. }

  2、分页数据封装

  1. import java.util.List;
  2. /**
  3. * 定义一个分页对象
  4. */
  5. public class Pager {
  6.  
  7. private int page;// 当前页码
  8. private int pageTotal;// 总页码
  9. private int rows;// 每页显示条数
  10. private int rowsTotal;// 总条数
  11. private List<?> list;// 返回的数据集合
  12.  
  13. public int getPage() {
  14. return page;
  15. }
  16.  
  17. public void setPage(int page) {
  18. this.page = page;
  19. }
  20.  
  21. public int getPageTotal() {
  22. return pageTotal;
  23. }
  24.  
  25. public void setPageTotal(int pageTotal) {
  26. this.pageTotal = pageTotal;
  27. }
  28.  
  29. public int getRows() {
  30. return rows;
  31. }
  32.  
  33. public void setRows(int rows) {
  34. this.rows = rows;
  35. }
  36.  
  37. public int getRowsTotal() {
  38. return rowsTotal;
  39. }
  40.  
  41. public void setRowsTotal(int rowsTotal) {
  42. this.rowsTotal = rowsTotal;
  43. }
  44.  
  45. public List<?> getList() {
  46. return list;
  47. }
  48.  
  49. public void setList(List<?> list) {
  50. this.list = list;
  51. }
  52.  
  53. @Override
  54. public String toString() {
  55. return "Pager [list=" + list + ", page=" + page + ", pageTotal="
  56. + pageTotal + ", rows=" + rows + ", rowsTotal=" + rowsTotal
  57. + "]";
  58. }
  59. }

  3、构造JSON数据传给客户端(action)

  1. public String getData() throws IOException {
  2. HttpServletResponse response = ServletActionContext.getResponse();
  3. Pager pager = userService.findPagerUser(page, rows);
  4. if (pager.getList().size() > 0) {
  5. JsonConfig config = new JsonConfig();
  6. config.setExcludes(new String[] { "comments" });
  7. JSONArray json = JSONArray.fromObject(pager.getList(), config);
  8.  
  9. JSONObject jsonObject = new JSONObject();
  10. jsonObject.put("total", pager.getRowsTotal());
  11. jsonObject.put("pages", pager.getPageTotal());
  12. jsonObject.put("rows", json);
  13. response.getWriter().append(jsonObject.toString());
  14. }
  15. return null;
  16. }

 JSON参考:JSON入门

EasyUI之DataGrid分页的更多相关文章

  1. EasyUI的datagrid分页

    EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...

  2. easyui的datagrid分页写法小结

    easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 //关闭tab1打开tab2 查询Detail function refundDetail(){ $('#tt').tab ...

  3. EasyUI 中datagrid 分页。

    注释:datagrid分页搞了好几天才完全搞好,网上没完全的资料.明天晚上贴代码. 睡觉.

  4. EasyUI 自定义DataGrid分页

    DataGrid内建分页能力是强大的,它比自定义相对容易.在这个教程,我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮.标记<table id="tt"> ...

  5. EasyUI的DataGrid 分页栏英文改中文解决方案

    (一)分页栏英文改中文解决方案 这个问题其实很简单,就是引入文件jquery-easyui-1.3/locale/easyui-lang-zh_CN.js . 注意这个文件要放在本页js的后面,放在最 ...

  6. Easyui的datagrid结合hibernate实现数据分页

    最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...

  7. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  8. jquery easyui datagrid 分页详解

    由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...

  9. EasyUI DataGrid分页数据绑定

    记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...

随机推荐

  1. VS2015编译问题:模块对于 SAFESEH 映像是不安全的

    严重性 代码 说明 项目 文件 行 禁止显示状态 错误 LNK2026 模块对于 SAFESEH 映像是不安全的. zlibvc C:\MyDirectory\test2\zlib-\contrib\ ...

  2. Android使用命令行操作数据库

    所有的应用程序本地文件都存放在/data/data/目录下 C:\Users\nicole>adb shell * daemon not running. starting it now on ...

  3. clientX、pageX、offsetX、screenX的区别

    这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标) ...

  4. Web 与 Node 基础

    浏览器端发送请求(browser) 浏览器或者模拟发送 http 请求端 服务端处理请求(web) 服务器(使用 node ) 2.1. 使用 Forever 管理程序 2.2. 可以使用 PM2 代 ...

  5. springBoot项目常用maven依赖以及依赖说明

    springBoot项目常用maven依赖以及依赖说明 1:maven-compiler-plugin <build> <plugins> <!-- 指定maven编译的 ...

  6. 关于linux中移动目录和到指定目录和移动目录中的数据到指定目录

    #这里表示将目录node-v12.13.1-linux-x64移动到/usr/local/中重命名为node,所以node目录可以不存在[root@alone ~]# mv node-v12.13.1 ...

  7. 在自定义组件中获取spring底层组件

    要想在自定义组件中获取spring底层的各种组件,只需让自定义组件实现一系列接口即可,这些接口都是Aware的子接口.常见的有: 1. ApplicationContextAware——用于获取IOC ...

  8. VMware 虚拟化编程(12) — VixDiskLib Sample 程序使用

    目录 目录 前文列表 vixDiskLibSample 安装 Sample 程序 Sample 程序使用方法 前文列表 VMware 虚拟化编程(1) - VMDK/VDDK/VixDiskLib/V ...

  9. 阶段1 语言基础+高级_1-3-Java语言高级_03-常用API第二部分_第2节 Date类_5_练习_计算出一个人已经出生了多少天

    Alt+回车

  10. java通过HtmlUnit工具和J4L实现模拟带验证码登录

    1.HtmlUnit 1.1介绍 HtmlUnit是一个用java编写的无界面浏览器,建模html文档,通过API调用页面,填充表单,点击链接等等.如同正常浏览器一样操作.典型应用于测试以及从网页抓取 ...