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


Posted in Javascript onAugust 31, 2017

开始的时候先把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" 
     }); 
    }

出现如下的错误显示:

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

经过查找分析,只需要将上面代码中标红的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隐藏后显示问题的实现代码

总结

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

Javascript 相关文章推荐
JavaScript URL参数读取改进版
Jan 16 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
js选项卡的实现方法
Feb 09 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 #Javascript
基于canvas粒子系统的构建详解
Aug 31 #Javascript
Vue 组件间的样式冲突污染
Aug 31 #Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 #Javascript
JavaScript基础之流程控制语句的用法
Aug 31 #Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
php常用文件操作函数汇总
2014/11/22 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
django+mysql的使用示例
2018/11/23 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
在Python中COM口的调用方法
2019/07/03 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
基于Python实现扑克牌面试题
2019/12/11 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
标记环介质访问控制协议
2016/03/27 面试题
十周年庆典策划方案
2014/06/03 职场文书
大学生就业求职信
2014/06/12 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
语文教师个人工作总结
2015/02/06 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python