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入门

原文地址:https://www.cnblogs.com/zhumengke/p/8830874.html

时间: 2024-08-30 03:23:04

EasyUI之DataGrid分页的相关文章

SpringMVC+easyUI中datagrid分页实现_2014.5.1

一.概述 SpringMVC: 1.是面对方法级变量的,在操作起来会比struts方便一些(structs是类级变量),具体体现在了srpingMVC的注解上面, 如@RequstMapping("/login"),而且对于返回值ModelAndView这也是一大亮点,既可以返回一个页面(View),再加上@ResponseBody注解以后就可以返回一个      模型对象(也就是一种数据结构). 2.对于方法级传入的参数操作起来也相当方便,比如本例中,在加载DataGrid时,会像后

EasyUI的DataGrid 分页栏英文改中文解决方案

(一)分页栏英文改中文解决方案 这个问题其实很简单,就是引入文件jquery-easyui-1.3/locale/easyui-lang-zh_CN.js . 注意这个文件要放在本页js的后面,放在最后也不会有什么影响的. 其实日期控件引入这个文件也可以把英文变为中文. 还有一种比较笨的解决办法 ,如下: 1 //设置分页控件 2 var p = $('#list_data').datagrid('getPager'); 3 $(p).pagination({ 4 pageSize: 10,//

easyui的datagrid分页写法小结

easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 1 //关闭tab1打开tab2 查询Detail 2 function refundDetail(){ 3 $('#tt').tabs('select', "Detail Information");//subtitle为选项卡的标题 4 //发起ajax请求,查询退款detail 5 var dayendDate = $("#dayendDate").val(); 6 var term

EasyUI 之 DataGrid分页组件中文显示的两种方法

        在过去的这一段时间参与了高校云平台的评教系统,在系统的前端要求用MVC+Easyui,从今天开始就来给大家讲讲MVC+EasyUI的前端应用. JQueryEasyUI:一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. 在系统中经常会使用到EasyUI-DataGrid(数据

EasyUI的datagrid分页

前台代码: <script type="text/javascript"> $(function () { //查询 search(); }); //查询 function search() { var startDate = $("input[name='startDate']").val(); var endDate = $("input[name='endDate']").val(); //加载datagrid $('#list

easyUI的datagrid 分页保存选中状态

<span style="font-size:18px;">onLoadSuccess:function(data){ var rows = data.rows; //从编辑页面传过来的指标编码 var indeCodes=$("#indeCodes").val(); var n=indeCodes.split(';').length-1; for(var i=0;i<rows.length;i++){ var obj = rows[i]; //循

MVC+EasyUI中datagrid分页(后台)

public JsonResult ModelList_Json() { int pagesize = int.Parse(Request["rows"]);//获取每页显示多少条记录 int pagenum = int.Parse(Request["page"]);//获取当前页码 List<MODEL.Model> list = GetList();//获取所有记录 List<MODEL.Model> listpage=new List&

EasyUI Datagrid 分页

EasyUI Datagrid 分页,两种情况 第一种,向后台请求数据,点击分页请求一次,点击排序请求一次.使用表格自带的ajax. box.datagrid({ url: '', //后台请求地址 queryParams: {'name':'','age':''},//向后台传参 width: '100%', height: '500px', fitColumns: true, singleSelect:true, remoteSort:true, pageList : [ 5, 10, 20

Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的datagrid的使用方法 在这里,datagrid的使用我不做过多讲解,俺毕竟是初学者,不敢班门弄斧.所以就简单带一下. ①.在easyui的layout中的center中定义一个table,id为"datagridTable". <div region="center"