上一文中，我们介绍了如何使用page.jsp界面输出分页信息，那么针对于像动态表格，或者需要局部刷新的界面又如何处理呢。道理其实还是很简单，我们只需要按照需求让它按指定的动作进行即可以了。
具体的作法也很简单，我们只需要将所有的链接修改为一个点击函数就可以了，那么当点击链接时，具体界面怎么跳转，以及刷新哪个部分，这其实就与分页组件无关了。我们只需要将相应的链接传递给调用方，让调用方自行处理就行了，这样也可以保证分页组件的通用性。
在实现层面，原来的链接就是一个href链接，那么修改为ajax版之后，我们就将这个href链接当成一个参数传递给调用方，比如可以定义一个clickPage函数，然后把href传递给clickPage即可，当然，你也可以同时传递当前的页码，具体实现由需求决定。
简单参考代码如下所示:
<s:url id="goto"><s:param name="page.currentPage" value="1"/></s:url>
<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="首页"></s:a>
附完整实现代码：
<%-- 这是分页组件ajax版,即被嵌入到ajax显示的界面中,所以相应的链接均被替换为点击事件,以由上层调用方来确保相应的点击能够
按照正确的方式工作,规定相应的点击事件为clickPage(url),中间传递的参数为点击时触发的url链接.
created by flym 2010-09-20
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!-- 分页组件 -->
<s:if test="page.hasPreviousPage || page.hasNextPage">
<div class="turnpage">
<%-- 开头两个 --%>
<s:url id="goto"><s:param name="page.currentPage" value="1"/></s:url>
<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="首页"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></s:a>
<s:if test="page.hasPreviousPage">
<s:url id="goto">
<s:param name="page.currentPage" value="%{page.currentPage - 1}"/>
</s:url>
</s:if>
<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="上一页"><span class="ui-icon ui-icon-triangle-1-w"></span></s:a>
<%-- 页面显示 --%>
<s:if test="page.totalPage <= 6">
<s:bean name="org.apache.struts2.util.Counter" id="counter">
<s:param name="first" value="1"/>
<s:param name="last" value="page.totalPage"/>
</s:bean>
<s:iterator value="#counter">
<s:url id="goto"><s:param name="page.currentPage" value="top"/></s:url>
<s:if test="top == page.currentPage"><a class="cur"><span><s:property/></span></a></s:if>
<s:else><s:a href="%{goto}" onclick="clickPage('' + this.href);return false;"><span><s:property/></span></s:a></s:else>
</s:iterator>
</s:if>
<s:else>
<s:bean name="org.apache.struts2.util.Counter" id="counter">
<s:param name="first"
value="%{page.currentPage % 6 == 0 ? page.currentPage - 5 : page.currentPage / 6 * 6 + 1}"/>
<s:param name="last"
value="%{page.currentPage % 6 == 0 ? page.currentPage : (page.currentPage / 6 * 6 + 6) < page.totalPage ? (page.currentPage / 6 * 6 + 6) : page.totalPage}"/>
</s:bean>
<s:iterator value="#counter">
<s:url id="goto"><s:param name="page.currentPage" value="top"/></s:url>
<s:if test="top == page.currentPage"><a class="cur"><span><s:property/></span></a></s:if>
<s:else><s:a href="%{goto}" onclick="clickPage('' + this.href);return false;"><span><s:property/></span></s:a></s:else>
</s:iterator>
</s:else>
<%-- 结尾两个 --%>
<s:url id="goto"><s:param name="page.currentPage" value="page.totalPage"/></s:url>
<s:if test="page.hasNextPage">
<s:url id="goto"><s:param name="page.currentPage" value="%{page.currentPage + 1}"/></s:url>
</s:if>
<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="下一页"><span class="ui-icon ui-icon-triangle-1-e"></span></s:a>
<s:url id="goto"><s:param name="page.currentPage" value="page.totalPage"/></s:url>
<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="尾页"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></s:a>
页次:<s:property value="page.currentPage"/>/<s:property value="page.totalPage"/>
每页:<s:property value="page.pageSize"/>条
共计:<s:property value="page.totalCount"/>条
<s:if test="page.totalPage <= 100">
<s:bean name="org.apache.struts2.util.Counter" id="counter">
<s:param name="first" value="1"/>
<s:param name="last" value="page.totalPage"/>
</s:bean>
<select onchange="clickPage('' + $(this).val());return false;" size="1">
<s:iterator value="#counter">
<s:url id="goto"><s:param name="page.currentPage" value="top"/></s:url>
<s:if test="top == page.currentPage">
<option value="<s:property value="%{goto}"/>" selected="selected">第<s:property/>页</option>
</s:if>
<s:else>
<option value="<s:property value="%{goto}"/>">第<s:property/>页</option>
</s:else>
</s:iterator>
</select>
</s:if>
</div>
</s:if>
转载请标明出处:i flym
本文地址:https://www.iflym.com/index.php/code/201303110002.html