Jquery DataGrid演示程序 分页 java
前言
最近的项目一直用到DataGrid组件，于是就抽时间整理一下思路。DataGrid主要是设置url和分页，通过在前台DataGrid的属性中添加pagination:true属性，就会在表格末尾显示分页工具栏。后台添加一个int page和int rows保存第几页和每页的数量即可。当然，url返回的是JSON格式的数据。一下是我写的一个Demo
页面（index.jsp）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<title>Custom DataGrid Pager - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js/demo/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom DataGrid Pager</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>You can append some buttons to the standard datagrid pager bar.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" title="Custom DataGrid Pager" style="width:700px;height:550px"
data-options="rownumbers:true,singleSelect:true,pagination:true,url:'getStudentList',method:'get'">
<thead>
<tr>
<th data-options="field:'id',width:80">学号</th>
<th data-options="field:'name',width:100">姓名</th>
<th data-options="field:'course',width:180">课程</th>
<th data-options="field:'score',width:80">分数</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function(){
var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
buttons:[{
iconCls:'icon-search',
handler:function(){
}
},{
iconCls:'icon-add',
handler:function(){
}
},{
iconCls:'icon-edit',
handler:function(){
}
}]
});
})
</script>
</body>
</html>
Struts2的配置文件
struts.xml文件的内容：
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.server.static.browserCache" value="false" />
<constant name="struts.ui.theme" value="simple" />
<constant name="struts.devMode" value="true" />
<constant name="struts.i18n.encoding" value="UTF-8" />
<constant name="struts.configuration.xml.reload" value="true" />
<package name="fileUploadPackage" extends="struts-default">
<action name="getStudentList" class="edu.njupt.zhb.action.DataGridDemoAction" method="getStudentList">
<result type="httpheader"></result>
</action>
</package>
</struts>
后台实体类Student(注意：成员变量的名称要与前台feild的值相对应)
/* * $filename: Student.java,v $ * $Date: 2013-10-11 $ * Copyright (C) ZhengHaibo, Inc. All rights reserved. * This software is Made by Zhenghaibo. */ package edu.njupt.zhb.model; import java.util.Date; /* *@author: ZhengHaibo *web: http://blog.csdn.net/nuptboyzhb *mail: [email protected] *2013-10-11 Nanjing,njupt,China */ public class Student{ /** * */ private static final long serialVersionUID = 891846967116946566L; private int id;//学号 private String name;//姓名 private String course;//课程 private int score;//分数 public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getCourse() { return course; } public void setCourse(String course) { this.course = course; } public int getScore() { return score; } public void setScore(int score) { this.score = score; } }
后台实体类DataGrid（目的：拼成DataGrid所需JSON格式）
/* * $filename: DataGrid.java,v $ * $Date: 2013-10-11 $ * Copyright (C) ZhengHaibo, Inc. All rights reserved. * This software is Made by Zhenghaibo. */ package edu.njupt.zhb.tools; import java.util.List; /* *@author: ZhengHaibo *web: http://blog.csdn.net/nuptboyzhb *mail: [email protected] *2013-10-11 Nanjing,njupt,China */ public class DataGrid <T>{ private int total; private List<T> rows; public List<T> getRows() { return rows; } public void setRows(List<T> rows) { this.rows = rows; } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } }
后台Action类（page 和 rows字段）
/* * $filename: ZTreeDemoAction.java,v $ * $Date: Sep 27, 2013 $ * Copyright (C) ZhengHaibo, Inc. All rights reserved. * This software is Made by Zhenghaibo. */ package edu.njupt.zhb.action; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; import edu.njupt.zhb.model.Student; import edu.njupt.zhb.tools.DataGrid; import net.sf.json.JSONArray; import net.sf.json.JSONObject; /* *@author: ZhengHaibo *web: http://blog.csdn.net/nuptboyzhb *mail: [email protected] *Sep 27, 2013 Nanjing,njupt,China */ public class DataGridDemoAction extends ActionSupport { /** * */ private static final long serialVersionUID = -3318989776253565435L; private int page;//DataGrid中的页数 private int rows;//DataGrid中的每页的条数 public int getPage() { return page; } public void setPage(int page) { this.page = page; } public int getRows() { return rows; } public void setRows(int rows) { this.rows = rows; } /** * 模拟从数据库读取数据 * @return */ public String getStudentList(){ System.out.println("page = "+page); System.out.println("rows = "+rows); //假设读取到的数据长度是87 int resultMaxCount = 87 ; int startIndex = (page-1)*rows; int endIndex = page*rows<resultMaxCount?page*rows:resultMaxCount; //声明一个Student类型的DataGrid对象 DataGrid<Student> dataGrid = new DataGrid<Student>(); List<Student> studentList = new ArrayList<Student>(); //真实情况是从startIndex到endIndex取值 for (int i = startIndex; i < endIndex ; i++) { Student s = new Student(); s.setId(10120106+i); s.setCourse("数字图像处理"); s.setName("学生"+i); s.setScore(i); studentList.add(s); } //设置总条数 dataGrid.setTotal(resultMaxCount); //设置Rows数据链表 dataGrid.setRows(studentList); //转化为JSON String result = JSONObject.fromObject(dataGrid).toString(); System.out.println("result："+result); //将JSON数据返回前台 getPrintWriter().write(result); return SUCCESS; } /** * 获得HttpServletResponse对象 * * @return */ public static HttpServletResponse getResponse() { HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8"); return response; } public PrintWriter getPrintWriter() { PrintWriter pw = null; try { pw = getResponse().getWriter(); } catch (IOException e) { e.printStackTrace(); } return pw; } }
这样，整个Demo大致完成，Demo完整源代码： http://download.csdn.net/detail/nuptboyzhb/6385325
效果：
点击页数，就会出现相应的更新。
未经允许不得用户商业目的