Hide columns in bootstrap table at startup

Asked 3/1, 2017 at 15:1 Answered 6/4, 2021 at 16:5

Solved twitter-bootstrap bootstrap-table

I have the following table, where I use 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>

Is there a way to define which columns will be hidden at startup? For example, I want to show only customer and description column.

Millenarian answered 3/1, 2017 at 15:1 Comment(0)

You can use data-visible="false":

<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" data-visible="false">type</th>
        <th data-field="description" data-align="center" data-sortable="true">description</th>
        <th data-field="cutter" data-align="center" data-sortable="true" data-visible="false">cutter</th>
        <th data-field="valid_s" data-align="center" data-sortable="true" data-visible="false">valid</th>
    </tr>
</thead>

Curagh answered 9/1, 2017 at 1:46 Comment(3)

That won't work properly. If you do data-visible="false" it deletes it from the DOM! – Fabrianna 12/3, 2018 at 20:30

This answer not help me((( – Charr 3/12, 2019 at 17:34

This deletes the element from the Dom, so can access the element, this is not viable. – Prepotent 16/3, 2021 at 14:16

You could do that in your javascript using hideColumn inside the ready function:

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

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

Then if you want to show them you could use:

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

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

Airy answered 5/1, 2017 at 15:39 Comment(1)

You need bootstrap-table.com and add Attribute: 'data-field'. The column options is defined in jQuery.fn.bootstrapTable.columnDefaults – Charr 3/12, 2019 at 17:34

You can use data-visible="false":

<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" data-visible="false">type</th>
        <th data-field="description" data-align="center" data-sortable="true">description</th>
        <th data-field="cutter" data-align="center" data-sortable="true" data-visible="false">cutter</th>
        <th data-field="valid_s" data-align="center" data-sortable="true" data-visible="false">valid</th>
    </tr>
</thead>

Curagh answered 9/1, 2017 at 1:46 Comment(3)

That won't work properly. If you do data-visible="false" it deletes it from the DOM! – Fabrianna 12/3, 2018 at 20:30

This answer not help me((( – Charr 3/12, 2019 at 17:34

This deletes the element from the Dom, so can access the element, this is not viable. – Prepotent 16/3, 2021 at 14:16

None of the answers above worked for me, because they deleted the column from the DOM -- but I had to keep it in the DOM. I only wanted to hide the column.

The following solutions worked to keep the column hidden but in the DOM:

Bootstrap-Table: How to hide a column without deleting it from the DOM?

ex. using the data-class attribute on the TH, and then defining it to be hidden:

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

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

Or another option is to hide the TD/TH manually in jQuery after Bootstrap-Table's onPostBody().

Fabrianna answered 12/3, 2018 at 21:17 Comment(0)

You need to add the last line

<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"        
       >

Stepdame answered 25/9, 2018 at 7:0 Comment(0)

Came across this while working on a project. The data-visible="false" worked for me. However I wasn't as concerned about it being available to be read in the DOM. I just needed a way to use the data-show-columns="true" and data-show_columns-toggle-all="true" while only visible showing all but 1 column in my table.

I found the right combination that I used in order to hide on load, but allow the user to add it in via single checkbox or toggle all switch.

In my python code (flask post MethodView on render) I build my JSON object that represents the table data, which is just iterating over a SQLalchemy Results object. Obviously if needed a could just build a list of excluded_column_names to perform an in clauses search if I wanted. But in this case it is just the one column for now.

<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>

In included example look at only the top bootstrap-table options. Not sure why I have it duplicated in there, probably just bad cut/paste.

<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/[email protected]/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/[email protected]/dist/bootstrap-table.min.js"></script>

</body>

</html>

Rataplan answered 20/1, 2020 at 18:17 Comment(0)

See the following example from the documentation that uses the same method as Zakaria where columns can be hidden / shown: https://examples.bootstrap-table.com/#methods/show-hide-column.html#view-source

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/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>

Dustcloth answered 9/6, 2020 at 14:11 Comment(0)

If you load your table dynamically using javascript, you can set visibility at the initial rendering of the bootstrap table, add visible:false to the column you want to hide.

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

Southworth answered 6/4, 2021 at 16:5 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags