Twitter bootstrap 启动时隐藏引导表中的列

我有下表，其中我使用了

Bootstrap表

<div class="row mystyle" >
    <div class="col-md-12">
        <table id="mytable"  data-row-style="rowStyle" class="table table-hover" id="table-pagination " 
               data-url="labels.json" 
               data-toggle="table"
               data-pagination="true"
               data-show-pagination-switch="true"
               data-sort-order="desc" 
               data-search="true"
               data-show-refresh="true" 
               data-show-columns="true"
               data-page-list="[10, 25, 50, 100, ALL]"                     
               >

            <thead>
                <tr>
                    <th data-field="customer.name" data-align="center" data-sortable="true">customer</th>
                    <th data-field="type" data-align="center" data-sortable="true">type</th>
                    <th data-field="description" data-align="center" data-sortable="true">description</th>
                    <th data-field="cutter" data-align="center" data-sortable="true">cutter</th> 
                    <th data-field="valid_s" data-align="center" data-sortable="true">valid</th>
                </tr>
            </thead>
        </table>
    </div>            
</div>

顾客
类型
描述
切割机
有效的

---

有没有办法定义启动时隐藏哪些列？例如，我只想显示

customer

和

description

列。

您可以在javascript中使用ready函数中的

hideColumn

来实现这一点：

$(function(){
    var $table = $('#mytable');

    $table.bootstrapTable('hideColumn', 'type');
    $table.bootstrapTable('hideColumn', 'cutter');
    $table.bootstrapTable('hideColumn', 'valid_s');
});

然后，如果您想向他们展示您可以使用：

$(function(){
    var $table = $('#mytable');

    $table.bootstrapTable('showColumn', 'type');
    $table.bootstrapTable('showColumn', 'cutter');
    $table.bootstrapTable('showColumn', 'valid_s');
});

---

您可以使用

数据visible=“false”

：

顾客
类型
描述
切割机
有效的

上面的答案对我都不起作用，因为他们从DOM中删除了该列——但我必须将其保留在DOM中。我只想把专栏藏起来

以下解决方案可将列隐藏在DOM中：

例如，使用TH上的

数据类

属性，然后将其定义为隐藏：

<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>

.hidden{
  display:none;
  visibility:hidden;
}

星星
.隐藏{
显示：无；
可见性：隐藏；
}

---

或者另一个选项是在引导表的

onPostBody（）

之后在jQuery中手动隐藏TD/TH，您需要添加最后一行

<table id="mytable"  data-row-style="rowStyle" class="table table-hover" id="table-pagination " 
       data-url="labels.json" 
       data-toggle="table"
       data-pagination="true"
       data-show-pagination-switch="true"
       data-sort-order="desc" 
       data-search="true"
       data-show-refresh="true" 
       data-show-columns="true"
       data-page-list="[10, 25, 50, 100, ALL]"  
       showPaginationSwitch="false"        
       >

---

在执行项目时遇到此问题。

数据visible=“false”

对我有效。然而，我并不担心它可以在DOM中读取。我只是需要一种方法来使用

data show columns=“true”

和

data-show\u columns-toggle-all=“true”

，同时只显示表中除1列以外的所有列

我找到了正确的组合，以便在加载时隐藏，但允许用户通过单个复选框或切换所有开关将其添加进来

在我的python代码（flask post MethodView on render）中，我构建了表示表数据的JSON对象，它只是在SQLalchemy结果对象上迭代。显然，如果需要的话，如果我愿意的话，我可以建立一个

排除列名的列表来执行
in
子句搜索。但在这种情况下，它只是目前的一列

<table class="mt-3"
        data-page-list="[10, 25, All]"
        data-page-size=10
        data-pagination="true"
        data-pagination-v-align="both"
        data-search="true"
        data-show-button-text="true"
        data-show-columns="true"
        data-show-columns-toggle-all="true"
        data-show-pagination-switch="true"
        data-show-toggle="true"
        data-sortable="true"
        data-toggle="table">
      <thead class="table-dark">
        <tr>
           {% for column_key in netcool_info[0].keys() %}
              <th data-field="{{ column_key }}" data-sortable="true" scope="col" {% if column_key == 'action_time' %} data-visible="false" {% endif %}>
                  {{ column_key | replace("_", " ") | title }}
              </th>
           {% endfor %}
        </tr>
      </thead>


netcool_信息[0]中列_键的“%”。键（）%}
{{列|键|替换（|，“”）|标题}
{%endfor%}

在附带的示例中，仅查看顶部引导表选项。不知道为什么我要在那里复制，可能只是剪切/粘贴不好



NNOC 360




Netcool警报
发件人：
致：
提交
隐藏分页
显示卡片视图
柱
全部切换
总结
严重程度
报警源
第一次发生
最后发生
切换计数
车票号码
Mttr
标注说明。
所有者Uid
动作时间
显示78行中的1到10行
10
每页行数











正在装货，请稍候
总结
<table class="mt-3"
        data-page-list="[10, 25, All]"
        data-page-size=10
        data-pagination="true"
        data-pagination-v-align="both"
        data-search="true"
        data-show-button-text="true"
        data-show-columns="true"
        data-show-columns-toggle-all="true"
        data-show-pagination-switch="true"
        data-show-toggle="true"
        data-sortable="true"
        data-toggle="table">
      <thead class="table-dark">
        <tr>
           {% for column_key in netcool_info[0].keys() %}
              <th data-field="{{ column_key }}" data-sortable="true" scope="col" {% if column_key == 'action_time' %} data-visible="false" {% endif %}>
                  {{ column_key | replace("_", " ") | title }}
              </th>
           {% endfor %}
        </tr>
      </thead>

<link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>

<div id="toolbar">
  <button id="button" class="btn btn-secondary">showColumn</button>
  <button id="button2" class="btn btn-secondary">hideColumn</button>
</div>
<table
  id="table"
  data-toggle="table"
  data-toolbar="#toolbar"
  data-height="460"
  data-show-columns="true"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  var $button = $('#button')
  var $button2 = $('#button2')

  $(function() {
    $button.click(function () {
      $table.bootstrapTable('showColumn', 'name')
    })
    $button2.click(function () {
      $table.bootstrapTable('hideColumn', 'name')
    })
  })
</script>

$('#tableContainerName').bootstrapTable('destroy').bootstrapTable({
    url: YourApiUrl,
    pagination: true,
    search: true,
    columns: [{
            field: 'ColumnName',
            title: 'ColumnTitle',
            visible:false
        }]
});