今天我真高兴,终于把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">首页</td>
<td width="60" height="25" align="center" valign="middle">上一页</td>-->
<!-- <td width="25" height="25" align="center" valign="middle">1</td>-->
<!--<td width="60" height="25" align="center" valign="middle">下一页</td>-->
<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">首页</td>
<td width="60" height="25" align="center" valign="middle">上一页</td>-->
<!-- <td width="25" height="25" align="center" valign="middle">1</td>-->
<!--<td width="60" height="25" align="center" valign="middle">下一页</td>-->
<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>