79 votes

Jquery datatables cacher une colonne

Y a-t-il un moyen avec le plugin jQuery DataTables de masquer (et afficher) une colonne de tableau ?

J'ai compris comment recharger les données du tableau : en utilisant fnClearTable et fnAddData.

Mais mon problème est que dans l'une de mes vues pour le tableau (par exemple, en mode caché), je ne veux pas afficher certaines colonnes.

81voto

devlin carnate Points 5012

Masquer des colonnes dynamiquement

Les réponses précédentes utilisent une syntaxe obsolète de DataTables. Dans la version 1.10+, vous pouvez utiliser [column().visible()](https://datatables.net/reference/api/column().visible()):

var dt = $('#example').DataTable();
//masquer la première colonne
dt.column(0).visible(false);

Pour masquer plusieurs colonnes, [columns().visible()](https://datatables.net/reference/api/columns().visible()) peut être utilisé:

var dt = $('#example').DataTable();
//masquer la deuxième et troisième colonnes
dt.columns([1,2]).visible(false);

Voici une démo Fiddle.

Masquer les colonnes lors de l'initialisation du tableau

Pour masquer des colonnes lors de l'initialisation du tableau, vous pouvez utiliser l'option columns:

$('#example').DataTable( {
    'columns' : [
        null,
        //masquer la deuxième colonne
        {'visible' : false },
        null,
        //masquer la quatrième colonne
        {'visible' : false }
    ]
});

Pour la méthode ci-dessus, vous devez spécifier null pour les colonnes qui doivent rester visibles et n'ont pas d'autres options de colonne spécifiées. Ou, vous pouvez utiliser columnDefs pour cibler une colonne spécifique:

$('#example').DataTable( {
    'columnDefs' : [
        //masquer la deuxième et quatrième colonne
        { 'visible': false, 'targets': [1,3] }
    ]
});

0 votes

Cela pourrait également être fait avec l'option columns.visible. Si vous voulez que votre réponse soit complète, je mentionnerais également cela.

0 votes

C'est une super mise à jour, mais je voulais dire l'option colonnes, visible, voir datatables.net/reference/option/columns.visible

1 votes

@Gyrocode.com - Ah, oui. Je pensais à la visibilité dynamique. J'ai ajouté des détails sur la façon de masquer les colonnes à l'initialisation.

59voto

Damb Points 6587

Vous pouvez masquer les colonnes avec cette commande :

fnSetColumnVis( 1, false );

Où le premier paramètre est l'index de la colonne et le deuxième paramètre est la visibilité.

Par le biais de : http://www.datatables.net/api - fonction fnSetColumnVis

3 votes

Je souhaiterais vraiment que le site API datatables mette chaque méthode sur une page différente -- cela rendrait tellement plus facile de rechercher une en particulier sur Google.

0 votes

@Blazemonger: il y a des ancres, pour un accès facile: datatables.net/api#fnSetColumnVis

0 votes

@RobotMess Les ancres sont parfaites pour les humains pour lier, mais les résultats de recherche Google ne vont qu'au sommet de la page.

55voto

ahaliav fox Points 737

Si quelqu'un rentre à nouveau ici cela a fonctionné pour moi...

"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]

25voto

Pankaj Patel Points 201

Vous pouvez définir ceci lors de l'initialisation de la table de données

"aoColumns": [{"bVisible": false},null,null,null]

1 votes

"aoColumns": [{"bVisible": false}] était suffisant pour moi (sans null).

1 votes

@Gerry_Gurevich a en partie raison. Dans cet exemple, la première colonne obtient la propriété "bVisible": false tandis que toutes les autres colonnes du tableau ne reçoivent aucun argument. Cela est dû au fait que lorsque vous utilisez "aoColumns": [ ... ], vous devez envoyer une liste séparée par des virgules de TOUTES les colonnes du tableau. Si vous utilisez "aoColumnDefs": [ ... ] à la place (voir réponse de @ahaliav_fox) vous n'avez besoin de déclarer qu'un tableau d'index de colonnes pour appliquer la propriété. Par conséquent, vous n'avez pas besoin de déclarer l'état de chaque colonne si elle obtient la propriété ou non.

17voto

DrewT Points 527

Pour toute personne utilisant un traitement côté serveur et passant des valeurs de base de données dans jQuery en utilisant une colonne cachée, je suggère le paramètre "sClass". Vous pourrez utiliser css display: none pour masquer la colonne tout en pouvant toujours récupérer sa valeur.

css:

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

À l'initialisation de datatables :

"aoColumnDefs": [ { "sClass": "dpass", "aTargets": [ 0 ] } ] // la première colonne dans le tableau des colonnes visibles reçoit la classe "dpass"

//EDIT: n'oubliez pas d'ajouter votre classe cachée à la cellule de l'en-tête également

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X