web-dev-qa-db-fra.com

jquery datatables masquer la colonne

Existe-t-il un moyen avec le plugin jquery datatables de masquer (et d'afficher) une colonne de table?

J'ai compris comment recharger les données de la table: en utilisant fnClearTable et fnAddData.

Mais mon problème est que dans l'une de mes vues pour la table (par exemple, un mode caché), je ne souhaite pas afficher certaines colonnes.

javascriptjquerydatatables
57
john

Vous pouvez masquer des colonnes avec cette commande:

fnSetColumnVis( 1, false );

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

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

55
Damb

si quelqu'un rentre ici encore, cela a fonctionné pour moi ...

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

Masquer les colonnes dynamiquement

Les réponses précédentes utilisent la syntaxe DataTables héritée. Dans la version 1.10+, vous pouvez utiliser column (). Visible () :

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

Pour masquer plusieurs colonnes, columns (). Visible () peut être utilisé:

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

Voici une démonstration de Fiddle .

Masquer les colonnes lorsque la table est initialisée

Pour masquer les colonnes lors de l’initialisation de la table, vous pouvez utiliser l’option columns :

$('#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 pour lesquelles aucune autre option de colonne n'est spécifiée. Ou, vous pouvez utiliser columnDefs pour cibler une colonne spécifique:

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

Vous pouvez définir ceci pendant l'initialisation datatable

"aoColumns": [{"bVisible": false},null,null,null]
25
Pankaj Patel

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

css: 

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

Dans datatables init:

"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 également

15
DrewT

Vous pouvez essayer comme ci-dessous de masquer/afficher dynamiquement le runtime

Cacher : fnSetColumnVis (1, false, false); 

Exemple: oTable.fnSetColumnVis (item, false, false); 

Afficher : FnSetColumnVis (1, vrai, faux); 

Exemple: oTable.fnSetColumnVis (item, false, false); 

Ici, oTable est un objet de Datatable.

2
Nimesh
var example = $('#exampleTable').DataTable({
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ]
});

L'attribut cible définit la position de la colonne.Attribut visible responsable de la visibilité de la colonne.Attribut cherchable responsable de la fonction de recherche.Si la valeur est false, la colonne ne fonctionne pas avec la recherche.

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

Remarque: la solution acceptée est maintenant obsolète et fait partie du code hérité. http://legacy.datatables.net/ref Les solutions pourraient ne pas convenir à ceux qui travaillent avec les versions les plus récentes de DataTables (son héritage actuel) Pour la solution plus récente: pourrait utiliser: https://datatables.net/reference/api/columns () .visible ()

vous pouvez également utiliser un bouton: https://datatables.net/extensions/buttons/built-in Regardez la dernière option sous le lien fourni qui permet d’avoir un bouton permettant de basculer la visibilité des colonnes.

0
Bhaulik

Avec l'API, vous pouvez utiliser

var table = $('#example').DataTable();

table.column( 0 ).visible( false );

Regardez cette info:

entrez la description du lien ici

0
goero_ag

J'espère que cela vous aidera… .. J'utilise cette solution pour la recherche sur certaines colonnes, mais je ne souhaite pas les afficher sur le front-office.

$(document).ready(function() {
        $('#example').dataTable({
            "scrollY": "500px",
            "scrollCollapse": true,
            "scrollX": false,
            "bPaginate": false,
            "columnDefs": [
                { 
                    "width": "30px", 
                    "targets": 0,
                },
                { 
                    "width": "100px", 
                    "targets": 1,
                },
                { 
                    "width": "100px", 
                    "targets": 2,
                },              
                { 
                    "width": "76px",
                    "targets": 5, 
                },
                { 
                    "width": "80px", 
                    "targets": 6,
                },
                {
                    "targets": [ 7 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 8 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 9 ],
                    "visible": false,
                    "searchable": true
                },
              ]
        });
    });
0
Abo Baker

Si vous utilisez les données de json et utilisez Datatable v 1.10.19, vous pouvez le faire:

Plus d'informations 

$(document).ready(function() {
     $('#example').dataTable( {

        columns= [
          { 
           "data": "name_data",
           "visible": false
           }
        ]
  });
});
0
Alex Montoya