今天接到一个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没法识别,就选择获得最后一页的数据。

- 大小: 35.5 KB
分享到:
相关推荐
- **Pagination**:分页组件,帮助用户在大量数据中分页浏览,提供上一页、下一页、跳转页码等操作。 **3. 使用步骤** - 引入jQuery库和EasyUI CSS、JS文件。 - 定义HTML结构,添加必要的class和id属性。 - 初始化...
- `prevPage`:跳转到上一页。 ##### 9. Window(窗口) **Window** 控件类似于 Dialog 控件,但更加强大灵活。 - **实例**: - HTML 结构定义了窗口的基本内容,通过 JavaScript 初始化窗口。 - **参数**: -...
6. **分页器(pagination)**:如前面所述,分页器的“上一页”、“下一页”、“跳转到第几页”等按钮的文字和状态提示均会转换为中文。 7. **其他组件**:包括树形视图(tree)、下拉树(combobox)、滑块(slider...
EasyUI的分页组件可以轻松集成到datagrid中,它提供上一页、下一页、跳转页码以及显示每页记录数的选择,帮助用户高效浏览数据。实现分页通常涉及以下步骤: - 首先,在HTML中创建一个包含`<div>`的容器,指定`...
- **FEATURES 特性**:可定制分页样式,支持上一页、下一页、跳转到指定页等操作。 - **EVENTS 事件**:如分页改变事件,用于更新数据。 - **METHODS 方法**:提供了切换页码、设置总页数等接口。 以上内容仅是...