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、前台效果图