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理解的不够深刻导致哪里出了问题,也不得而知,也不敢太频繁的问大佬,所以谁知道哪里不对的朋友可以解惑一下。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值