struts+Ajax(jquery)分页

最新推荐文章于 2024-09-21 22:20:54 发布

heut_kong

最新推荐文章于 2024-09-21 22:20:54 发布

阅读量1.6k

点赞数

分类专栏： jquery jquery ui 文章标签： struts jquery ajax function class border

本文链接：https://blog.csdn.net/heut_kong/article/details/5286949

版权

jquery ui 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jquery

0 篇文章 0 订阅

订阅专栏

今天我真高兴，终于把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>

  //初始化分页开始
  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>

.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>

<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