1. 程式人生 > >EasyUI之DataGrid分頁

EasyUI之DataGrid分頁

ets before table rst add function use userdata pat

第一步創建分頁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分頁