it-swarm.com.de

jquery-Datatables verstecken die Spalte

Gibt es eine Möglichkeit mit dem Jquery-Datatables-Plugin eine Tabellenspalte auszublenden (und anzuzeigen)?

Ich habe herausgefunden, wie man die Tabellendaten neu lädt: mit fnClearTable und fnAddData.

Mein Problem ist jedoch, dass ich in einer meiner Ansichten für die Tabelle (z. B. einen verborgenen Modus) bestimmte Spalten nicht anzeigen möchte.

57
john

Sie können Spalten mit diesem Befehl ausblenden:

fnSetColumnVis( 1, false );

Der erste Parameter ist der Spaltenindex und der zweite Parameter ist die Sichtbarkeit.

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

55
Damb

wenn hier jemand wieder rein kommt, hat das für mich funktioniert.

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

Spalten dynamisch ausblenden

Die vorherigen Antworten verwenden die alte DataTables-Syntax. In Version 1.10+ können Sie column () verwenden. Visible () :

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

Um mehrere Spalten auszublenden, kann column (). Visible () verwendet werden:

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

Hier ist eine Fiddle Demo .

Spalten ausblenden, wenn die Tabelle initialisiert wird

Zum Ausblenden von Spalten bei der Initialisierung der Tabelle können Sie die Option column verwenden:

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

Für die obige Methode müssen Sie null für Spalten angeben, die sichtbar bleiben sollen und keine anderen Spaltenoptionen angegeben sind. Sie können auch columnDefs verwenden, um auf eine bestimmte Spalte zu zielen:

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

Sie können dies während der datierbaren Initialisierung definieren

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

Für alle, die serverseitige Verarbeitung verwenden und Datenbankwerte mithilfe einer verborgenen Spalte an jQuery übergeben, empfehle ich den Parameter "sClass". Sie können css display: none verwenden, um die Spalte auszublenden und gleichzeitig den Wert abzurufen.

css: 

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

In den datatables init:

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

// BEARBEITEN: Denken Sie daran, Ihre verborgene Klasse auch in Ihre Zelle einzufügen

15
DrewT

Sie können wie nachstehend versuchen, die Laufzeit dynamisch auszublenden/anzuzeigen

Verbergen : fnSetColumnVis (1, falsch, falsch); 

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

Show : FnSetColumnVis (1, true, false); 

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

OTable ist hier ein Objekt von Datatable.

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

Zielattribut definiert die Position der Spalte. Sichtbares Attribut, das für die Sichtbarkeit der Spalte verantwortlich ist. Suchbares Attribut, das für die Suchfunktion verantwortlich ist. Wenn es auf false festgelegt ist, funktioniert diese Spalte nicht mit der Suche.

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

Hinweis: Die akzeptierte Lösung ist jetzt veraltet und Teil des alten Codes. http://legacy.datatables.net/ref Die Lösungen sind möglicherweise nicht für Benutzer geeignet, die mit den neueren Versionen von DataTables arbeiten (ihr Erbe jetzt) ​​ Für die neuere Lösung: .__ verwenden könnte: https://datatables.net/reference/api/columns () .visible ()

alternativ können Sie eine Schaltfläche implementieren: https://datatables.net/extensions/buttons/built-in Sehen Sie sich die letzte Option unter dem angegebenen Link an, mit der Sie eine Schaltfläche verwenden können, mit der die Sichtbarkeit der Spalten geändert werden kann.

0
Bhaulik

Mit der API können Sie verwenden

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

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

Schauen Sie sich diese Informationen an:

Linkbeschreibung hier eingeben

0
goero_ag

Ich hoffe, das hilft Ihnen ... Ich benutze diese Lösung für die Suche in einigen Spalten, möchte sie aber nicht im Frontend anzeigen.

$(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

Wenn Sie Daten von json verwenden und Datatable v 1.10.19 verwenden, können Sie Folgendes tun:

Mehr Info

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

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