第一步创建分页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. List常用操作 - List.FindAll / List.Sort

    List常用操作 (1) 筛选List中符合条件的项目 var list = FormControlList.FindAll(delegate (FormControlModel obj) { ret ...

  2. postman-关联

    1.提取 在Tests提取接口1的值如:userid //将获取的json数据赋给变量 var jsonData=pm.response.json(); //获取返回的userid值 user_id= ...

  3. Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题。 就好比我来说,我两个都用。我深知这两个平台的优缺点。所以,我决定分享我关于这两个移动平台的观点。另外,然后谈谈我对新的 Ubuntu 移动平台的印象和它的优势。 IOS 的优点 虽然这些天我是个十足的 Android 用户,但我必须承认 IOS 在某些方面做的是不错。首先,苹果公司在他们的设备更新方面有更

    Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题. 就好比我来说,我两个都用.我深知这两个平台的优缺点.所以,我决定分享我关于这两个移动平台的观点.另外,然后谈谈 ...

  4. 【CF1236D】Alice and the Doll(set)

    题意:给定一个n*m的网格,其中k格有障碍 周驿东从(1,1)出发面朝右,每次行动前他可以选择顺时针旋转90度或不旋转,然后向自己朝向的位置走1格 问他能否不重复不遗漏的走过所有非障碍格 n,m,k& ...

  5. [CSP-S模拟测试]:array(单调栈)

    题目描述 在放完棋子之后,$dirty$又开始了新的游戏. 现在他拥有一个长为$n$的数组$A$,他定义第$i$个位置的分值为$i−k+1$,其中$k$需要满足: 对于任意满足$k\leqslant ...

  6. select标签的下拉框为图片的插件

    1 参考文献: [1] https://github.com/rvera/imag...[2] https://rvera.github.io/image... [3] http://webseman ...

  7. ES6 二进制和八进制字面量

    ES6 支持二进制和八进制的字面量,通过在数字前面添加 0o 或者 0O 即可将其转换为二进制值: let oValue = 0o10; console.log(oValue); // 8 let b ...

  8. EXISTS 和 IN 的查询效率问题

    mysql使用总结: 一:EXISTS 和 IN 的查询效率问题 1:当a表的数据小于b表中的数据时 用 IN 的效率是要小于用 EXISTS 的效率 SELECT * FROM a WHERE id ...

  9. Gradel 多渠道打包 代码混淆

    http://blog.csdn.net/ttccaaa/article/details/47687241 http://www.bubuko.com/infodetail-987756.html h ...

  10. leetcode 884. 两句话中的不常见单词 (python)

    给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回所有不常用单 ...