zoukankan      html  css  js  c++  java
  • 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使用。

  • 相关阅读:
    生于忧患,死于安乐
    【网络流24题】骑士共存问题
    【网络流24题】最长不下降子序列问题
    【网络流24题】太空计划问题
    SG函数
    【网络流24题】餐巾计划问题
    【APIO2019】奇怪装置
    【HEOI2016/TJOI2016】游戏
    【SDOI2015】星际战争
    【CQOI2009】跳舞
  • 原文地址:https://www.cnblogs.com/web-panpan/p/7278367.html
Copyright © 2011-2022 走看看