zoukankan      html  css  js  c++  java
  • EasyUI之DataGrid分页

    第一步创建分页DataGrid

    	<table id="dg">
    		<thead>
    			<tr>
    				<th data-options="field:'username',100">username</th>
    				<th data-options="field:'password',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入门

  • 相关阅读:
    2019.6.20刷题统计
    36 线程 队列 守护线程 互斥锁 死锁 可重入锁 信号量
    35 守护进程 互斥锁 IPC 共享内存 的方式 生产者消费者模型
    34 进程 pid ppid 并发与并行,阻塞与非阻塞 join函数 process对象 孤儿进程与僵尸进程
    33 udp 域名 进程
    32 粘包 文件传输
    31 socket客户端. 服务器 异常 语法
    30 网络编程
    29 元类 异常
    26 封装 反射 常用内置函数
  • 原文地址:https://www.cnblogs.com/zhumengke/p/8830874.html
Copyright © 2011-2022 走看看