您的位置：首页 > Web前端 > JQuery

struts+Ajax(jquery)分页

2010-02-04 01:11 330 查看

今天我真高兴，终于把struts+Ajax(jquery)动态分页做出了，而且火狐，IE都支持。先看截图：（本机图片无法上传，遗憾），那就直接看源码吧：

testPage.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="include.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>分页测试</title>

  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>

  <script type="text/javascript">
$(document).ready( function() {

  //初始化分页开始
  var allPages=$('#allPages').html();
  var curPage = $('#curPage').html()+1;

  //alert(parseInt(curPage)+10);
  if(parseInt(curPage)+9<allPages){
   for(var i=0;i<10;i++){
      $('.page').append('<td width="25" height="25" align="center" valign="middle" class="num">'
            +(i+parseInt(curPage))+'</td>');
   }
  }else{
   $('.page').append('<td width="25" height="25" align="center" valign="middle" class="num">1</td>');
   $('.page').append('<td width="25" height="25" align="center" valign="middle" class="num">...</td>');
   for(var i=allPages-9;i<=allPages;i++){
      $('.page').append('<td width="25" height="25" align="center" valign="middle" class="num">'
            +(i)+'</td>');
   }
  }
  //初始化分页结


  //为当前页添加样式
  $('.num').each(function(){
   //alert(parseInt($(this).html()));
   if(parseInt($(this).html())==parseInt(curPage)){$(this).addClass('pageIn');}
  })

     //分页鼠标滑入滑出是的样式开始
     $('.num').hover( function() {
      $(this).removeClass('pageHoverOut');
      $(this).addClass('pageHoverIn');
     }, function() {
      $(this).removeClass('pageHoverIn');
      $(this).addClass('pageHoverOut');
     });
     //分页鼠标滑入滑出是的样式结束

     //鼠标点击事件开始

     $('.num').click( function() {
      $('.num').removeClass('pageIn');
      $(this).each( function(index) {
       $(this).addClass('pageIn');
       $('#curPage').html($(this).html());

       //$.post('/JqueryUITest/testPage.do?cPage='+$('#curPage').html());

       //$.ajax({url: '/JqueryUITest/testPage.do?cPage='+$('#curPage').html(),type:'post',async: false});
       location.href="/JqueryUITest/testPage.do?cPage="+$('#curPage').html();
      });

     });
     //鼠标点击事件结束

    })
</script>

  <style type="text/css">
body {
font-size: 12px;
}

.page td {
cursor: pointer;
border: 1px solid #9C0;
}

.pageHoverIn {
background-color: #000;
color: #FFF;
font-weight: bold;
}

.pageHoverOut {
background-color: #FFF;
color: #000;
}

.pageIn {
background-color: #999;
color: #F00;
}
</style>
</head>

<body>
  f分页测试当前共${requestScope.allPages }也
  <div id="allPages" style="display: none;">
  ${requestScope.allPages }
  </div>
  <div id="curPage" style="display: none;">
  ${requestScope.cPage}
  </div>
  <br />
  <br />
  <br />
  <br />
  <table border="0">
   <tr class="page">
    

    

    
    <td width="60" height="25" align="center" valign="middle">
     共16页
    </td>
   </tr>
  </table>

  <br />
  <br />
  <br />
  <br />
  <table border="0">
   <tr class="page">
    

    

    
    <td width="60" height="25" align="center" valign="middle">
     共16页
    </td>
   </tr>
  </table>

</body>
</html>

TestPageAction.java

package jquery.ui.plugin.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class TestPageAction extends Action {

@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  String cPage=request.getParameter("cPage");
  System.out.println("cPage:"+cPage);
  System.out.println("我是服务器段");

  request.setAttribute("allPages", 16);
  request.setAttribute("cPage", cPage);


  return mapping.findForward("ok");
}

}

struts-config.xml

<action path="/testPage"
    type="jquery.ui.plugin.action.TestPageAction">
    <forward name="ok" path="/testPage.jsp" />
   </action>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： struts jquery ajax function class border

相关文章推荐

新的分享

章节导航