jQuery datatables masquer la colonne

Si quelqu'un revient ici, cela a fonctionné pour moi...

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

Vous pouvez le définir lors de l'initialisation datatable

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

Masquer les colonnes dynamiquement

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

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

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

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 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 ne pas avoir d'autres options de colonne spécifiées. Vous pouvez également utiliser columnDefs pour cibler une colonne spécifique:

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

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

Css:

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

Dans les tables de données init:

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

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

Vous pouvez essayer comme ci-dessous pour masquer / afficher dynamiquement l'exécution

Masquer : fnSetColumnVis (1, false, false );

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

Afficher : fnSetColumnVis (1, vrai, faux );

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

Ici, oTable est l'objet de Datatable.

Avec l'api, vous pouvez utiliser

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

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

Regardez cette info:

Entrez description du lien ici

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 être appropriées pour ceux qui travaillent avec les nouvelles versions de DataTables (son héritage maintenant) Pour la nouvelle solution: vous pouvez utiliser: https://datatables.net/reference/api/columns (). visible()

Alternatives vous pouvez implémenter un bouton: https://datatables.net/extensions/buttons/built-in regardez la dernière option, sous le lien fourni qui permet d'avoir un bouton qui pourrait basculer la colonne visibilité.

Espère que cela va vous aider. J'utilise cette solution pour la recherche sur certaines colonnes mais je ne veux pas les afficher sur frontend.

$(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
                },
              ]
        });
    });

Si vous utilisez des 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
           }
        ]
  });
});

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

Regardez ma solution

J'ai ce HTML table Head

<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 mon Ajax request a retourné quelque chose comme ceci

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

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

J'espère que cela vous aidera