使用datagrid 进行分页

最新推荐文章于 2025-07-03 11:50:11 发布

ugly_birds

最新推荐文章于 2025-07-03 11:50:11 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：分页查询

本文链接：https://blog.youkuaiyun.com/ugly_birds/article/details/77156173

本文介绍如何使用 EasyUI 的 Datagrid 组件实现分页功能，并通过 Ajax 请求后端数据，展示了完整的 Java 代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先是页面

datagrid是easyui中的所以：

引入相关js与css

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>

body中写一个表格并给予一个ID （该ID是为了给datagrid用的）

<body>
	<div region="center" border="false" style="height: 400px">
	<table id="jq"></table>
	</div>
	
</body>

使用的ajax请求获取的数据

<script type="text/javascript">


		var toolbar = [ {					//工具栏
			id : 'add',
			text : '增加',
			iconCls:'icon-add'
		}, {
			id : 'delete',
			text : '删除',
			iconCls:'icon-remove'
		} ,{
			id : 'edit',
			text : '编辑',
			iconCls:'icon-edit'
		} ,{
			id : 'find',
			text : '查找',
			iconCls:'icon-search'
		} ];
		
		
			
		var columns = [ [ {					//表头
			field : 'id',				//field 标识字符，一定要与类的字段对应，这样才能获取服务端传回的数据，其它属性查api
			title : '编号',
			width : '100',
			align : 'center'
		}, {
			field : 'username',
			title : '姓名',
			width : '100',
			align : 'center'
		}, {
			field : 'salary',
			title : '工资',
			width : '100',
			align : 'center'
		}, {
			field : 'birthday',
			title : '生日',
			width : '100',
			align : 'center'
		}, {
			field : 'gender',
			title : '性别',
			width : '200',
			align : 'center'
		}, {
			field : 'station',
			title : '区域',
			width : '200',
			align : 'center'
		}, {
			field : 'telphone',
			title : '电话',
			width : '200',
			align : 'center'
		} ] ];


		$(function() {
			$('#jq').datagrid({
				url : "${pageContext.request.contextPath}/jqAction_pageQuery.action",    //相关属性自行查api
				columns : columns,
				toolbar:toolbar,
				fit : true,
				idField : 'username',
				border : false,
				striped : true,
				iconCls : 'icon-forward',
				 pagination:true,
				 //pageSize:10,
				pageList:[2,5,7]
			});

		})
	</script>

这样页面就展示就完成了，开始写java代码，要分页肯定要有一个bean。

package com.itheima.bos.utils;


import java.util.List;


/**
 * 封装分页信息
 * @author zhaoqx
 *
 */
public class JqBean {
	/**d当前页数*/
	private int currPage;
	/**每页显示的记录数*/
	private int row;
	/**总记录数*/
	private int total;
	/**总页数*/
	//private int totalPage;				
	/**显示的数据集合*/
	private List rows;

/*说明一下总页数，我认为datagrid应该在底层封装了算法，使用了datagrid就不需要自己算，不然就自己算，个人觉得是

if(total%row==0){

totalPage = total/row;

}else{

totalPage = (total/row)+1;

如果有不对的还请指出，谢谢。

*/


	public int getCurrPage() {
		return currPage;
	}
	public void setCurrPage(int currPage) {
		this.currPage = currPage;
	}
	public int getRow() {
		return row;
	}
	public void setRow(int row) {
		this.row = row;
	}
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
//	public int getTotalPage() {
//		return totalPage;
//	}
//	public void setTotalPage(int totalPage) {
//		this.totalPage = totalPage;
//	}
	public List getRows() {
		return rows;
	}
	public void setRows(List rows) {
		this.rows = rows;
	}
	


}

action

package com.itheima.bos.web.action;

import java.io.IOException;

import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;

import org.apache.struts2.ServletActionContext;
import org.hibernate.criterion.DetachedCriteria;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.itheima.bos.domain.Jq;
import com.itheima.bos.service.JqService;
import com.itheima.bos.utils.JqBean;
import com.itheima.bos.utils.PageBean;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
@Controller
@Scope("prototype")
public class JqAction extends ActionSupport implements ModelDriven<Jq>{
	private Jq jq;
	public Jq getModel() {
		// TODO Auto-generated method stub
		return jq;
	}
	private int page;
	private int rows;
	@Autowired
	private JqService jqservice;
	
	public void setPage(int page) {
		this.page = page;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}
	public String pageQuery() throws Exception{
		JqBean jb = new JqBean();
		jb.setRow(rows);
		jb.setCurrPage(page);
		jqservice.pageQuery(jb);

//将bean转为json对象，设定编码格式并返回给客户端

JsonConfig js =new JsonConfig();js.setExcludes(new String[]{"row","currpage"});

		JSONObject jso =JSONObject.fromObject(jb, js);
		String jsos = jso.toString();

		
		ServletActionContext.getResponse().setContentType("text/json;charest=utf-8");
		ServletActionContext.getResponse().getWriter().print(jsos);
		return NONE;
	}
}

service没啥写的就是开启事物调用dao的方法。
dao
package com.itheima.bos.dao.impl;

import java.util.List;

import org.hibernate.SessionFactory;
import org.hibernate.criterion.DetachedCriteria;
import org.hibernate.criterion.Projections;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
import org.springframework.stereotype.Repository;

import com.itheima.bos.dao.JqDao;
import com.itheima.bos.domain.Jq;
import com.itheima.bos.utils.JqBean;
import com.itheima.bos.utils.PageBean;
@Repository
public class JqDaoImpl extends HibernateDaoSupport implements JqDao{

	//继承了HibernateDaoSupport 必须注入session工厂不然会报错，至于原因我也不太清楚
	
	@Autowired  
	public void setSessionFactory0(SessionFactory sessionFactory){  
	 super.setSessionFactory(sessionFactory);  
	}

	

	public void pageQuery(JqBean jb) {
		// TODO Auto-generated method stub
		int crp = jb.getCurrPage();
		int num = jb.getRow();
		/*通过hql语句
		 * String hql = "select count(*) from Jq";
		List <Long>ls = (List<Long>) this.getHibernateTemplate().find(hql);*/
		
		//通过改变Hibernate框架发出的sql形式
		DetachedCriteria dc = DetachedCriteria.forClass(Jq.class);
		dc.setProjection(Projections.rowCount());
		List<Long> ls = (List<Long>) this.getHibernateTemplate().findByCriteria(dc);
		//记得设为null，也就是默认的select * from ....。不然后面的list没有值
		dc.setProjection(null);
		int total;
		if(ls.size()>0){
			total = ls.get(0).intValue();
		}else{
			total = 0;
		}
		jb.setTotal(total);
		int begin = (crp-1)*num;
		List lst = this.getHibernateTemplate().findByCriteria(dc, begin, num);
		jb.setRows(lst);
	}

	

}

最后就是struts的配置action了，自己去做吧