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使用。
bootstrap table表格前台分页,点击tab选项,重新刷新表格的更多相关文章
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
- 【转】bootstrap table轻松实现数据表格
在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台 ...
- bootstrap table分页跳转到第一页
1.destroy后重新初使化表格,可以将表格初始化封装为一个函数,destory后重新调用该函数进行初始化: 2.使用url刷新表格,$('#table').bootstrapTable('refr ...
- 表格组件神器:bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
随机推荐
- LINQ之路14:LINQ Operators之排序和分组(Ordering and Grouping)
本篇继续LINQ Operators的介绍,这里要讨论的是LINQ中的排序和分组功能.LINQ的排序操作符有:OrderBy, OrderByDescending, ThenBy, 和ThenByDe ...
- zabbix-3.4.14源码安装
此次介绍一下,zabbix的源码安装,因为zabbix的依赖很多,所以源码安装有很多依赖需要安装 首先,下载zabbix源码包 wget https://nchc.dl.sourceforge.net ...
- ssm+redis整合之redis连接池注入
package com.tp.soft.redis; import javax.annotation.Resource; import org.springframework.beans.factor ...
- vue+iview实现table和分页及与后台数据交互
最近在项目中遇到使用table分页的功能,所以分享出来给大家希望能够对大家有帮助,话不多说直接上代码 <template> <div> <Table :columns=& ...
- 了解多层交换中的CEF FIB CAM TCAM
来源:http://blog.51cto.com/redant/314151 多层交换是指交换机使用硬件来交换和路由数据包,通过硬件来支持4-7层的交换.交换机执行硬件交换,第3层引擎(路由处理器)须 ...
- javascript五种基本类型
typeof 功能:检测变量的类型 语法:console.log(typeof 变量) 或 console.log(typeof (变量)): 五大基本类型 1.underfined 声明变量但是 ...
- day34 GIL锁 线程队列 线程池
一.Gil锁(Global Interpreter Lock) python全局解释器锁,有了这个锁的存在,python解释器在同一时间内只能让一个进程中的一个线程去执行,这样python的多线程就无 ...
- Fedora 23 U盘启动出现“Failed to load ldlinux.c32”解决
利用UltraISO制作了Fedora 23的U盘启动,开机F12键USB启动时出现 Failed to load ldlinux.c32 Boot failed: please change dis ...
- 百度地图API---JS开发
百度地图API 开源地址:http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction#Https_.E8.AF.B4.E6 ...
- 2015-10-19 sql1
SQL SERVER(一) 一.设置登陆验证 1.右键点击数据库->属性->安全性设置密码登陆 2.数据库下找到安全性->登录名->sa,右键点击sa->属性(修 ...