easyui datagrid分页查询

由于我刚接触前端easyui框架，写这个分页查询遇到了很多问题，花了两天时间才彻底解决，分享一下我的经验。
话不多说，先贴代码
html代码：

<span>班级名称：</span><input id="classes"  name="className">

js代码：

/**
 * 分页查询班级成员
 */
function queryClassMembers(id) {

	$('#teamMembers').datagrid({
		url:'../../../teamController/queryTeamMembers.action',
		queryParams:{id:id},
		columns: [
			[{
					field: 'id',
					title: 'Id',
					width: 50,
					checkbox: true
				},
				{
					field: 'name',
					title: '姓名',
					width: 50
				},
				{
					field: 'sex',
					title: '性别',
					width: 50
				}
			]
		],
		singleSelect: true,
		pagination: true,
		rownumbers: true
	});
}

java代码：

/**
	 * 查询所有的班级成员
	 * @return
	 */
	@RequestMapping("queryTeamMembers.action")
	@ResponseBody
	public Map<String,Object> queryTeamMembers(HttpServletRequest request){
		String classId = request.getParameter("id");
		int pageNumber = Integer.parseInt(request.getParameter("page"));
		int pageSize = Integer.parseInt(request.getParameter("rows"));
		PageObject pageObject = new PageObject();
		pageObject.setPageNumber(pageNumber);
		pageObject.setPageSize(pageSize);
		Map<String, Object> map = ts.queryTeamMembers(classId,pageObject);
		return map;
	}

在这里插入图片描述
在用easyui写分页时，遇到了比较多的问题，不过印象最深的是api中找不到pageNumber和pageSize的获取，后来经过大佬指点，easyui有自带分页，pageNumber和pageSize两个参数会自动传到后台去，我仔细看了一下浏览器上的控制台发现确实有传两个参数过去
在这里插入图片描述
解决了参数传递问题，后来又遇到了从后台传过来的数据格式不对导致数据没法展示出来，我拿掉了数据的封装，将数据按照Map的形式传过去，后来发现还是有问题，在网上找了一下发现必须使用指定的key，总数据行用 total ，数据信息用 rows

后来又发现尾部分页栏是英文的我使用了pagination的方法来写，发现没起作用，后来经过大佬指点，引用easyui的一个文件就会自动转换成中文的，代码如下：

<script type="text/javascript" charset="UTF-8" src="../Scripts/easyui-lang-zh_CN.js"></script>

在这里插入图片描述

$('#teamMembers').pagination({
		beforePageText: '第',
		afterPageText: '页 共 {pages} 页',
		displayMsg: '当前显示 {from} - {to}条记录共{total}记录'
	});

上方代码是我根据官网上的api写的，因为本人英语水平一般可能对api理解的不够深刻导致哪里出了问题，也不得而知，也不敢太频繁的问大佬，所以谁知道哪里不对的朋友可以解惑一下。

easyui datagrid分页查询

猜你喜欢