基于DWR、Hibernate、Spring实现的分页（一）

这是一个自己前些天写的例子，现在直接切入主题。

（图一 代码调用流程图）

 

以上是大致整个流程的调用过程。得到后台数据的方法主要是基于Ajax实现的，那么，在此使用了DWR框架，对于DWR框架的介绍，大家可以利用Google进行搜索，它主要是方便我们在前台页码利用Javascript去调用后台的Java代码。在示例中的话，我是利用了DWR中StudentUtils的paginationAllStudent()获得数据并在前台显示，而这个paginationAllStudent()方法，就是对应与后台Java代码中的StudentinfoDAO.paginationAllStudent()方法。这里只是类名的不同，因为在DWR配置文件中进行了配置。

接下来分析一下主要的代码。

（1）PaginationSupport类，具体代码实现不写，主要用于封装当前页面信息。如：当前第几页，共多少条记录，前后页索引等。

public class PaginationSupport  implements java.io.Serializable {
	
	public final static int PAGESIZE = 10;

	private int pageSize = PAGESIZE;
	
	private int totalCount;
    
	private int currentPage;

	private int startIndex;

	private int[] indexes = new int[0];

	private int nextIndex;

	private int previousIndex;

	private int pageCount;

	private List items; //存放从数据库取得的数据

	private int lastIndex;
        
         ....   
         ....

}

 （2）StudentinfoDAO类中的paginationAllStudent()方法，主要是用于获得数据，返回PaginationSupport类型，

 （3）DWR配置文件

<!--因为我使用了Spring，所以采取了这种方式-->
<create creator="spring" javascript="StudentUtils">
	<param name="beanName" value="studentinfoDAO" />  
</create>
<!--如果一般情况下，使用以下配置就可以了-->
<create creator="new" javascript="Demo">
	<param name="class" value="your.java.Bean" />
</create>

<!--转换前台获得数据可能用到的JavaBean-->
<!--效果即可以使用以下类中的getXXX方法在前台得到数据-->
<convert match="org.wiki.student.utils.PaginationSupport" converter="bean"/>
<convert match="org.wiki.student.domain.models.*" converter="bean"/>

 （4）前台页面Javascript代码

function getData(startIndex){
     //调用DWR中的方法获得数据，startIndex翻页索引
    //假如每页5条数据，那么第一页为0，第二页为5...
    //callback为DWR中的回调函数，用于获得数据
     StudentUtils.paginationAllStudent(startIndex, callback);
     }
     
     //定义回调函数，即如何显示数据
     function callback(data){
          //这里采用dwr工具包util中方法进行数据输出
          //注意这里的data参数，出现多次，并非指同一个对象
         //首先清空页面中id为tableContent的tbody标签数据
         dwr.util.removeAllRows("tableContent");
         
        //定义数据输出方式的一个函数组。
         //以下data参数其实可以自己任意命名
         var cellfuncs = [function(data){
         //获得当前数据，并构建一个超链接
         var aTemp = document.createElement("a");
         aTemp.href="${pageContext.request.contextPath }/student/course.do?sid="+data.stuid;
         aTemp.innerHTML=data.stuid+"查看详情";
         return aTemp;},
  						  function(data){return data.stuno;},
  						  function(data){return data.stuname;},
  						  function(data){
                                                  //后台数据为m或w 字符，在此格式化输出
  						  if(data.sex=='m')
  						    return '男';
  						  else 
  						    return '女';
  						  }, 
  						  function(data){ return data.fomartDate;},
  						  function(data){return data.address;},  
  						  function(data){return data.telephone;},  
  						  function(data){return data.remark;},
  						 ] 
	 //为id是tableContent的tbody填充数据，数据集存放在data.items,
        // 填充的输出方式为cellfuncs   
         dwr.util.addRows("tableContent",data.items,cellfuncs);         
     }

 以上基本上是主要涉及的代码，可能还会涉及到一些页面初始化的Javascript，需要的可以联系我。

谢谢楼主的分享，我想看一下页面的代码是如何实现的？就是在页面填充tbody的那里

最好把代码分享下吧，谢谢。

示例代码见：
http://wikimo.iteye.com/blog/356833