jquery easyUI pagination分页控件点击下一页后跳转到最后一页的问题

easyui-pagination点击下一页直接跳转到最后一页的可能原因

今天做到聊天记录展示页面的时候发现一个bug：初次进入页面加载出第一页的数据，点击下一页的时候不是到第二页而是到最后一页。如下图所示：

这个bug确实让我很郁闷，最初以为是后台的问题，调试了一会儿发现跟后台没关系。

随后检查了下js代码，我的pagination js是这样写的：

Js代码

$('#pp').pagination({

total:'${chatHistory.total}',

pageNumber: '${pageNum}',

pageSize:'${pageSize}',

onSelectPage:function(pageNumber, pageSize){

$(this).pagination('loading');

//alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);

$(this).pagination('loaded');

self.location.href="<%=request.getContextPath()%>/message/t oChatHistory.action?senderId=${senderId}&page="+pageNumber+ "&rows="+pageSize;

}

});

上面pagination的pageNumber是从hidden标签中取得值，经过alert('${pageNum}')，初次进入页面时，弹出的值确实是“1”。

找了半天没结果，我索性把pageNumber :'${pageNum}'改成pageNumber : 1，结果bug消失了！

我非常纳闷：pageNumber : '${pageNum}'向后台传的值是1，而pageNumber : 1向后台传的值也是1，两者完全没区别，但为什么后者点下一页就不会跳到最后一页呢？

最后找到原因：js数据类型问题。我随后把代码改成这样：pageNumber : parseInt('${pageNum}')。ok，bug消失了，原来

'${pageNum}'的值是一个字符串“1”，pageNumber只接收整数，无法识别字符串没结果造成了刚才的问题。

经过上面的排查，我大概猜想easyui的整个运行过程：

第一次向后台发送请求时，datagrid会获取pageNumber中的值，并且把pageNumber的值保存起来。

用户点击下一页的时候，datagrid会使pageNumber+1然后把数据向后台发送，但是正如上面所说：如果遇到$("#pageNo").val()存的是一个字符串“1”，结果“1”+1会是一个字符串而不是一个整数，此时datagrid没法识别，就选择获得最后一页的数据。

正确的js代码：