BootstrapTable刷新后/重新加载后跳到原页码的界面
程序员文章站
2022-07-15 10:47:08
...
BootstrapTable确实好用,这是我的感受,必须先鼓掌赞扬!
遇到的问题:
当我跳转到某页,修改一条记录的内容,保存后刷新页码,默认是调到BootstrapTable的第1页的界面。而我想跳转到刷新前所在的原页码的界面。好像下图所示,我想刷新后自动跳回BootstrapTable的第3页。
注明:我用“界面”一词,是因为起始BootstrapTable是所有数据都加载完毕,再进行分页展示,所以跳转到某个“页面”其实并不是“页面”。
由于遇到此问题,我就上网寻找方法。解决此问题,需要用到几个知识点,涉及到多个帖子。
因此,我将方法总结、并用自己的语言记录思路和步骤,希望大家批评指正:
简单来说就是以下4步
- 刷新的时候指定本页的地址作为跳转地址
- 在跳转的本页地址中添加表格页码作为参数
- 刷新后获取附在地址中的页码参数
- 使用BootstrapTable的官方方法使表格跳转
1.刷新的时候指定本页的地址作为跳转地址
举例说明,比如用jQuery等写的跳转代码一般是
window.location.reload();
需要传参则必须用本页的地址,如下
window.location.href = "<%=basePath%>flowwithrecord/list.action";
上面代码中引号的部分是根据实际情况的页面地址
2.在跳转的本页地址中添加表格页码作为参数
在第1步的页面地址中添加表格当前页码。
地址中“?”后是跟着参数名,然后“=”号后是跟参数值,这样的一个键值对的关系。参数键值对之间用“&”隔开。而这里只有一个参数,在jQuery代码中声明为pg。此BootstrapTable的ID是“tableFlows”。综上,就有了以下的代码了。
var $tableFlows = $('#tableFlows');
var pg = $tableFlows.bootstrapTable('getOptions').pageNumber; //获取当前页码
window.location.href = "<%=basePath%>flowwithrecord/list.action?tablePage=" + pg;
3.刷新后获取附在地址中的页码参数
其中location.search是本页的带参数地址,赋值给paraString;
tablePage则是从页面地址中获取的页码参数;
selectPage系BootstrapTable的一个方法,页码用parseInt方法进行处理变为整数类型,不然翻页控件会失灵。
代码见第4步下面的。
4.使用BootstrapTable的selectPage方法使表格跳转
window.onload=function(){
// 获取之前停留的页面页码
var paraString = location.search;
var tablePage = paraString.substr(paraString.indexOf("=") + 1);
// 跳转到对应的页面
var $tableFlows = $('#tableFlows');
$tableFlows.bootstrapTable('selectPage', parseInt(tablePage));
}
上一篇: Ansible过滤器使用总结
下一篇: 数组中只出现一次的数字(Java)