BootstrapTable 获取当前页、数据刷新后留在当前页

最新推荐文章于 2024-05-21 16:45:41 发布

Alan_ZhQ

最新推荐文章于 2024-05-21 16:45:41 发布

阅读量3.3w

点赞数 4

分类专栏： BootstrapTable 文章标签： BootStrapTable

本文链接：https://blog.csdn.net/qq_31302091/article/details/80894940

版权

3 篇文章 0 订阅

订阅专栏

最近的项目中使用BootstrapTable组件进行开发，开发过程中遇到了这样一个需求：

table分页后，对某页中的某条数据进行处理后，刷新表格，为了保证table的实时正确性，先进行table的destroy，然后获取新建table并获取数据

$('#bootstrapTableId').bootstrapTable('destroy');
$('#bootstrapTableId').bootstrapTable({
    ...
    pageNumber:1,
    ...
    });

在接下来的开发过程中，如果对某条数据进行操作后，需要对表格数据进行刷新，但是刷新后表格，pageNumber会重置为1，也就是会跳回至首页。如何让数据处理后仍能够留在当前页，这里有两种办法：

1， refresh：刷新表格数据，可以加入参数url指定请求发向的url（可以是一个新的），silent:true时静默更新，query:{} 可以指出一些新的ajax请求时的参数。

$('#bootStrapTableId').bootStrapTable('refresh')；

2，获取当前table显示的页码，也就是当前table分页所显示的第几页，通过对表格数据处理后的回调函数中加入table的当夜页码，从而让table在destroy之后，以给定的显示页码进行渲染数据：

$('#bootStrapTableId').bootStrapTable('getOptions').pageNumber;

注：getOptions：获取表格的一些基本属性，返回一个object，key有像conlumns，data，sortOrder，class这些很多属性，不清楚有哪些属性的，可以控制台console一下看看

pageNumber：这个是之前你的bootstraptable的属性

总结：最后采用了2中的方法解决，这样能够及时性的确保表格是被销毁后重新发起请求渲染出的数据，可以保证数据的正确性，至于refresh方法，是对表格进行刷新，可以理解为ajax的局部请求效果，我没有去深入了解该方法，不过也是可以实现需求的。

新增：贴出项目的开发代码：

1，这里是两个隐藏域文本框，用于存放pageNumber和pageSize，初始值为1和10，这里你也可以用当前js的全局变量来做

2，这里是对查询的当页数据进行操作的代码

3，获取table的方法，红框位置是进行一个判断，因为项目中有多个方法查询，form参数表示表单参数查询，不是form的话，就采用传入的指定pageSize和pageNumber来渲染table，这里根据项目的情况而定。

关注