dwz分页组件中,一个奇怪的翻页问题的解决

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

解决这个问题时，我的第一次尝试就是，不用include指令，将page.jsp直接贴进去，测试组件使用是否正确。

结果表明：不拆开，翻页一点问题都没有；拆开，回车马上就不能翻页。所以，问题出在拆开的问题上。

但是，我必须把文件拆开使用，不然那么多分页的，每个都复制粘贴，鬼才这样做。还得继续追问题的根源。

第二次，我尝试捕获访问分页页面时，向服务器提交的数据，准备测试是否在拆开的情况下，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
	}
});