jQuery DataTables masque la colonne sans la supprimer du DOM

J’ai besoin de cacher une colonne d’apparaître dans jquery datatables. Lorsque je cache 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 que je cache identifie la ligne de manière 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’oeil à cette question mais ces options la suppriment du DOM. jquery datatables masquer la colonne

Vous devez utiliser className avec 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" } ] } ); 

columns OU

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

extraits de code pris d’ici


Ancienne réponse

Essayez d’append

 "sClass": "hide_column" 

cela devrait rendre cette colonne cachée …

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’append votre classe cachée à votre cellule thead également:

  First Column Second Column Third Column  

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 à l’afficher. Utile pour filtrer via des valeurs de données cachées, etc.

Exemple:

 // In datatables init file  

Si vous souhaitez masquer plusieurs colonnes:

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

c’est ma consortingbution 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 }] } ); 

Vous pouvez utiliser la méthode hide .

 $(element).hide(); 

Pour afficher l’élément, utilisez la méthode show :

 $(element).show(); 

Pour obtenir la colonne de votre choix, vous pouvez utiliser le n-th child sélecteur d’ n-th child de jquery.