第一步创建分页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入门

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. linux运维、架构之路-MHA高可用方案

    一.软件介绍          MHA(master high   availability)目前是MySQL高可用方面是一个相对成熟的解决方案.在切换过程中,mha能做到0-30s内自动完成数据库的 ...

  2. Java——容器(Set)

    [Set接口] <1>Set接口是Collection的子接口,Set接口没有提供额外的方法. <2>实现Set接口的容器类中的元素是没有顺序的,而且不可以重复. <3& ...

  3. Codeforces 878A - Short Program(位运算)

    原题链接:http://codeforces.com/problemset/problem/878/A 题意:给出n个位运算操作, 化简这些操作, 使化简后的操作次数不多于5步. 思路:我们可以对二进 ...

  4. 【bzoj3926】[Zjoi2015]诸神眷顾的幻想乡

    *题目描述: 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看.幽香当然也 ...

  5. UNR#3 Day1——[ 堆+ST表+复杂度分析 ][ 结论 ][ 线段树合并 ]

    地址:http://uoj.ac/contest/45 第一题是鸽子固定器. 只会10分.按 s 从小到大排序,然后 dp[ i ][ j ][ k ] 表示前 i 个元素.已经选了 j 个.最小值所 ...

  6. C. Anna, Svyatoslav and Maps

    C. Anna, Svyatoslav and Maps 给定一个有向图,给定一条有向路径,求一条顶点最少的路径,使得给定的路径是它的最短路 folyd预处理出任意两点间的最短路,然后判断是否可以缩点 ...

  7. jvm监测

    jvm调优,首先,你得会jvm性能检测.开方得先诊断啊.

  8. Understanding the Module Pattern in JavaScript

    Understanding the Module Pattern in JavaScript Of all the design patterns you are likely to encounte ...

  9. 织梦dedecms发布视频文章前台变成一张图片的解决方法

    在发布文章的时候,有时需要插入视频的代码,如优酷.腾讯等视频,这样更能让文章变的丰富,但是在发布视频的时候,前台并不能播放视频,而是一张图片 解决这个方法其实很简单,在发布视频文章的时候,将附加选项的 ...

  10. React - 可控组件和非可控组件的选择

    原则 受控组件(用户输入 ---> state 更新 ---> 组件更新)的消耗明显比非受控组件大的多,但非受控组件只能在需求非常简单的情况下的使用. 特性 uncontrolled 受控 ...