<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>
Ok，最终效果如下：