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

最新推荐文章于 2021-12-28 10:01:08 发布

最新推荐文章于 2021-12-28 10:01:08 发布 · 812 阅读

文章标签：

#javascript #ViewUI

Javascript 专栏收录该内容

7 篇文章

订阅专栏

本文解决了一个在使用EasyUI datagrid时遇到的Bug：点击下一页时跳转到最后一页而非第二页。问题源于pageNumber参数传递的字符串类型与预期整型不符。

今天接到一个bug：初次进入页面easyui-datagrid加载出第一页的数据，点击下一页的时候不是到第二页而是到最后一页。

如下图所示：

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

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

$('#xxTable').datagrid({
		pageNumber : $("#pageNo").val(),
		loadMsg:'数据加载中,请稍后...',
		pageList:[10], //设置每页显示多少条
		//查询条件
		queryParams:{
			"userName":userName,
			"startTime":startTime,
			"endTime":endTime,
			"conditionDto_levelId":conditionDto_levelId,
			"conditionDto_stateId":conditionDto_stateId,
			"companyName":companyName,
		},
		onLoadError:function(){
			alert('数据加载失败!');
		},
		onClickRow:function(rowIndex, rowData){
			//取消选择某行后高亮
			$('#infoMemberTable').datagrid('unselectRow', rowIndex);
		},
		onLoadSuccess:function(){
			//保存当前页码到hidden标签中
                                setPageNumber();
		}
	}).datagrid('acceptChanges') ;

上面datagrid的pageNumber是从hidden标签中取得值，经过alert($("#pageNo").val())，初次进入页面时，弹出的值确实是“1”。（注：之所以pageNumber : $("#pageNo").val()是为了保护用户输入）。

找了半天没结果，我索性把pageNumber : $("#pageNo").val()改成pageNumber : 1，结果让我大跌眼镜：bug消失了！

我非常纳闷：pageNumber : $("#pageNo").val()向后台传的值是1，而pageNumber : 1向后台传的值也是1，两者完全没区别，但为什么后者点下一页就不会跳到最后一页呢？

最后经过同事提醒：是不是js数据类型问题。我随后把代码改成这样：pageNumber : parseInt($("#pageNo").val())。ok，bug消失了，原来$("#pageNo").val()是一个万恶的字符串“1”，pageNumber只接收整数，无法识别字符串没结果造成了刚才的问题。

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

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

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