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隐藏后显示问题的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-08-28

bootstrap——bootstrapTable实现隐藏列的示例

最近在学习bootstrap,正好今天看到了bootstrapTable隐藏列,留着以后参考. 主要代码: <script type="text/javascript"> $(function () { LoadingDataListOrderRealItems(); $('#tableOrderRealItems').bootstrapTable('showColumn', 'ShopName'); $('#tableOrderRealItems').bootstrapT

bootstrap制作jsp页面(根据值让table显示选中)

本文实例为大家分享了bootstrap制作jsp页面的具体代码,告诉大家如何让table显示选中,供大家参考,具体内容如下 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/views/resource.jsp"%> <body style

Bootstrap Table从服务器加载数据进行显示的实现方法

Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中.当然,这需要配置一些参数并进行初始化表格才行.其官方网站地址为:http://bootstrap-table.wenzhixin.net.cn/.里面可以下载使用所需的JS和CSS文件,以及参考文档和例子. Bootstrap-Table显示数据到表格的方式有两种,一种是客户端(client)模式,一种是服务器(server)模式. 所谓客户端模式,指的是在服务器中把要显示到表格的数据一次性加载出

Bootstrap Table表格一直加载(load)不了数据的快速解决方法

bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一个小问题:Bootstrap Table表格一直加载不了数据. $("#button").click(function(){ var name=$("input[name='name']").val(); $('#table').bootstrapTable('load

使用Bootstrap Tabs选项卡Ajax加载数据实现

本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码,供大家参考,具体内容如下 HTML代码(仅展示了部分关键性代码) <li class="active"> <a href="#home" data-toggle="tab" name="menu-ctrl"> <span class="glyphicon glyphicon-home"> &

jQuery结合AJAX之在页面滚动时从服务器加载数据

 简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载. 背景 是Facebook促使我写出了在滚动条滚动时再从服务器加载数据的代码.浏览facebook时,我很惊讶的发现当我滚动页面时,新的来自服务器的数据开始插入到此现存的数据中.然后,对于用c#实现同样的功能,我在互联网上了查找了相关信息,但没有发现任何关于用c#实现

巧用ajax请求服务器加载数据列表时提示loading的方法

我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 这里主要讲jQuery ajax的get,查询数据时,它的结构为: $.aja

Bootstrap treeview实现动态加载数据并添加快捷搜索功能

写在前面: jQuery多级列表树插件基于Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 具体效果请暂时移步: http://jonmiles.github.io

CI映射(加载)数据到view层的方法

本文实例讲述了CI映射(加载)数据到view层的方法.分享给大家供大家参考,具体如下: CI有个恶心的东西,就是需要把所有的数据都要放到$data数组中才能映射到view层,如: 当前我从数据库的link表(友情链接表,字段:id  name   url),搜索出来的数据方式: $query = $this->db->query("select id,name,url from cg_link where 1"); $links = $query->result();

AngularJS select加载数据选中默认值的方法

问题描述: 在我们开发项目过程中,避免不了会用到select下拉框,那么在angular中如何使用select呢? 解决方案: 可以用ng-options来动态加载option,然后在用ng-model来匹配.代码如下: //html <select ng-model="role_id1" ng-options="o.name for o in list5"></select> //js $scope.list5 = [{"id&q

解决bootstrap-select 动态加载数据不显示的问题

如下所示: 在使用bootstrap-select 动态加载数据的时候,refresh和render方法是必须使用的,不然就必须使用jquery往li对象里面填充数据,因为在bootstrap-select 中界面显示数据是通过li对象显示的,而select对象只是用于填充数据的,所以不要搞混了 以上这篇解决bootstrap-select 动态加载数据不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

bootstrap table插件动态加载表头

bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表加载的数据需求不同,所以需要动态的更换表头. 网上有很多加载表格数据的例子,但是却没有找到如何动态加载表格,再加在数据. 虽然可以一个表格加载一种数据,但是本着学习的态度尝试了下这种方式,结果发现是可以执行的.分享下思路和实现过程,以备日后使用. 思路: 1.写接口,查询出要展示的列.注意接口中必须要有字段中文名称(columns属性的title值),字段的英文名称(columns的field字段),特别注意filed