上午没事抽空做了一个datagrid的入门例子,是结合struts2做的,刚下班了,也闲着没事,就datagrid的再做进一步的开发;进行分页 操作 另外本人有一个习惯,拒绝转载或者抄袭他人的东西.此外,事例源码尽量完整,哪怕最简单的代码也要写的清楚 . 

 先看效果:

jquery easyui datagrid 分页(转)_java

jquery easyui datagrid 分页(转)_javascript_02

jquery easyui datagrid 分页(转)_javascript_03



DAO数据库访问层
接口EasyDao:
package org.easyui.dao;
import java.util.List;
import org.easyui.model.Student;
public interface EasyDao {
  public List<Student> getStudent(int page,int rows);
  public int getTotalPages(int rows);
 }接口实现类EasyDaoImpl:
package org.easyui.dao;
import java.util.List;
import org.easyui.model.Student;
 import org.easyui.util.UtilHibernate;
 import org.hibernate.HibernateException;
 import org.hibernate.Session;public class EasyDaoImpl implements EasyDao {
 @SuppressWarnings("unchecked")
  public List<Student> getStudent(int page, int rows) {
   List<Student> list = null;
   Session session = UtilHibernate.getSession();
   try {
    session.beginTransaction();
    String sql = "from Student";
    list = session.createQuery(sql)
         .setFirstResult((page-1)*rows)
         .setMaxResults(rows)
         .list();
    session.getTransaction().commit();
   } catch (HibernateException e) {
    session.getTransaction().rollback();
    e.printStackTrace();
   }finally{
    UtilHibernate.closeSession(session);
   }
   
   return list;
  } public int getTotalPages() {
   Session session = UtilHibernate.getSession();
   int total = 0;
   try {
    session.beginTransaction();
    String sql = "select count(*) from Student";
    int count = (Integer)session.createQuery(sql).uniqueResult();
    total =count;
    session.getTransaction().commit();
   } catch (HibernateException e) {
    session.getTransaction().rollback();
    e.printStackTrace();
   }finally{
    UtilHibernate.closeSession(session);
   }
   return total;
  }}

 

easyDemo1.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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <base href="<%=basePath%>"> 
    
    <title>easyDemo1.jsp</title> 
 <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"> 
 <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"> 
 <script type="text/javascript" src="jquery-easyui/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script> 
  
    <script type="text/javascript" src="jslib/easyDemo.js"></script> 
 <script type="text/javascript"> 
  $(function(){ 
   $('#tt').datagrid({ 
    title:'datagrid小例子', 
    iconCls:'icon-ok', 
    width:500, 
    height:320, 
    pageSize:5, 
    pageList:[5,10,15,20], 
    nowrap:false, 
    striped: true, 
    collapsible:true, 
     url:'easyAction.action'  , 
    loadMsg:'数据装载中......', 
    sortName:'code', 
    sortOrder:'desc', 
    remoteSort:false, 
    frozenColumns:[[ 
     {field:'ck',checkbox:true} 
    ]], 
    columns:[[ 
     {title:'学号',field:'id',width:'50',rowspan:2,align:'center'}, 
     {title:'姓名',field:'name',width:'60',rowspan:2,align:'center'}, 
     {title:'性别',field:'sex',width:'50',rowspan:2,align:'center'}, 
     {title:'年龄',field:'age',width:'50',rowspan:2,align:'center'}, 
     {title:'出生日期',field:'birthday',width:'120',rowspan:2,align:'center'}, 
     {title:'班级',field:'className',width:'100',rowspan:2,align:'center'} 
    ]], 
    pagination:true, 
    rownumbers:true 
     
   }); 
   $('#tt').datagrid('getPager').pagination({ 
    displayMsg:'当前显示从{from}到{to}共{total}记录', 
    onBeforeRefresh:function(pageNumber, pageSize){ 
     $(this).pagination('loading'); 
     alert('pageNumber:'+pageNumber+',pageSize:'+pageSize); 
     $(this).pagination('loaded'); 
    }, 
   }); 
    
   //$('#tt').datagrid({url:'easyAction.action'}); 
  }); 
 </script> 
  </head> 
  
  <body> 
    <a href="javascript:void(0)" οnclick="verify()" class="easyui-linkbutton">测试josn数据</a> 
    <h2><b>测试easyui的DataGrid</b></h2> 
    <table id="tt"> 
    </table> 
  </body> 
</html>