我有下表，我使用Bootstrap-table
<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列。
答案 0 :(得分：9)
你可以在你的js中使用就绪函数中的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');
});
希望这有帮助。
答案 1 :(得分：3)
你可以使用data-visible =“false”，这对你来说很容易。
notebook.signal_switch_page().connect([this](){
std::cout << "It works !" << std::endl;
});
答案 2 :(得分：3)
上面的答案都没有对我有用，因为他们从DOM中删除了列 - 但我必须将它保留在DOM中。我只想隐藏专栏。
以下解决方案可以隐藏列，但在DOM中：
Bootstrap-Table: How to hide a column without deleting it from the DOM?
离。使用TH上的.put()属性，然后将其定义为隐藏：
multiprocessing.queues或者另一种选择是在Bootstrap-Table的data-class之后在jQuery中手动隐藏TD / TH。
答案 3 :(得分：1)
在从事项目工作时对此表示欢迎。 data-visible="false"为我工作。但是，我并不担心它可以在DOM中读取。我只需要一种使用data-show-columns="true"和data-show_columns-toggle-all="true"的方法，而只显示表中除1列之外的所有列。
我找到了用于隐藏负载的正确组合，但允许用户通过单个复选框将其添加或切换所有开关。
在我的python代码中（在渲染时将Flask发表在MethodView上），我构建了表示表数据的JSON对象，该对象只是在SQLalchemy Results对象上进行迭代。显然，如果需要的话，可以建立一个excluded_column_names的列表以执行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>
在包含的示例中，仅查看顶部的引导表选项。不知道为什么要在其中复制它，可能只是剪切/粘贴不良。
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/slate/bootstrap.min.css" rel="stylesheet" integrity="sha384-G9YbB4o4U6WS4wCthMOpAeweY4gQJyyx0P3nZbEBHyz+AtNoeasfRChmek1C2iqV" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/a824a7cb67.js"></script>
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<title>NNOC 360</title>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#summary">Summary</a>
</li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane fade show active" id="summary">
<div class="accordion" id="netcoolAccordion">
<div class="card">
<div class="card-header" id="netcoolHeading">
<div class="row">
<div class="col-sm-6">
<h2 class="mb-0">
<button class="btn btn-block btn-link text-left text-white" type="button" data-toggle="collapse" data-target="#netcoolAlarms" aria-expanded="true" aria-controls="netcoolAlarms">
Netcool Alarms
</button>
</h2>
</div>
<div class="col-sm-6">
<form method="post" class="form-inline float-right">
<label for="netcoolFromDate">From:</label>
<input type="datetime-local" class="form-control-sm mb-2 mx-2" id="netcoolFromDate" value="2020-01-19T11:48" name="netcool_from_date">
<label for="netcoolToDate">To:</label>
<input type="datetime-local" class="form-control-sm mb-2 mx-2" id="netcoolToDate" value="2020-01-20T11:48" name="netcool_to_date">
<input type="hidden" value="688319" name="site_id_hidden">
<button type="submit" class="btn-md btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div id="netcoolAlarms" class="bg-secondary text-white collapse show" aria-labelledby="netcoolHeading" data-parent="#netcoolAccordion" style="">
<div class="bootstrap-table bootstrap4">
<div class="fixed-table-toolbar">
<div class="columns columns-right btn-group float-right"><button class="btn btn-secondary" type="button" name="paginationSwitch" aria-label="Pagination Switch" title="Hide/Show pagination">
<i class="fa fa-caret-square-down" aria-hidden="true"></i>
Hide pagination
</button><button class="btn btn-secondary" type="button" name="toggle" aria-label="Toggle" title="Toggle">
<i class="fa fa-toggle-off" aria-hidden="true"></i>
Show card view
</button>
<div class="keep-open btn-group" title="Columns">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-label="Columns" title="Columns" aria-expanded="false">
<i class="fa fa-th-list" aria-hidden="true"></i>
Columns
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(129px, 48px, 0px);"><label class="dropdown-item"><input type="checkbox" class="toggle-all"> <span>Toggle all</span></label>
<div class="dropdown-divider"></div><label class="dropdown-item"><input type="checkbox" data-field="summary" value="0" checked="checked"> <span>
Summary
</span></label><label class="dropdown-item"><input type="checkbox" data-field="severity" value="1" checked="checked"> <span>
Severity
</span></label><label class="dropdown-item"><input type="checkbox" data-field="alarm_source" value="2" checked="checked"> <span>
Alarm Source
</span></label><label class="dropdown-item"><input type="checkbox" data-field="first_occurrence" value="3" checked="checked"> <span>
First Occurrence
</span></label><label class="dropdown-item"><input type="checkbox" data-field="last_occurrence" value="4" checked="checked"> <span>
Last Occurrence
</span></label><label class="dropdown-item"><input type="checkbox" data-field="toggle_count" value="5" checked="checked"> <span>
Toggle Count
</span></label><label class="dropdown-item"><input type="checkbox" data-field="ticket_number" value="6" checked="checked"> <span>
Ticket Number
</span></label><label class="dropdown-item"><input type="checkbox" data-field="mttr" value="7" checked="checked"> <span>
Mttr
</span></label><label class="dropdown-item"><input type="checkbox" data-field="callout_inst." value="8" checked="checked"> <span>
Callout Inst.
</span></label><label class="dropdown-item"><input type="checkbox" data-field="owner_uid" value="9" checked="checked"> <span>
Owner Uid
</span></label><label class="dropdown-item"><input type="checkbox" data-field="action_time" value="10"> <span>
Action Time
</span></label></div>
</div>
</div>
<div class="float-right search btn-group">
<input class="form-control search-input" type="text" placeholder="Search">
</div>
</div>
<div class="fixed-table-pagination clearfix">
<div class="float-left pagination-detail">
<span class="pagination-info">
Showing 1 to 10 of 78 rows
</span><span class="page-list"><span class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="page-size">
10
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu"><a class="dropdown-item active" href="#">10</a><a class="dropdown-item " href="#">25</a><a class="dropdown-item " href="#">All</a></div>
</span> rows per page</span>
</div>
<div class="float-right pagination">
<ul class="pagination">
<li class="page-item page-pre"><a class="page-link" aria-label="previous page" href="javascript:void(0)">‹</a></li>
<li class="page-item active"><a class="page-link" aria-label="to page 1" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 2" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 3" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 4" href="javascript:void(0)">4</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 5" href="javascript:void(0)">5</a></li>
<li class="page-item page-last-separator disabled"><a class="page-link" aria-label="" href="javascript:void(0)">...</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 8" href="javascript:void(0)">8</a></li>
<li class="page-item page-next"><a class="page-link" aria-label="next page" href="javascript:void(0)">›</a></li>
</ul>
</div>
</div>
<div class="fixed-table-container" style="padding-bottom: 0px;">
<div class="fixed-table-header" style="display: none;">
<table></table>
</div>
<div class="fixed-table-body">
<div class="fixed-table-loading table table-bordered table-hover" style="top: 1px;">
<span class="loading-wrap">
<span class="loading-text">Loading, please wait</span>
<span class="animation-wrap"><span class="animation-dot"></span></span>
</span>
</div>
<table class="mt-3 table table-bordered table-hover" 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" style="">
<tr>
<th style="" data-field="summary">
<div class="th-inner sortable both">
Summary
</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="severity">
<div class="th-inner sortable both">
Severity
</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="alarm_source">
<div class="th-inner sortable both">
Alarm Source
</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="first_occurrence">
<div class="th-inner sortable both">
First Occurrence
</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="last_occurrence">
<div class="th-inner sortable both">
Last Occurrence
</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="toggle_count">
<div class="th-inner sortable both">
Toggle Count
</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="ticket_number">
<div class="th-inner sortable both">
Ticket Number
</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="mttr">
<div class="th-inner sortable both">
Mttr
</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="callout_inst.">
<div class="th-inner sortable both">
Callout Inst.
</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="owner_uid">
<div class="th-inner sortable both">
Owner Uid
</div>
<div class="fht-cell"></div>
</th>
</tr>
</thead>
<tbody>
<tr data-index="0">
<td style="">Provision Configuration NBI file updated MWE-ROANOKEPEORIA-688319-MINONK-688470</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 06:58:39</td>
<td style="">2020-01-20 06:58:39</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
<tr data-index="1">
<td style="">Provision Demodulator not locked MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 06:41:15</td>
<td style="">2020-01-20 06:41:15</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
<tr data-index="2">
<td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 06:41:26</td>
<td style="">2020-01-20 06:41:26</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
<tr data-index="3">
<td style="">Provision Demodulator not locked MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 06:41:15</td>
<td style="">2020-01-20 06:41:15</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
<tr data-index="4">
<td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 06:41:26</td>
<td style="">2020-01-20 06:41:26</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
<tr data-index="5">
<td style="">Provision Configuration NBI file updated MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 05:39:58</td>
<td style="">2020-01-20 05:39:58</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
<tr data-index="6">
<td style="">Provision Configuration NBI file updated MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 05:39:58</td>
<td style="">2020-01-20 05:39:58</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
<tr data-index="7">
<td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 03:50:56</td>
<td style="">2020-01-20 03:50:56</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
<tr data-index="8">
<td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 03:50:56</td>
<td style="">2020-01-20 03:50:56</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
<tr data-index="9">
<td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
<td style="">0</td>
<td style="">Roanoke - 688319</td>
<td style="">2020-01-20 02:28:40</td>
<td style="">2020-01-20 02:28:40</td>
<td style="">0</td>
<td style="">None</td>
<td style="">None</td>
<td style="">None</td>
<td style="">65534</td>
</tr>
</tbody>
<tfoot style="display: none;">
<tr></tr>
</tfoot>
</table>
</div>
<div class="fixed-table-footer">
<table>
<thead>
<tr></tr>
</thead>
</table>
</div>
</div>
<div class="fixed-table-pagination">
<div class="float-left pagination-detail">
<span class="pagination-info">
Showing 1 to 10 of 78 rows
</span><span class="page-list"><span class="btn-group dropdown dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="page-size">
10
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu"><a class="dropdown-item active" href="#">10</a><a class="dropdown-item " href="#">25</a><a class="dropdown-item " href="#">All</a></div>
</span> rows per page</span>
</div>
<div class="float-right pagination">
<ul class="pagination">
<li class="page-item page-pre"><a class="page-link" aria-label="previous page" href="javascript:void(0)">‹</a></li>
<li class="page-item active"><a class="page-link" aria-label="to page 1" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 2" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 3" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 4" href="javascript:void(0)">4</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 5" href="javascript:void(0)">5</a></li>
<li class="page-item page-last-separator disabled"><a class="page-link" aria-label="" href="javascript:void(0)">...</a></li>
<li class="page-item"><a class="page-link" aria-label="to page 8" href="javascript:void(0)">8</a></li>
<li class="page-item page-next"><a class="page-link" aria-label="next page" href="javascript:void(0)">›</a></li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
</body>
</html>
答案 4 :(得分：1)
请参阅使用与Zakaria相同的方法的文档中的以下示例，其中可以隐藏/显示列： https://examples.bootstrap-table.com/#methods/show-hide-column.html#view-source
<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>
答案 5 :(得分：0)
您需要添加最后一行
<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"
>
答案 6 :(得分：0)
如果您使用 javascript 动态加载您的表格，您可以在引导程序表格的初始呈现时设置可见性，将 visible:false 添加到您要隐藏的列中。
$('#tableContainerName').bootstrapTable('destroy').bootstrapTable({
url: YourApiUrl,
pagination: true,
search: true,
columns: [{
field: 'ColumnName',
title: 'ColumnTitle',
visible:false
}]
});