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

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

建站学院(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>&nbsp;&nbsp;
    <a href="javaScript:up()">上一页</a>&nbsp;&nbsp;
    <a href="javaScript:next()">下一页</a>&nbsp;&nbsp;
    <a href="javaScript:last()">最后一页</a>&nbsp;&nbsp;
  </body>
</html>

猜你在找的Ajax相关文章