Masquer des colonnes dans le bootstrap table au démarrage

J'ai le tableau suivant, où j'utilise 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>

Est-il un moyen de définir les colonnes qui seront cachés au démarrage? Par exemple, je veux montrer seulement customer et description colonne.

OriginalL'auteur yaylitzis | 2017-01-03

bootstrap-table twitter-bootstrap

Vous pouvez utiliser les données-visible="false",il est facile pour vous.

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

Qui ne fonctionnent pas correctement. Si vous ne data-visible="false" il supprime les DOM!

OriginalL'auteur lvwzhen

Vous pouvez le faire dans votre js en utilisant hideColumn à l'intérieur de la fonction ready :

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

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

Alors si vous voulez leur montrer que vous pouvez utiliser :

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

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

Espère que cette aide.

OriginalL'auteur Zakaria Acharki

3

Aucune des réponses ci-dessus a fonctionné pour moi, parce qu'ils ont supprimé la colonne de la DOM-mais j'ai dû le garder dans les DOM. Je voulais seulement à masquer la colonne.

Les solutions suivantes ont travaillé pour garder la colonne masquée, mais dans les DOM:

Bootstrap-Table: Comment masquer une colonne sans le supprimer de la DOM?

ex. à l'aide de la data-class attribut sur la TH, et alors la définition qu'il soit caché:
```
<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>

.hidden{
  display:none;
  visibility:hidden;
}
```
Ou une autre option est de cacher la TD/TH manuellement en jQuery après Bootstrap-Table onPostBody().

OriginalL'auteur gene b.

Vous devez ajouter la dernière ligne

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

OriginalL'auteur Sergio Araque

Vous devez vous connecter pour publier un commentaire.