Jquery datatables hide column

Vous pouvez masquer les colonnes par cette commande:

 fnSetColumnVis( 1, false ); 

Lorsque le premier paramètre est l'index de la colonne et le second paramètre est la visibilité.

Via: http://www.datatables.net/api – function fnSetColumnVis

Si quelqu'un rentre ici, cela a fonctionné pour moi …

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

Vous pouvez le définir lors de l'initialisation de données

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

Pour quiconque utilise un traitement côté serveur et passe des valeurs de base de données dans jQuery à l'aide d'une colonne cachée, je suggère "sClass" param. Vous pourrez utiliser l'affichage css: aucun pour cacher la colonne tout en pouvant récupérer sa valeur.

Css:

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

Dans les données disponibles:

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

// EDIT: n'oubliez pas d'ajouter votre classe cachée à votre cellule Thead aussi

Masquer les colonnes dynamiquement

Les réponses précédentes utilisent la syntaxe DataTables ancienne. Dans v 1.10+, vous pouvez utiliser la colonne (). Visible () :

 var dt = $('#example').DataTable(); //hide the first column dt.column(0).visible(false); 

Pour masquer plusieurs colonnes, les colonnes (). Visible () peuvent être utilisées:

 var dt = $('#example').DataTable(); //hide the second and third columns dt.columns([1,2]).visible(false); 

Voici une démo de violon .

Masquer les colonnes lorsque la table est initialisée

Pour masquer les colonnes lorsque la table est initialisée, vous pouvez utiliser l'option Colonnes :

 $('#example').DataTable( { 'columns' : [ null, //hide the second column {'visible' : false }, null, //hide the fourth column {'visible' : false } ] }); 

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

 $('#example').DataTable( { 'columnDefs' : [ //hide the second & fourth column { 'visible': false, 'targets': [1,3] } ] }); 

Vous pouvez essayer comme ci-dessous pour cacher / afficher l'exécution dynamique

Masquer : fnSetColumnVis (1, false, false);

Exemple: oTable.fnSetColumnVis (élément, faux, faux);

Afficher : fnSetColumnVis (1, true, false);

Exemple: oTable.fnSetColumnVis (élément, faux, faux);

Ici, OTable fait l'objet de Datatable.

Avec l'api, vous pouvez utiliser

 var table = $('#example').DataTable(); table.column( 0 ).visible( false ); 

Regardez cette info:

Entrez la description du lien ici

 $(document).ready(function() { $('#example').DataTable( { "columnDefs": [ { "targets": [ 2 ], "visible": false, "searchable": false }, { "targets": [ 3 ], "visible": false } ] });}); 

Regarde ma solution

J'ai cette table Head HTML

 <thead> <tr> <th style="width: 20%">@L("Id")</th> <th style="width: 20%">@L("IdentityNumber")</th> <th style="width: 20%">@L("Name")</th> <th style="width: 20%">@L("MobileNumber")</th> <th style="width: 20%">@L("RegistrationStatus")</th> <th style="width: 20%">@L("RegistrationStatusId")</th> <th style="width: 20%; text-align: center;" data-hide="phone">@L("Actions")</th> </tr> </thead> 

Et ma Ajax request retourné quelque chose comme ça

Donc je veux cacher Id index [0] et RegistrationStatusId index [5]

 $(document).ready(function() { $('#example').dataTable( { "columnDefs": [ { "aTargets": [0, 5], "sClass": "invisible"},// here is the tricky part ] }); }); 

J'espère que cela vous aidera