web-dev-qa-db-fra.com

DataTable responsive affiche certaines colonnes

J'utilise DataTables avec responsive et je rencontre des problèmes en essayant d'afficher uniquement certaines colonnes.

La disposition de la table est comme ceci:  enter image description here

J'ai besoin d'afficher uniquement 'Column 1', 'Column3', 'Column 7', 'Column 8', 'Column 10' et de masquer les autres (ceux-ci doivent être affichés avec le contrôle de développement à la fin de chaque ligne).

JS:

  $( 'table' ).DataTable( {
      order: [ [ 0, "asc" ] ],
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets: -1
        } ]
    } );

C'est la JSFiddle . Aucune suggestion!

jquerydatatablesdatatables-1.10
6
Beginner

Pour afficher des colonnes spécifiques dans les données sensibles, il vous suffit d'ajouter Class Controls dans th du tableau, comme suit:

<table class="table table-hover table-striped">
  <thead>
    <tr>
      <th class="all">Column 1</th>
      <th class="none">Column 2</th>
      <th class="all">Column 3</th>
      <th class="none">Column 4</th>
      <th class="none">Column 5</th>
      <th class="none">Column 6</th>
      <th class="all">Column 7</th>
      <th class="all">Column 8</th>
      <th class="none">Column 9</th>
      <th class="all">Column 10</th>
      <th class="none">Column 11</th>
      <th class="all"></th>
    </tr>
  </thead>

class "all": Affiche toujours la colonne quelle que soit la taille de l'écran.

class "none": Ne pas afficher sous forme de colonne, mais dans la ligne enfant.

La source

Ici est sa démo de travail.

17
mmushtaq

Il semble que vous ayez besoin de this :

La priorité de colonne peut également être définie par un attribut de priorité de données dans la cellule d'en-tête de la colonne (par exemple, Prénom).

1
Mick