BOOTSTRAP TABLE表格前台分页，点击TAB选项，重新刷新表格

汪星人

近期做项目的时候使用bootstrap表格前台分页，并且有一个tab切换选项，共用一个table，效果如下图，上方是tab选项，下方是table:



在实际实现的时候，在默认状态下，表格翻到了第5页，此时我要按年龄进行筛选，刚开始我的做法是直接$("#table").bootstrapTable('refresh',option)；option里边是一个筛选的条件，这样的效果是页面会展示所选条件下第5页的内容，而不是第一页的内容，这就违背了项目的需求，后来经过搜索、探讨找到了一种解决方案就是重新tab筛选的时候，需要先销毁表格，然后重新初始化：$("#table").bootstrapTable('destroy');先要将table销毁，否则会保留上次加载的内容，initTable(options);重新初使化表格,option为tab来回切换时的筛选条件，这样一来解决了tab切换时出现的问题，表格前台分页是这样，后台分页也是这样。希望对大家有所帮助，描述不清楚的、或者不理解的请留言!

补充：

以上是一个最直接的解决方案，后来在项目中发现还有另外两种解决方案：

$("#table").bootstrapTable('refresh',{url : path );

$("#table").bootstrapTable('refreshOptions',{pageNumber : 1});

这两种方式都可以实现。

refresh：从server端重新获取数据。

refreshOptions：更新bootstrapTable options，并从server端获取数据。与refresh的区别在于，refreshOptions设置的option，会被作为下次请求server数据的默认option使用。