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" onchange="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
	}
});