Jquery DataGrid演示程序分页 java

最新推荐文章于 2018-05-30 17:11:00 发布

莫川

最新推荐文章于 2018-05-30 17:11:00 发布

阅读量3.5k

点赞数 2

分类专栏：【java】【JavaScript】

本文链接：https://blog.csdn.net/nupt123456789/article/details/12623957

版权

【java】同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

【JavaScript】

7 篇文章 0 订阅

订阅专栏

前言

最近的项目一直用到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:    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);
		//假设读取到的数据长度是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

效果：

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

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

莫川

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery DataGrid演示程序分页 java

前言最近的项目一直用到DataGrid组件，于是就抽时间整理一下思路。DataGrid主要是设置url和分页，通过在前台DataGrid的属性中添加pagination:true属性，就会在表格末尾显示分页工具栏。后台添加一个int page和int rows保存第几页和每页的数量即可。当然，url返回的是JSON格式的数据。一下是我写的一个Demo页面（index.jsp）<%
复制链接

扫一扫