频道导航

使用DWR 轻轻松松实现Ajax实现分页

2020-11-04 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了使用DWR 轻轻松松实现Ajax实现分页，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_403_1@

建站学院（LieHuo.Net）文档 本教程中是以DWR(AJAX的一种Java实现)做的分页!

1.以下是DWR的配置

(1)在web.xml中配置DWRServlet如下：

以下为引用的内容：

<servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <display-name>DWR Servlet</display-name>
        <description>Direct Web Remoter Servlet</description>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
    </servlet>

    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

(2)在dwr.xml中配置

以下为引用的内容：
<dwr>
<allow>
<create javascript="GetPages" creator="new">
<param name="class" value="com.GetPages"></param>
</create>
<convert match="com.PageBean" converter="bean">
<param name="include" value="job_id,job_desc,min_lvl,max_lvl"></param>
</convert>
</allow>
</dwr>

2.编写PageBean以存放要显示的数据

以下为引用的内容：
private String job_id;
private String job_desc;
private String min_lvl;
private String max_lvl;

3.编写getPage类实现分页,代码如下:

以下为引用的内容：
public int getFirst(int page)
{
pages=page;
return pages;
}
public int getNext(int page)
{
if(page==pageCount)
{
   return pageCount;
}else
{
   pages=page;
   return pages+1;
}
}
public int getUp(int page)
{
if(page==1)
{
   return pages;
}else
{
   pages=page;
   return pages-1;
}
}
public int getLast(int page)
{
return pageCount;
}
public List<PageBean> getJobs(int page)
{
list=new ArrayList<PageBean>();
String sql;
con=connect.getCon();
try {
   stm=con.createStatement();
   if(page==1)
   {
    sql="select top 5 * from jobs";
   }else
   {
    sql="select top 5 * from jobs where job_id not in (select top "+5*(page-1)+" job_id from jobs)";
   }
   rs=stm.executeQuery(sql);
   while(rs.next())
   {
    pb=new PageBean();
    pb.setJob_id(rs.getString("job_id").toString());
    pb.setJob_desc(rs.getString("job_desc").toString());
    pb.setMin_lvl(rs.getString("min_lvl").toString());
    pb.setMax_lvl(rs.getString("max_lvl").toString());
    list.add(pb);
   }
} catch (sqlException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
}
return list;
}

4.新建个页面调用getPage类中的方法

以下为引用的内容：

<html>
<head>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/interface/GetPages.js"></script>
    <script type="text/javascript">
     var page=1;

     function first()
     {
      GetPages.getFirst(1,callback);
     }
     function callback(pages)
     {
      page=pages;
      GetPages.getJobs(pages,process);
     }
     function next()
     {
      GetPages.getNext(page,callback);
     }
     function up()
     {
      GetPages.getUp(page,callback);
     }
     function last()
     {
      GetPages.getLast(page,callback);
     }
     function process(item)
     {
      DWRUtil.removeAllRows("job");
       var cell=[
        function(item){return item.job_id},
        function(item){return item.job_desc},
        function(item){return item.min_lvl},
        function(item){return item.max_lvl}
       ];
       DWRUtil.addRows("job",item,cell);
     }

    </script>
</head>

<body onload="javaScript:first();">
<table border="1">
   <tbody id="job">

   </tbody>
</table>
    <a href="javaScript:first()">第一页</a>  
    <a href="javaScript:up()">上一页</a>  
    <a href="javaScript:next()">下一页</a>  
    <a href="javaScript:last()">最后一页</a>  
</body>
</html>