web-dev-qa-db-fra.com

jQuery DataTables masque la colonne sans la supprimer du DOM

J'ai besoin de masquer une colonne pour qu'elle apparaisse dans jquery datatables . Lorsque je masque la colonne à l'aide de la propriété bVisible, elle disparaît du DOM.

Je souhaite définir la propriété d'affichage des cellules de tableau d'une colonne sur none afin que les valeurs n'apparaissent pas dans la vue, mais qu'elles soient toujours présentes dans le DOM, car la colonne masquée identifie la ligne de manière unique et j'ai besoin de connaître l'unique. ID sur la ligne sélectionnée. Comment y parvenir.

Je renseigne la table à l'aide de la propriété aaData à l'aide de la pagination côté serveur.

Vous avez jeté un coup d’œil à cette question mais ces options le suppriment du DOM . jquery datatables masquer la colonne

jquerycssdomdatatables
16
Rohit Banga

Vous devez utiliser className avec les columnDefs ou les colonnes ,

Définissez la classe hide_column dans votre css comme ceci

.hide_column {
    display : none;
}

Vous avez deux façons d'affecter cette classe .hide_column:

Utilisez columnDefs (assignez une classe personnalisée à la première colonne):

$('#example').DataTable( {
  columnDefs: [
    { targets: [ 0 ],
      className: "hide_column"
    }
  ]
} );

OU columns

$('#example').DataTable( {
  "columns": [
    { className: "hide_column" },
    null,
    null,
    null,
    null
  ]
} );

extraits de code pris à partir d'ici

Ancienne réponse

Essayez d'ajouter 

"sClass": "hide_column"

cela devrait rendre cette colonne cachée ...

33
Daniel

Pour compléter la réponse de Daniel:

css: 

th.hide_me, td.hide_me {display: none;}

Dans datatables init:

"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "hide_me"

N'oubliez pas d'ajouter votre classe cachée à votre cellule thead également:

<thead>
    <th class="hide_me">First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</thead>

C'est également une stratégie utile si vous utilisez un traitement côté serveur et souhaitez transférer des données de la source ajax sans qu'elles ne soient visibles dans le datatable. Vous pourrez toujours récupérer la valeur de la colonne sur le front-end sans avoir besoin de l'afficher. Utile pour filtrer via des valeurs de données cachées, etc.

Exemple:

// In datatables init file
<script>
    var filteredValues = [];
    $('td.your_filtering_class').each(function(){
        var someVariable = $(this).find('.hide_me').html();
        filteredValues.Push(someVariable);
    }
</script>
10
DrewT

Si vous souhaitez masquer plusieurs colonnes: 

$('#example').dataTable({
  "columnDefs": [{ 
    "targets": [0,1,3], //Comma separated values
    "visible": false,
    "searchable": false }
  ]
});
3
Jyotirmaya Prusty

c'est ma contribution pour vous.

Pas sûr si le code est correct mais son travail.

Si vous avez plus d'une colonne d'installation comme moi. 

$('#example').dataTable( {
  "columnDefs": [ {
        "targets"  : 'no-sort',
        "orderable": false,
        "order": [],
    }],
    "columnDefs": [ {
        "targets"  : 'hide_column',
        "orderable": false,
        "order": [],
        "visible": false
    }]
} );
0
user7901356