近期做项目的时候使用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使用。

bootstrap table表格前台分页,点击tab选项,重新刷新表格的更多相关文章

  1. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  2. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  3. 【转】bootstrap table轻松实现数据表格

    在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台 ...

  4. bootstrap table分页跳转到第一页

    1.destroy后重新初使化表格,可以将表格初始化封装为一个函数,destory后重新调用该函数进行初始化: 2.使用url刷新表格,$('#table').bootstrapTable('refr ...

  5. 表格组件神器:bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

  6. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  8. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  9. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

随机推荐

  1. Centos-6.5搭建oracle11g RAC集群

    一.基本概念 RAC( Real Application Clusters-----真正的应用集群) RAC数据库是Oracle公司数据库的集群解决方案.高可用性解决方案.两个或多个服务器之间通过一个 ...

  2. DAY13 迭代器与生成器

    一.迭代器 定义:器:包含了多个值的容器 迭代:循环反馈(一次从容器中取出一个值) 迭代器:从装有多个值的容器中一次取出一个值给外界 优点:不依赖索引,完成取值 缺点:不能计算长度,不能指定位取值(只 ...

  3. 快速测试方法——JUnit

    特点:写一个类,里面可以执行多个方法. 在一个方法上面添加@Test,选中方法名,右键run,即可执行当前方法 import org.junit.Test; //注:测试方法要求:不能有返回值,不能有 ...

  4. [Spring MVC] 取控制器返回的ModelAndView/Map/Model/Request的对象

    ${key }页面可取, <input value="${key}"> 或者<%=request.getParameter("key")%&g ...

  5. GSEA - Gene set enrichment analysis 基因集富集 | ORA - Over-Representation Analysis 分析原理与应用

    RNA-seq是利器,大部分做实验的老板手下都有大量转录组数据,所以RNA-seq的分析需求应该是很大的(大部分的生信从业人员应该都差不多要沾边吧). 普通的转录组套路并不多,差异表达基因.富集分析. ...

  6. express+mockjs实现模拟后台数据发送

    前言: 大多数时候,前端会和后端同时进行开发,即在我们开发完页面的时候,很可能还不能立马进入联调阶段,这个时候,为了保证我们接口的有效性和代码的功能完整,我们可能需要模拟数据. 模拟数据方法 1.通过 ...

  7. NFine中权限判断出错的问题

    NFine中权限判断出错的问题 问题描述:登录后点击栏目一,弹出了窗口一,再点击栏目二,弹出了窗口二,然后再点击窗口一,再执行窗口一中的操作时,发现已没有任何权限,调试后发现在HandlerAutho ...

  8. nginx upstream的五种分配方式

    Nginx负载均衡选项upstream用法举例 1.轮询(weight=1) 默认选项,当weight不指定时,各服务器weight相同,每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器d ...

  9. laravel框架实现数据的删除和修改

    //模型层的调用 <?phpnamespace App;use Illuminate\Support\Facades\DB;use Illuminate\Database\Eloquent\Mo ...

  10. 最近使用Navicat for MySQl访问远程mysql数据库,出现报错,显示“2003- Can't connect MySQL Server on 'localhost'(10038)“。

    优先考虑mysql数据库是否开启 1.先看报错窗口.   通过百度,最终找到的原因是:远程3306端口未对外开放. 于是下面进行远程3306端口开放操作.   首先远程连接服务器,点击“开始”-“管理 ...