欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

BootstrapTable刷新后/重新加载后跳到原页码的界面

程序员文章站 2022-07-15 10:47:08
...

BootstrapTable确实好用,这是我的感受,必须先鼓掌赞扬!

遇到的问题:
当我跳转到某页,修改一条记录的内容,保存后刷新页码,默认是调到BootstrapTable的第1页的界面。而我想跳转到刷新前所在的原页码的界面。好像下图所示,我想刷新后自动跳回BootstrapTable的第3页。
BootstrapTable刷新后/重新加载后跳到原页码的界面

注明:我用“界面”一词,是因为起始BootstrapTable是所有数据都加载完毕,再进行分页展示,所以跳转到某个“页面”其实并不是“页面”。

由于遇到此问题,我就上网寻找方法。解决此问题,需要用到几个知识点,涉及到多个帖子。
因此,我将方法总结、并用自己的语言记录思路和步骤,希望大家批评指正:

简单来说就是以下4步

  1. 刷新的时候指定本页的地址作为跳转地址
  2. 在跳转的本页地址中添加表格页码作为参数
  3. 刷新后获取附在地址中的页码参数
  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));
}