<span style="font-family: Arial, Helvetica, sans-serif;">最近用到dwz,遇到了一个很奇怪的翻页问题。问题描述如下:</span>
1. 点击上、下一页,左右箭头,都可以正确翻页;
2. 在输入框内输入页码数字,点击后面的箭头,可以翻页;
3. 在输入框内输入页码数字,回车,无法翻页,页面重新跳回首页,即:pageNum=1
我开始摸不着思路,以为是我组件用错了。因为我是这样使用组件的:
<div class="pageContent">
<table class="table" width="100%" layoutH="${param.layoutH }" rel="jbsxBox">
.....
</table>
</div>
<%@ include file="/common/page.jsp" %>
而page.jsp页面,就是官方提供的模板代码:
<div class="panelBar">
<div class="pages">
<span>显示</span>
<select class="combox" οnchange="dwzPageBreak({'data':{'numPerPage':this.value},'rel':'${jbsxBox }','targetType' :'${targetType }'})">
<option value="20" <c:if test="${pageBreaker.pageSize == 20}"> selected="selected" </c:if>>20</option>
<option value="50" <c:if test="${pageBreaker.pageSize == 50}"> selected="selected" </c:if>>50</option>
<option value="100" <c:if test="${pageBreaker.pageSize == 100}"> selected="selected" </c:if>>100</option>
<option value="200" <c:if test="${pageBreaker.pageSize == 200}"> selected="selected" </c:if>>200</option>
</select>
<span>条, 共${pageBreaker.totalCount}条</span>
</div>
<div class="pagination" totalCount="${pageBreaker.totalCount}" rel="${jbsxBox }" targetType="${targetType }"
currentPage="${pageBreaker.pageIndex}" numPerPage="${pageBreaker.pageSize}" pageNumShown="5">
</div>
<input type="hidden" id="pageNum" name="pageNum" value="${pageBreaker.pageIndex}" />
<input type="hidden" name="numPerPage" value="${pageBreaker.pageSize}" />
</div>
结果表明:不拆开,翻页一点问题都没有;拆开,回车马上就不能翻页。所以,问题出在拆开的问题上。
但是,我必须把文件拆开使用,不然那么多分页的,每个都复制粘贴,鬼才这样做。还得继续追问题的根源。
第二次,我尝试捕获访问分页页面时,向服务器提交的数据,准备测试是否在拆开的情况下,pageNum的值获取不正确。
利用调试工具,我发现,前2种翻页方式都很正确,就是第三种翻页方式会向服务器发2次ajax请求。
仔细一查2次请求的头,发现第一次请求时pageNum是自己输入的,但第二次请求的pageNum=1了。好啦,看到希望了。
到这里,开始去追溯dwz翻页的源代码,找到翻页组件针对输入框的按键事件。
在dwz.pagination.js中,定位到如下代码:
$button.click(function(event){
var pageNum = $inputBox.val();
if (pageNum && pageNum.isPositiveInteger()) {
dwzPageBreak({
targetType:pc.targetType(),
rel:pc.rel(),
data: {pageNum:pageNum}
});
}
});
$inputBox.keyup(function(event){
if (event.keyCode == DWZ.keyCode.ENTER)
$button.click();
}
初看代码,我没有发现什么问题,只好在此打断点,进行动态跟踪调试。
调试时发现,无论拆不拆开分页组件,keyup事件都可以正常捕获到,并触发button的click事件。但奇怪的就是,拆开写时,enter之后确实会发送2次请求。
甚至比较1次请求和2次请求之间的请求头的差别,也没有任何问题。
测试之后,我纳闷地再次顶着代码看,突然注意到,我去,应该enter的默认事件造成的。
于是,我照着下面这样修改代码后测试,翻页没有任何问题了:
$inputBox.keypress(function(event){
if (event.keyCode == DWZ.keyCode.ENTER) {
$button.click();
event.preventDefault();ui
}
});