jqGrid基础学习：7jqGrid中使用分页

Publish: 2010-03-02 15:14:15 Category: jqGrid Tag: 0 Comments

jqGrid分页首先要在页面设置一个DIV的层。例如,在第一章就提到的


同时，要在jqGrid的配置中加入

jQuery("#grid_id").jqGrid({
...
   pager : '#pager',
...
});

参照第二章
效果如下

分页实例

分页实例

同时，这jqGrid中，在分页可以设定各种属性，例如没有找到数据时显示的提示。

jQuery("#grid_id").jqGrid({
...
   pager : '#pager',
   emptyrecords: "Nothing to display",
...
});

而这些，也可以再i18n的文件中进行配置。很少这样直接更改。系统默认的显示是

recordtext: "View {0} - {1} of {2}",
	        emptyrecords: "No records to view",
		loadtext: "Loading...",
		pgtext : "Page {0} of {1}"

在分页导航条中，还可以对属性进行修改，分页导航的属性有

属性名 类型 说明 默认值 是否可以被修改
lastpage integer 只读属性，总页数 0 NO
pager mixed 导航栏对象，必须是一个有效的html元素，位置可以随意 空字符串 NO
pagerpos string 定义导航栏的位置，默认分为三部分：翻页，导航工具及记录信息 center NO
pgbuttons boolean 是否显示翻页按钮 true NO
pginput boolean 是否显示跳转页面的输入框 true NO
pgtext string 页面信息，第一个值是当前页第二个值是总页数 语言包 YES
reccount integer 只读属性，实际记录数，千万不能跟records 参数搞混了，通常情况下他们是相同的，假如我们定义rowNum=15，但我们从服务器端返回的记录为20即records=20，而reccount=15，表格中也显示15条记录。 0 NO
recordpos string 定义记录信息的位置，可选值：left, center, right right NO
records integer 只读属性，从服务器端返回的记录数 none NO
recordtext string 显示记录的信息，只有当viewrecords为true时起效，且记录数必须大于0 语言包 yes
rowList array[] 可以改变表格可以显示的记录数，格式为[10,20,30] 空array[] no
rowNum integer 设置表格可以显示的记录数 20 yes
viewrecords boolean 是否要显示总记录数信息 false no

所有这些参数都是可以修改的，比如： 

<script>
...
jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");
...
</script>

同时，分页有一个事件，很少需要用到

事件名 参数 说明
onPaging pgButton 当点击翻页按钮但还为展现数据时触发此事件，当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值：
first,last,prev,next

同时要注意和后台的交互。jqGrid在分页的时候向后台传递的参数有

	/*
	 * 分页
	 */
	private Integer page;// 当前页
	private Integer total;// 总页数
	private Integer pageSize = 20;// 每页显示多少
	private Integer records;// 总记录数
	private List<studentbean> rows;// 记录
</studentbean>

所以，我们可以通过书写一份分页公共类来进行。
分页Bean

public class Page {

	private int count = 0; // 记录总数

	private int pageSize = 20; // 每页显示记录数

	private int pageCount = 0; // 总页数

	private int page = 1; // 当前页数

	private String totalCountSQL;// 得到总记录数sql语句

	private String listSQL;// 得到查询记录sql语句

	public int getCount() {
		return count;
	}

	public void setCount(int count) {
		this.count = count;
	}

	public int getPageSize() {
		return pageSize;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}

	public int getPageCount() {
		return pageCount;
	}

	public void setPageCount(int pageCount) {
		this.pageCount = pageCount;
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public String getTotalCountSQL() {
		return totalCountSQL;
	}

	public void setTotalCountSQL(String totalCountSQL) {
		this.totalCountSQL = totalCountSQL;
	}

	public String getListSQL() {
		return listSQL;
	}

	public void setListSQL(String listSQL) {
		this.listSQL = listSQL;
	}

}

分页的接口

public interface IPage {

	public List getList(PageBean page);
	public List getList(PageBean page, Map param);

	public Long getTotalCount(PageBean p,Map param);

	public Long getTotalCount(PageBean page);

}

分页实现

@Service("page")
@SuppressWarnings("unchecked")
public class PageImpl implements IPage {
	@Resource
	private SessionFactory sessionFactory;

	public List getList(PageBean page) {
		Query query = sessionFactory.getCurrentSession().createQuery(
				page.getListSQL());
		query.setMaxResults(page.getPageSize());
		query.setFirstResult((page.getPage() - 1) * page.getPageSize());
		return query.list();
	}

	public List getList(PageBean page, Map param) {

		Query query = sessionFactory.getCurrentSession().createQuery(
				page.getListSQL());
		if (null != param) {
			Iterator it = param.entrySet().iterator();
			while (it.hasNext()) {
				Map.Entry entry = (Map.Entry) it.next();
				String key = (String) entry.getKey();
				Object val = entry.getValue();
				query.setParameter(key, val);

			}
		}
		return query.list();
	}

	public Long getTotalCount(PageBean p, Map param) {
		Query query = sessionFactory.getCurrentSession().createQuery(p.getTotalCountSQL());
		if (null != param) {
			Iterator it = param.entrySet().iterator();
			while (it.hasNext()) {
				Map.Entry entry = (Map.Entry) it.next();
				String key = (String) entry.getKey();
				Object val = entry.getValue();
				query.setParameter(key, val);

			}
		}
		return (Long) query.uniqueResult();
	}

	public Long getTotalCount(PageBean p) {

		return (Long) sessionFactory.getCurrentSession().createQuery(p.getTotalCountSQL()).uniqueResult();
	}

}

Action类完整代码

@ParentPackage("json-default")
@Namespace("/admin/json")
public class StudentListAction implements ServletRequestAware {

	@Resource
	private IPaginate paginate;
	private HttpServletRequest request;

	/*
	 * 分页
	 */
	private Integer page;// 当前页
	private Integer total;// 总页数
	private Integer pageSize = 20;// 每页显示多少
	private Integer records;// 总记录数
	private List<studentbean> rows;// 记录

	public StudentListAction() {
		System.out.println(new Date());

	}

	public Integer getPage() {
		return page;
	}

	public void setPage(Integer page) {
		this.page = page;
	}

	public Integer getTotal() {
		return total;
	}

	public void setTotal(Integer total) {
		this.total = total;
	}

	@JSON(serialize = false)
	public Integer getPageSize() {
		return pageSize;
	}

	public void setPageSize(Integer pageSize) {
		this.pageSize = pageSize;
	}

	public Integer getRecords() {
		return records;
	}

	public void setRecords(Integer records) {
		this.records = records;
	}

	public List</studentbean><studentbean> getRows() {
		return rows;
	}

	public void setRows(List</studentbean><studentbean> rows) {
		this.rows = rows;
	}

	public void setServletRequest(HttpServletRequest request) {
		this.request = request;

	}

	@Action(value = "jsondata", results = { @Result(type = "json") })
	public String execute() throws Exception {
		get();

		return com.opensymphony.xwork2.Action.SUCCESS;
	}

	@SuppressWarnings("unchecked")
	private void get() throws Exception {
		PageBean pageBean = new PageBean();
		pageBean.setPage(page);
		pageBean.setPageSize(pageSize);
		JqGridHandler handler = new JqGridHandler(request);
		pageBean.setTotalCountSQL("select count(*) from Student "
				+ handler.getWheres(null, false)
				+ handler.getOrders(null, false));
		pageBean.setListSQL("from Student "
				+ handler.getWheres(null, false)
				+ handler.getOrders(null, false));
		pageBean.setCount(paginate.getTotalCount(pageBean).intValue());

		List<student> list = paginate.getList(pageBean);
		rows = new ArrayList<studentbean>();
		for (Student student : list) {
			StudentBean bean = new StudentBean();
			bean.setAge(student.getAge());
			bean.set__department_id(student.getDepartment().getId());
			bean.setId(student.getId());
			bean.setName(student.getName());
			bean.setSex(student.getSex());
			bean.setDate(student.getDate());
			rows.add(bean);
		}
		total = pageBean.getPageCount();
		records = pageBean.getCount();
	}

}

</studentbean></student></studentbean>

相关日志

  • jqGrid进阶教程：3、jqGrid的数据格式化二
    jqGrid是非常强大的，除了上一讲提到的预置的格式化外，还提供自定义的格式化方法，这种方法也是我比较喜欢的方法。 我们接上面的例子 $("#grid_id").jqGrid({ ... colModel : [ {name:'sex', edittype:'select', editoptions:{value:"1:男;2:女"}} ... ], ... }); ...
  • jqGrid例子文件下载
    最近慵懒了很多，很少来上面博一博，发下jqGrid的例子的全部文件。 jqGrid 由于文件太大，删掉了所有的jar包，jar是整合struts2.1+spring2.5+hibernate3.2...
  • jqGrid进阶教程：1、jqGrid的样式无法正确显示的原因和解决办法
    jqGrid引入后，执行，常常会碰到css无法像官方的demo一样正常显示，特别是字体还有一些弹出框， 例如 [caption id="attachment_407" align="alignnone" width="300" caption="CSS变样"][/caption] 这种问题的原因多半是因为html的标准问题，即其写法为 如果要让样式正常，要采用写法如下 ...
  • jqGrid基础学习：11jqGrid的查询时和后台的交互
    jqGrid查询时和后台交互是一个比较棘手的问题，因为发送过来的数据不规则。 单字段 我们通过Firefox的firebug来进行调试，我们发现提交搜索请求后，向后台发送的参数如下 [caption id="attachment_382" align="alignnone" width="300" caption="单字段同后台交互"][/caption] 由此，我们看出单字段查询...
  • jqGrid基础学习：10jqGrid的多字段查询
    多字段查询就是高级查询，在jqGrid中，高级查询的麻烦在于同后台的交互。 [caption id="attachment_379" align="alignnone" width="718" caption="jqGrid多字段查询"][/caption] 启用多条件查询的方法，是加上.searchGrid({multipleSearch:true}); 即可。 ...

PO一下