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

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

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

注明:我用“界面”一词,是因为起始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));
}

你可能感兴趣的:(Java,JQuery,BootstrapTable,bootstrap)