EasyUI之DataGrid分页
第一步创建分页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分页的更多相关文章
- EasyUI的datagrid分页
EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...
- easyui的datagrid分页写法小结
easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 //关闭tab1打开tab2 查询Detail function refundDetail(){ $('#tt').tab ...
- EasyUI 中datagrid 分页。
注释:datagrid分页搞了好几天才完全搞好,网上没完全的资料.明天晚上贴代码. 睡觉.
- EasyUI 自定义DataGrid分页
DataGrid内建分页能力是强大的,它比自定义相对容易.在这个教程,我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮.标记<table id="tt"> ...
- EasyUI的DataGrid 分页栏英文改中文解决方案
(一)分页栏英文改中文解决方案 这个问题其实很简单,就是引入文件jquery-easyui-1.3/locale/easyui-lang-zh_CN.js . 注意这个文件要放在本页js的后面,放在最 ...
- Easyui的datagrid结合hibernate实现数据分页
最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...
- SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
随机推荐
- JOI2019 有趣的家庭菜园3
问题描述 家庭菜园专家 JOI 先生在他的家庭菜园中种植了一种叫 Joy 草的植物.在他的菜园里,有 N 个花盆自东向西摆放,编号分别为 \(1, \ldots, N\).每个花盆中有一株 Joy 草 ...
- MySql的导入导出
可以参看之前的博客:https://www.cnblogs.com/shijinglu2018/p/8672699.html 可以参看视频:https://i.cnblogs.com/EditPost ...
- js-将传来的数据排序,让(全部)这个小按钮小圈圈,始终排列在最前面
let arryDemo=[]; for(var i=0;i<data.data.length;i++){ if(data.data[i].name=='全部'){ arryDemo.push( ...
- Flink Forward Asia 2019 - 总结和展望(附PPT下载链接)
11 月 28 - 30 日,北京迎来了入冬以来的第一场雪,2019 Flink Forward Asia(FFA)也在初雪的召唤下顺利拉开帷幕.尽管天气寒冷,FFA 实际到会人次超过 2000,同比 ...
- 【CF10D】LCIS(LCIS)
题意:求两个序列的LCIS n,m<=300,a[i]<=1e9 题意:O(n^2) O(n^3)的话设dp[i,j]为A终点为a[1..i]且B终点为b[j]的最大长度,分a[i]==b ...
- 给字体和元素加阴影text-shadow和box-shadow
1.语法: 对象选择器 {text-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色} 注:text-shadow可以使用一个或多个投影,如果使用多个投影时必须需要用逗号“,”分开. 2 ...
- Android Bluetooth 文件接收路径修改方法
修改文件: packages/apps/Bluetooth/src/com/android/bluetooth/opp/BluetoothOppReceiveFileInfo.java 相关代码片段: ...
- [CSP-S模拟测试]:幻魔皇(数学)
题目描述 幻魔皇拉比艾尔很喜欢斐波那契树,他想找到神奇的节点对. 所谓斐波那契树,根是一个白色节点,每个白色节点都有一个黑色节点儿子,而每个黑色节点则有一个白色和一个黑色节点儿子.神奇的节点对则是指白 ...
- shell scripts 编写基础
一.shell变量的相关用法: 变量作为被赋值的一方的时候不加$,只有在使用其值的内容的时候需要加上$,该符号可 1,变量中的单引号‘’.双引号“”“.反单引号‵`.括号().大括号{}.双括号(() ...
- 用CSS代码编写简易轮播图
废话不多说,直接上代码 <!doctype html> <html> <head> <title></title> <meta cha ...