EasyUI-- datagrid分页详解

最新推荐文章于 2021-06-02 23:23:14 发布

程序员大阳

最新推荐文章于 2021-06-02 23:23:14 发布

阅读量1w

点赞数 1

分类专栏： # 前端文章标签： jquery datagrid easyui pagination 分页

未经本人允许，请勿转载本人文章

本文链接：https://blog.csdn.net/woshisangsang/article/details/62221483

版权

前端专栏收录该内容

60 篇文章 5 订阅

订阅专栏

点此查看全部文字教程、视频教程、源代码

分页的英文是pagination，记住这个单词，因为会经常遇见。

在EasyUI框架下，datagrid使用分页简单到令人发指，只需要2点：

1，为table启用class=“easyui-datagrid”，这样table就成为了一个数据网格。

2，为table启用pagination=“true”，表示表格启用分页功能。

<table id="userTable" title="用户列表" class="easyui-datagrid" style="width:480px;height:240px"
		url="/EasyuiDemo/GetUsers" pagination="true" singleSelect="true">
	<thead>
		<tr>
			<th field="userId">用户ID</th>
			<th field="userName">用户名</th>
			<th field="userPassword">登录密码</th>
			
		</tr>
	</thead>
	</table>

对应界面如下：
这里写图片描述

可见启用分页后，会自动在下方生成一个页码显示、控制区域，包含每页显示个数、当前页码，第一页、最后一页、上一页、下一页等按钮。

接下来就是最重要的前后端交互了，在url="/EasyuiDemo/GetUsers" 中，网页数据加载请求会抛给/EasyuiDemo/GetUsers，重点是同时，会将每页显示个数和请求页码传给后端。第一次加载的情况，会传10，1给后端，如果在第一页点击下一个页按钮，就会传递10，2给后端，也就是说，后端直接处理请求信息即可，不必再费心客户到底要看第几页，这个逻辑EasyUI已封装了。

好，来看看/EasyuiDemo/GetUsers请求如何处理：

@WebServlet(urlPatterns="/GetUsers")
public class UserServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request,response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		//请求页码、每页显示行数、偏移、总数
		int page,rows,offset,total;
		//获取
		String input_page=request.getParameter("page");
		page=(input_page==null)?1:Integer.parseInt(input_page);
		String input_rows=request.getParameter("rows");
		rows=(input_rows==null)?10:Integer.parseInt(input_rows);
		offset=(page-1)*rows;
		UserOperation operation=new UserOperation();
		total=operation.selectCount();
		List<User> users=operation.selectPage(offset, rows);
		Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map  
        jsonMap.put("total", total);//total键 存放总记录数，必须的  
        jsonMap.put("rows", users);//rows键 存放每页记录 list  
        String result = JSONObject.fromObject(jsonMap).toString();//格式化result   一定要是JSONObject  
		out.print(result);
		out.flush();
		out.close();
	}
}

这里面连接数据库的operation.selectPage(offset, rows);方法如下：

	public List selectPage(int offset,int size) {//注意返回值null和list.size()==0的区别
		MySQLHandler hand=new MySQLHandler();
		ResultSet rs=null;
		ArrayList<User> list=new ArrayList<User>();//返回值
		try {
			rs=hand.query("select user_id,user_name,user_password,role_id,role_name from "
					+"system_user u,system_role r where u.user_role=r.role_id "
					+" order by u.user_id limit "+offset+","+size);
			while(rs.next()){
				User one=new User();//返回值中的一个
				one.setUserId(rs.getInt("User_id"));
				one.setUserName(rs.getString("User_name"));
				one.setUserPassword(rs.getString("user_password"));
				Role role=new Role();
				role.setRoleId(rs.getInt("role_id"));
				role.setRoleName(rs.getString("role_name"));
				one.setUserRole(role);
				list.add(one);//添加到列表
			}
			return list;
		} catch (Exception ex) {
			new MyException(new Date(),ex.getMessage(),"UserOperation.selectPage异常");
			return null;
		}finally{
			hand.sayGoodbye();
		}
	}

OK，运行后效果如下，最后还有一个问题，就是用户角色的显示，因为角色是对应Role表，我们想要显示的话，应该是显示user.getUserRole().getRoleName()，显示角色名称，此时可以采用data-options=“field:‘userRole’,formatter:formatUserRole”，使每一行的该列加载时，调用:formatUserRole进行格式化工作。所以最终网页源码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>EasyUI分页</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function formatUserRole(val,row){  
		    if(val) 
		    	return val.roleName;  
		    else 
		    	return "";  
		} 
	</script>
  </head>
  
  <body>
 	<table id="userTable" title="用户列表" class="easyui-datagrid" style="width:480px;height:240px"
		url="/EasyuiDemo/GetUsers" pagination="true" singleSelect="true">
	<thead>
		<tr>
			<th field="userId">用户ID</th>
			<th field="userName">用户名</th>
			<th field="userPassword">登录密码</th>
			<th data-options="field:'userRole',formatter:formatUserRole" >角色</th>
		</tr>
	</thead>
	</table>
  </body>
</html>