jquery easyui datagrid 分页 详解（java）

1、首先引入easyui包，可以在官方网站下载，http://www.jeasyui.com/download/index.php

<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="js/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>

注意：jquery-1.8.0.min.js要在jquery.easyui.min.js之前引入。

2、Create datagrid from an existing table element, defining columns, rows, and data in html.

 

<table id="dg"
       title="社团基本信息"
       class="easyui-datagrid"
       style="width:1200px;height:600px;"  
       url="list"  
       pagination="true" 
       rownumbers="true"
       fitColumns="true" 
       singleSelect="true">
           <thead>
            <tr>  
                <th field="stu_id" width="40">学号</th>  
                <th field="stu_name" width="50">姓名</th>  
                <th field="stu_yuanxi" width="50">院系</th>
                <th field="stu_email" width="80">Email</th>  
                <th field="stu_phone" width="50">电话</th>  
                <th field="stu_qq" width="40">QQ</th>  
                <th field="stu_sex" width="20">性别</th> 
                <th field="stu_age" width="40">出生年月</th> 
                <th field="stu_join" width="40">参加时间</th> 
                <th field="depart_name" width="50">所在社团</th>
                <th field="stu_job" width="50">职务</th>     
                <th field="stu_like" width="50">爱好</th> 
            </tr>  
        </thead>  
    </table>  

 

3、表student对应的实体

 

public class Student {
	private int id;
	private String stu_id;
	private String stu_name;
	private String stu_password;
	private String stu_yuanxi;
	private String stu_job;
	private String stu_email;
	private String stu_phone;
	private String stu_qq;
	private String stu_sex;
	private String stu_age;
	private String depart_name;
	private String role_name;
	private int depart_id;
	private int role_id;
	private String stu_like;
	private int u_id;
	private String u_dept;
     	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	......	
｝

 

4、DAO实现获取student记录

	public List<Student> listStudent(int pageNumber,int pageSize){
		
		List<Student> list=new ArrayList<Student>();
		String sql="select * from student limit " + pageNumber+"," + pageSize ;
		try {
			list = runner.query(sql, new BeanListHandler<Student>(Student.class));
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return list;
	}

5、Servlet实现跳转，将数据返回给前台

 

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//处理乱码
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		int page;
		try {
			page = Integer.parseInt(request.getParameter("page"));
		} catch (NumberFormatException e) {
			page = 1;
		}
		int row;
		try {
			row = Integer.parseInt(request.getParameter("rows"));
		} catch (NumberFormatException e) {
			row = 10;
		}
		
		PrintWriter out = response.getWriter();
		
		//获得student列表
		StudentInfoService studentInfoService = new StudentInfoService();
		List<Student> list =studentInfoService.listStudent(page, row) ;
		long total = studentInfoService.results() ;
		
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("total", total);
		map.put("rows", list);
		Gson gson = new Gson();
		String json = gson.toJson(map);
		out.write(json);
		out.flush();
		out.close();
	}

6、前台效果图