科帮网-Java论坛、Java社区、JavaWeb毕业设计

登录/注册
您现在的位置:论坛 资料库 前端开发 > BOOTSTRAP TABLE表格前台分页,点击TAB选项,重新刷新表 ...
总共47924条微博

动态微博

查看: 995|回复: 0

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

[复制链接]

326

主题

72

听众

999

金钱

实习版主

该用户从未签到

优秀版主

发表于 2018-01-31 18:05:49 |显示全部楼层
近期做项目的时候使用bootstrap表格前台分页,并且有一个tab切换选项,共用一个table,效果如下图,上方是tab选项,下方是table:

mz.png

在实际实现的时候,在默认状态下,表格翻到了第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使用。


科帮网-Java论坛、Java社区、JavaWeb毕业设计 1、本主题所有言论和图片纯属会员个人意见,与本社区立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与科帮网-Java论坛、Java社区、JavaWeb毕业设计享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和科帮网-Java论坛、Java社区、JavaWeb毕业设计的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、科帮网-Java论坛、Java社区、JavaWeb毕业设计管理员和版主有权不事先通知发贴者而删除本文


JAVA爱好者①群:JAVA爱好者① JAVA爱好者②群:JAVA爱好者② JAVA爱好者③ : JAVA爱好者③

快速回复
您需要登录后才可以回帖 登录 | 立即注册

   

发布主题 快速回复 返回列表 联系我们 官方QQ群 科帮网手机客户端
快速回复 返回顶部 返回列表