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使用。

  • 相关阅读:
    Build 2019 彩蛋
    崂山
    Win10 iot 修改日期时间
    《 结网:改变世界的互联网产品经理 》
    <[你在荒废时间的时候别人都在拼命!]>
    《时间的玫瑰》阅读笔记
    翻石头价值投资手册-科技行业
    No module named flask.ext.sqlalchemy.SQLALchemy
    《寻找伟大的企业》
    <《基金经理投资笔记丛书4-1:投资是一种生活方式》>
  • 原文地址:https://www.cnblogs.com/web-panpan/p/7278367.html
Copyright © 2011-2022 走看看