Jquery DataGrid演示程序分页 java

来源：互联网发布：淘宝嘉年华有什么用编辑：程序博客网时间：2024/05/05 03:31

前言

最近的项目一直用到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 datagridpager.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:    zhb931706659@126.com *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:    zhb931706659@126.com *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:    zhb931706659@126.com *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);//假设读取到的数据长度是87int 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);//转化为JSONString 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

效果：

点击页数，就会出现相应的更新。

未经允许不得用户商业目的

Jquery DataGrid演示程序 分页 java

Jquery DataGrid演示程序分页 java