基于DWR、Hibernate、Spring实现的分页(一)

本文介绍了一个基于DWR框架实现的分页查询示例。通过Ajax技术从前端调用后端Java代码,实现学生信息的分页展示。重点介绍了PaginationSupport类、StudentinfoDAO类中的paginationAllStudent()方法、DWR配置文件及前端JavaScript代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

(图一 代码调用流程图)

 

以上是大致整个流程的调用过程。得到后台数据的方法主要是基于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,需要的可以联系我。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值