BootStrap中Table隐藏后显示问题的实现代码

 更新时间:2017年08月31日 09:49:14   作者:-lim-   我要评论
这篇文章主要介绍了BootStrap中Table隐藏后显示问题的实现代码,需要的朋友可以参考下

开始的时候先把table隐藏了,由于判断条件让它显示,结果出现错位的问题。

//前台代码:
<h3 id="faultanalysis-head" class="text-center" style="display:none"><strong>faultanalysis-table</strong></h3> 
<table id="faultanalysis-table" data-height="300" style="display:none"></table> 
//后台代码:
if (resp.data.gch_faultanalysis.length!=0) { 
     console.log("gch_faultanalysis不为空!"); 
     element.find("#faultanalysis-head").css("display","block"); 
     element.find("#faultanalysis-table").css("display","<span style="color:#ff0000;">block</span>"); 
     element.find("#faultanalysis-table").bootstrapTable({ 
      columns:resp.data.faultanalysisVar, 
      pagination:"true", 
      //sidePagination:"client", 
      search:"true", 
      clickToSelect: true, 
      data: resp.data.gch_faultanalysis, 
      singleSelect:"true", 
      showColumns:"false", 
      showRefresh:"true", 
      showToggle:"true", 
      maintainSelected:"true", 
      //height:"413" 
     }); 
    } 

出现如下的错误显示:

经过查找分析,只需要将上面代码中标红的block就好了,而且这个不会对<h>产生影响。修改后代码如下:

//前台代码:
<h3 id="faultanalysis-head" class="text-center" style="display:none"><strong>faultanalysis-table</strong></h3> 
<table id="faultanalysis-table" data-height="300" style="display:none"></table> 
//后台代码:
if (resp.data.gch_faultanalysis.length!=0) { 
     console.log("gch_faultanalysis不为空!"); 
     element.find("#faultanalysis-head").css("display","block"); 
     element.find("#faultanalysis-table").css("display",""); 
     element.find("#faultanalysis-table").bootstrapTable({ 
      columns:resp.data.faultanalysisVar, 
      pagination:"true", 
      //sidePagination:"client", 
      search:"true", 
      clickToSelect: true, 
      data: resp.data.gch_faultanalysis, 
      singleSelect:"true", 
      showColumns:"false", 
      showRefresh:"true", 
      showToggle:"true", 
      maintainSelected:"true", 
      //height:"413" 
     }); 
    } 

修改后的截图如下:

总结

以上所述是小编给大家介绍的BootStrap中Table隐藏后显示问题的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对澳门金沙网上娱乐网站的支持!

相关文章

  • JavaScript创建对象方法实例小结

    JavaScript创建对象方法实例小结

    这篇文章主要介绍了JavaScript创建对象方法,结合实例形式总结了javascript创建对象的基本原理及使用工厂模式、构造函数模式与原型模式创建对象的相关实现技巧,需要的朋友可以参考下
    2018-09-09
  • JS+canvas动态绘制饼图的方法示例

    JS+canvas动态绘制饼图的方法示例

    这篇文章主要介绍了JS+canvas动态绘制饼图的方法,结合具体实例形式分析了js+canvas实现饼状图形绘制的相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • JavaScript的for循环中嵌套一个点击事件的问题解决

    JavaScript的for循环中嵌套一个点击事件的问题解决

    本文主要介绍了JavaScript的for循环中嵌套一个点击事件点击一次弹出多个相同的值的解决方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • p5.js实现斐波那契螺旋的示例代码

    p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • JavaScript模拟鼠标右键菜单效果

    JavaScript模拟鼠标右键菜单效果

    这篇文章主要为大家详细介绍了JavaScript模拟鼠标右键菜单效果的实现代码,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js获取当前时间显示在页面上并每秒刷新

    js获取当前时间显示在页面上并每秒刷新

    这篇文章主要介绍了js获取当前时间显示在页面上并每秒刷新,需要的朋友可以参考下
    2014-12-12
  • 利用babel将es6语法转es5的简单示例

    利用babel将es6语法转es5的简单示例

    Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以下面这篇文章就来给大家详细介绍了关于利用babel将es6语法转es5的相关资料,文章通过示例介绍的非常详细,需要的朋友可以参考下。
    2017-12-12
  • JavaScript正则表达式和级联效果

    JavaScript正则表达式和级联效果

    正则表达式(regular expression)是一种字符串匹配的模式,用来检查一个字符串中是否包含指定模式的字符串。下面通过本文给大家分享JavaScript_正则表达式和级联效果,感兴趣的朋友一起看看吧
    2017-09-09
  • 深入理解ES6中let和闭包

    深入理解ES6中let和闭包

    本篇文章主要介绍了深入理解ES6中let和闭包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • js省市区级联查询(插件版&无插件版)

    js省市区级联查询(插件版&无插件版)

    这篇文章主要为大家详细介绍了js省市区级联查询,包括插件版和无插件版,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论